FlowGram.AI 工作流开发框架：从快速上手到画布、表单、变量引擎全解析

前端低代码工作流自动化流程编排【免费下载链接】flowgram.aiFlowGram is an extensible workflow development framework with built-in canvas, form, variable, and materials that helps developers build AI workflow platforms faster and simpler.项目地址https://gitcode.com/gh_mirrors/fl/flowgram.ai点击查看免费下载FlowGram 是一个可组合、可视化、易于集成且可扩展的工作流开发框架与工具集目标是帮助开发者以更快、更简单的方式搭建 AI 工作流平台。它并非一个现成的工作流平台而是一套包含流程画布、节点配置表单、变量作用域链与开箱即用物料LLM、条件、代码编辑器等的框架和工具集。读完本文你将掌握使用官方 CLI 创建 FlowGram 项目的完整流程、两大画布引擎与表单/变量引擎的能力边界并能结合 demo-free-layout 源码理解编辑器配置、节点注册与插件体系的实战用法。定位框架与工具集而非成品平台仓库 README.md 对 FlowGram 的官方定义是FlowGram is a composable, visual, easy-to-integrate, and extensible workflow development framework toolkit. Our goal is to help developers build AI workflow platformsfasterandsimpler.这句话划定了它的使用方式你引入 FlowGram 的包在 React 应用中装配画布、表单、变量与物料最终得到属于自己的工作流平台。仓库中同样提供了完整的中文、西班牙语、俄语、葡萄牙语、德语、日语版本 README见 README_ZH.md 等多语言文档其中中文版本对四大特性的描述更为完整例如表单引擎管理节点数据的增删改查操作并提供渲染、验证、副作用、联动和错误捕获等功能变量引擎支持作用域约束、变量结构检查和类型推断等功能。官方演示中描述了一条完整链路遍历一组城市通过 HTTP 获取实时天气用 Code 节点解析温度借助 LLM 生成穿搭建议经由 Condition 进行筛选在循环中汇总结果最后使用 Advisor LLM 选出最舒适的城市并将结果发送至 End 节点。这条链路涵盖了 FlowGram 几乎所有核心能力的组合。快速上手第一步使用官方 CLI 创建项目官方推荐通过flowgram.ai/create-app脚手架创建项目npx flowgram.ai/create-applatest不带参数执行时会进入交互式选择界面。从 CLI 实现源码 可以看到当前可选的模板共 7 个交互选项对应项目目录说明Fixed Layout Demodemo-fixed-layout固定布局完整示例Free Layout Demodemo-free-layout自由布局完整示例README 推荐 ⭐️Fixed Layout Demo Simpledemo-fixed-layout-simple固定布局精简示例Free Layout Demo Simpledemo-free-layout-simple自由布局精简示例Free Layout Nextjs Demodemo-nextjsNext.js 集成示例Free Layout Vite Demo Simpledemo-viteVite 构建示例Demo Playground for infinite canvasdemo-playground无限画布 Playground也支持直接传模板名会映射为demo-前缀目录例如npx flowgram.ai/create-applatest free-layout该用法在 demo-free-layout 的 README 中同样有说明。CLI 的内部工作流程可以从 create-app 源码 中确认通过npm view flowgram.ai/demo-fixed-layout version --taglatest查询最新版本号从 npm registry 下载对应模板的 tarball 并解压到当前目录读取生成项目的package.json把所有flowgram.ai前缀的依赖版本统一替换为flowgram.ai/core的最新版本updateFlowGramVersions保证框架包版本一致打印启动提示cd folderName→npm install→npm start。第二步启动项目按照 README 的官方步骤cd demo-free-layout npm install npm start然后打开http://localhost:3000即可看到编辑器。对照 demo-free-layout/package.json 可以确认npm start实际执行的是cross-env NODE_ENVdevelopment rsbuild dev --open即基于 RsbuildRspack 之上的现代构建工具启动开发服务器并自动打开浏览器。构建入口在 rsbuild.config.ts 中配置入口文件为./src/app.tsx启用 React 与 Less 插件并通过decorators: { version: legacy }支持 Inversify 的injectable()/inject装饰器依赖注入体系依赖此配置。环境要求该仓库本身使用 Rush monorepo 管理rush.json 中声明的 Node.js 支持范围为18.20.3 19.0.0 || 20.14.0 23.0.0包管理器为 pnpm 10.6.5。在本地运行生成的 demo 项目时建议同样采用 18 或 20 的 Node LTS 版本以与仓库工具链保持一致。核心特性总览README 用一张特性表总结了四大核心能力这里完整继承并结合仓库结构展开特性说明Free Layout Canvas自由布局画布节点可任意摆放节点间用自由走向的连线边连接Fixed Layout Canvas固定布局画布节点拖拽到指定位置支持分支、循环等复合节点Form表单引擎管理节点数据的 CRUD提供渲染、校验、副作用、联动与错误捕获Variable变量引擎支持作用域约束、变量结构检查与类型推断便于管理工作流数据流对应到仓库四大能力分别由以下目录实现见 packages 目录自由画布packages/client/free-layout-editor 与 packages/canvas-engine/free-layout-core固定画布packages/client/fixed-layout-editor 与 packages/canvas-engine/fixed-layout-core表单packages/node-engine/form-core 与 packages/node-engine/form变量packages/variable-engine 下的variable-core、variable-layout、json-schema三个子包。此外packages/materials目录提供了各能力域的物料form-materials、form-antd-materials、type-editor类型编辑器等即 README 所说的ready-to-use materials。深入 Free Layout Demo编辑器配置、节点与插件apps/demo-free-layout 是 README 推荐的完整示例也是理解整个框架的最佳入口。其 README 自述了技术栈React 18 TypeScript、Rsbuild 构建、Less Styled Components、Semi Designdouyinfe/semi-uiUI 库、FlowGram 自研编辑框架、Inversify 依赖注入。编辑器装配FreeLayoutEditorProvider渲染入口在 editor.tsx核心结构只有三层FreeLayoutEditorProvider {...editorProps} DockedPanelLayer EditorRenderer classNamedemo-editor / /DockedPanelLayer /FreeLayoutEditorProviderFreeLayoutEditorProvider来自flowgram.ai/free-layout-editor它接收FreeLayoutProps并创建整个编辑上下文DockedPanelLayer来自flowgram.ai/panel-manager-plugin用于承载停靠面板如属性面板、变量面板。FreeLayoutProps配置中心全部配置集中在 use-editor-props.tsx 的useEditorProps中返回。按类别梳理关键配置项画布与基础行为{ background: true, // 背景网格 readonly: false, // 只读模式只读时节点不可拖拽 twoWayConnection: true, // 线条支持双向连接默认 true enableReadonlyNodeDragging: false, playground: { preventGlobalGesture: true }, // 阻止 Mac 浏览器手势翻页 initialData, // 初始数据FlowDocumentJSON nodeRegistries, // 节点注册表 }业务规则钩子——这四个回调是控制工作流拓扑合法性的关键{ // 连线合法性示例中禁止同节点自环、跨容器连线并做环检测不允许连回上游节点 canAddLine(ctx, fromPort, toPort) { if (fromPort.node toPort.node) return false; if (fromPort.node.parent?.id ! toPort.node.parent?.id /* group 容器例外 */) return false; return !fromPort.node.lines.allInputNodes.includes(toPort.node); }, canDeleteLine(ctx, line, newLineInfo, silent) { return true; }, // Backspace/Delete 触发 canDeleteNode(ctx, node) { return true; }, canDropToNode: (ctx, params) canContainNode(params.dragNodeType!, params.dropNodeType!), }其中canDropToNode的实现 canContainNode 约束了哪些节点类型可以拖入循环等子画布。引擎开关{ nodeEngine: { enable: true }, // 节点/表单引擎 variableEngine: { enable: true }, // 变量引擎 history: { enable: true, enableChangeNode: true, // 监听表单数据变化以纳入撤销/重做 }, }渲染与交互{ // 节点渲染物料默认渲染器 按类型覆盖 materials: { renderDefaultNode: BaseNode, renderNodes: { [WorkflowNodeType.Comment]: CommentRender }, }, // 运行中线条动画由 RuntimeService 判断该线条是否处于流动状态 isFlowingLine: (ctx, line) ctx.get(WorkflowRuntimeService).isFlowingLine(line), // 线条配色hidden/default/drawing/hovered/selected/error/flowing 七态走 CSS 变量 lineColor: { default: var(--g-workflow-line-color-default,#4d53e8), /* ... */ }, }生命周期与持久化{ // 内容变化1s 防抖的自动保存示例同时序列化 document 与全局变量 onContentChange: debounce((ctx, event) { if (ctx.document.disposed) return; console.log(Auto Save: , event, { ...ctx.document.toJSON(), globalVariable: ctx.get(GetGlobalVariableSchema)(GetGlobalVariableSchema)(), }); }, 1000), onInit(ctx) {}, onAllLayersRendered(ctx) { ctx.tools.fitView(false); }, // 首屏适配视口 onDispose() {}, }此外还有getNodeDefaultRegistry提供默认注册表并与nodeRegistries合并、fromNodeJSON/toNodeJSON节点 JSON 序列化转换分别由ctx.document.fromJSON/toJSON调用、shortcuts快捷键系统与onBindInversify 服务绑定onBind: ({ bind }) { bind(CustomService).toSelf().inSingletonScope(); bind(ValidateService).toSelf().inSingletonScope(); },i18n 配置则通过i18n: { locale: navigator.language, languages: { zh-CN: {...}, en-US: {} } }注入多语言文案。节点注册WorkflowNodeType 与 FlowNodeRegistrydemo 支持的节点类型定义在 nodes 目录 中覆盖start、end、llm、http、code、variable、condition、loop、block-start、block-end、comment、continue、break等类型。每个节点目录包含注册文件index.ts与表单元数据form-meta.ts所有注册表汇总导出为nodeRegistries后传给编辑器。以 Start 节点为例注册表声明了它的元信息、展示信息与行为约束export const StartNodeRegistry: FlowNodeRegistry { type: WorkflowNodeType.Start, meta: { isStart: true, deleteDisable: true, // 不可删除 copyDisable: true, // 不可复制 nodePanelVisible: false, // 不出现在加节点面板 defaultPorts: [{ type: output }], size: { width: 360, height: 211 }, }, info: { icon: iconStart, description: ... }, formMeta, // 表单配置 canAdd() { return false; } // 禁止添加第二个开始节点 };这种注册表即声明的模式意味着新增一种节点只需实现一个FlowNodeRegistry并加入数组无需改动编辑器核心代码。插件体系能力模块化demo 通过plugins: () [...]装配了十余个插件每个能力都是独立包对应 packages/plugins 目录插件包职责createFreeLinesPluginfree-lines-plugin连线渲染与交互支持renderInsideLine在连线上挂载加号按钮createMinimapPluginminimap-plugin缩略图导航可配置画布/视口/节点颜色尺寸createFreeSnapPluginfree-snap-plugin自动对齐与辅助线edgeColor/alignColor/线宽等createFreeNodePanelPluginfree-node-panel-plugin拖拽加节点面板createContainerNodePluginfree-container-plugin循环等容器节点的子画布渲染createFreeGroupPluginfree-group-plugin节点分组createFreeStackPluginfree-stack-plugin自定义节点堆叠排序示例中让 comment 节点始终位于底层createDownloadPluginexport-plugin画布导出/下载createContextMenuPlugindemo 内 plugins 目录右键菜单createRuntimePlugintest-run-plugin工作流试跑运行时createVariablePanelPlugindemo 内 variable-panel-plugin全局变量管理面板createPanelManagerPluginpanel-manager-plugin停靠面板管理其中运行时插件值得单独说明use-editor-props.tsx 中保留了两种模式的注释示例createRuntimePlugin({ mode: browser, // browser mode is for demo only! // mode: server, // serverConfig: { // domain: localhost, // port: 4000, // protocol: http, // }, }),源码注释明确提示browser 模式仅用于 demo生产环境应部署服务端运行时。服务端运行时的实现位于 packages/runtime/nodejs含api、config、server子目录运行时核心与接口则分别位于 packages/runtime/js-core 与 packages/runtime/interface。快捷键与目录组织demo 的 shortcuts 目录 将快捷键模块化copy、paste、delete、select-all为基本操作zoom-in、zoom-out、collapse、expand为视图操作每个快捷键独立成目录实现统一通过FreeLayoutProps.shortcuts传入。完整的目录结构components / nodes / plugins / services / typings / utils 的分工在 demo README 的 Directory Structure 章节 有逐行注释建议作为二次开发时的参照。仓库结构、文档与支持仓库采用 Rush monoreporush.json顶层分为四块apps/CLI 工具apps/cli提供create-app、find-materials、update-version等命令、各 demo 应用free/fixed layout、Next.js、Vite、Playground 等与文档站点apps/docs基于 Rspress源码在 apps/docs/src/zh 与 apps/docs/src/en含 100 篇 MDX 文档packages/按引擎域组织的核心包——canvas-engine画布引擎、client编辑器 React 封装、node-engine表单、variable-engine变量、runtime运行时、materials物料、plugins插件、commoncommand/history/i18n/reactive/utils 等基础库e2e/Playwright 端到端测试覆盖 free/fixed 两种布局的布局、节点、连线、变量、试跑等场景见 e2e/free-layout 与 e2e/fixed-layoutcommon/与config/Rush 配置、git hooks 与共享的 ESLint/TS 配置config/eslint-config、config/ts-config。README 提到的官方文档站点将内容分为快速入门、画布自由/固定、表单、变量、物料、运行时、进阶指南、API 参考等章节这些文档的源文件即位于apps/docs/src下可以在仓库内直接检索阅读。生态与采用情况README 列出了三个采用 FlowGram 的开源项目可作为该框架在真实产品中的参考Coze Studio一体化 AI Agent 开发工具提供大模型与工具接入、多种开发模式覆盖从开发到部署的全流程NNDeploy基于工作流的多平台 AI 部署工具Certimate开源 SSL 证书管理工具通过可视化工作流自动申请与部署证书也是 Lets Encrypt 官方文档列出的 ACME 客户端选项之一。支持渠道方面README 指引通过仓库 Issues 反馈问题或加入 FlowGram 用户群交流。贡献流程可参考仓库根目录的 CONTRIBUTING.md。小结FlowGram 的价值主张可以概括为三层一是框架而非平台的定位让团队拥有画布、表单、变量、物料的完整装配权二是插件化与注册表化的架构节点、插件、快捷键、业务规则钩子均以声明式配置注入三是开箱即用的 demo 工程体系从npx flowgram.ai/create-applatest一行命令到可运行的工作流编辑器只需几分钟。对希望自建 AI 工作流平台的团队建议的路径是先用 free layout demo 跑通快速上手再沿 use-editor-props.tsx 逐项理解FreeLayoutProps的每个配置项最后按nodes/plugins目录的结构扩展自己的节点与运行时。赞分享前端低代码工作流自动化流程编排【免费下载链接】flowgram.aiFlowGram is an extensible workflow development framework with built-in canvas, form, variable, and materials that helps developers build AI workflow platforms faster and simpler.项目地址https://gitcode.com/gh_mirrors/fl/flowgram.ai点击查看免费下载相关推荐Spring Boot 1.x到2.x迁移实战基于thinking-in-spring-boot-samples的最佳实践Spring Boot 1.x到2.x迁移实战基于thinking in spring boot samples的最佳实践 Spring Boot框架的版本升Warm-Flow工作流引擎快速上手指南Warm Flow工作流引擎快速上手指南 Warm Flow是一款基于Java开发的国产轻量级工作流引擎采用Apache 2.0开源协议。这款引擎的核心设计理工作流自动化5分钟快速上手轻量级Java工作流引擎Snaker完全指南5分钟快速上手轻量级Java工作流引擎Snaker完全指南 Snaker是一个基于Java的轻量级工作流引擎适用于企业应用中常见的业务流程。作为一款简单、轻后端上一篇OpCore-Simplify终极指南从8小时到15分钟快速创建完美OpenCore EFI配置下一篇猫抓插件实战指南浏览器资源嗅探的完整解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考