FlowGram 工作流开发框架实战：脚手架初始化、双画布架构与画布/表单/变量/运行时四大引擎解析

前端低代码工作流自动化流程编排【免费下载链接】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 官方 README多语言版本之一 README_DE.md其余语言版本见 README.md、README_ZH.md 等为主线带你完整走通 FlowGram 工作流开发框架的快速上手路径用一条npx命令从 npm 模板创建可运行的 Demo 工程理解 Free Layout / Fixed Layout 双画布体系并深入仓库源码弄清创建器 CLI 的下载-改写-提交流程、各引擎对应的 monorepo 包结构以及 Demo 工程中编辑器的装配方式。读完后你将具备独立创建、运行并二次开发 FlowGram 工作流应用的完整能力。一、FlowGram 是什么框架与工具集而非成品平台README 对 FlowGram 的定位非常明确FlowGram 是一个可组合composable、可视化visual、易集成easy-to-integrate、可扩展extensible的工作流开发框架与工具集framework toolkit目标是帮助开发者更快、更简单地构建 AI 工作流平台。关键边界在于 README 的这句强调它不是一个现成的工作流平台Its not a ready-made workflow platform而是构建你自己的工作流平台的框架与工具集。FlowGram 随框架内置了一整套工作流开发工具可视化 Flow 画布Flow Canvas工作流的可视化编辑界面节点配置表单Node Configuration Form节点内部数据的配置与校验变量作用域链Variable Scope Chain管理工作流中的数据流与作用域开箱即用的材料MaterialsLLM 节点、条件Condition节点、代码编辑器Code Editor等。这一框架 工具集的定位在仓库的 monorepo 组织中也得到了印证生产级库集中在packages/*画布引擎、节点引擎、运行时、插件示例应用与文档在apps/*共享工具与配置在common/和config/端到端 Playwright 测试独立于e2e/scenario——这一点在 AGENTS.md 的仓库规范中有明确说明。二、官方 Demo 场景一个贯穿四大引擎的 AI 工作流README 的 Demo 章节描述了一个非常典型的 AI 工作流场景它几乎用到了 FlowGram 的所有核心能力非常适合作为理解框架全貌的切入点遍历一个城市列表Loop 循环节点通过HTTP 请求获取实时天气数据用Code 节点解析温度用LLM 节点生成穿衣建议用条件Condition节点做分支控制在循环中聚合各轮结果最后由一个Advisor LLM从候选中挑出最舒适的城市把结果发给End 结束节点。README 还提示该 Demo 可以在 CodeSandbox 或 StackBlitz 上直接打开在线运行对应flowgram-demo仓库。这个场景在本地对应仓库内的demo-free-layout示例工程其节点体系也确实在 apps/demo-free-layout/README.md 中逐一列出start、end、llm、http、code、variable、condition、loop、block-start/block-end、comment、continue、break共 12 类工作流节点。三、功能矩阵README 中的四大核心能力README 的功能表Features概括了 FlowGram 的四大能力下文每一节都会结合仓库源码展开功能说明继承自 READMEFree Layout Canvas 自由布局画布节点可在画布任意位置摆放使用自由形式连线free-form lines连接Fixed Layout Canvas 固定布局画布节点可拖入指定位置支持分支、循环等复合节点compound nodesForm 表单引擎管理节点数据的 CRUD 操作提供渲染、校验、副作用、联动、错误捕获能力简化节点配置开发Variable 变量引擎支持作用域约束scope constraints、变量结构检视structure inspection与类型推断type inference让工作流中的数据流易于管理3.1 Free Layout 与 Fixed Layout 对应哪些包从源码结构看两种画布各有独立的核心包与编辑器封装Free Layout核心逻辑在 packages/canvas-engine/free-layout-core对外编辑器封装为flowgram.ai/free-layout-editorpackages/client/free-layout-editorFixed Layout核心逻辑在 packages/canvas-engine/fixed-layout-core对外编辑器封装为flowgram.ai/fixed-layout-editorpackages/client/fixed-layout-editor。两者的差异与 README 描述一致Free Layout 面向任意摆放 自由连线的自由编辑体验配套插件如自由连线渲染、吸附对齐、节点面板等Fixed Layout 面向节点拖入固定槽位的强结构场景配套复合节点分支/循环的拖拽编排能力。底层共享的画布基座则由 packages/canvas-engine/core、packages/canvas-engine/document文档模型与 packages/canvas-engine/renderer渲染层提供。3.2 Form 引擎与 Variable 引擎表单引擎位于 packages/node-engine/form-core 与 packages/node-engine/form。README 强调它统一管理节点数据的 CRUD 操作并提供渲染、校验、副作用side effects、字段联动linkage与错误捕获这意味着业务方只需声明节点的数据 schema 与表单元信息即可自动生成节点配置界面。配套表单材料输入控件等在 packages/materials/form-materials另有 Semi/AntD 两套 UI 主题材料packages/materials/fixed-semi-materials、packages/materials/form-antd-materials。变量引擎位于 packages/variable-engine/variable-core作用域链与类型推断核心、packages/variable-engine/variable-layout变量表达式布局/编辑与 packages/variable-engine/json-schemaJSON Schema 类型系统。README 概括的三个关键点——作用域约束、变量结构检视、类型推断——分别对应这三个包的职责划分。3.3 运行时RuntimeREADME 文档章节中还列有 Runtime运行时板块。仓库中对应 packages/runtime/interface运行时接口定义、packages/runtime/js-coreJS 运行时核心Demo 中通过flowgram.ai/runtime-js引入与 packages/runtime/nodejsNode.js 运行时。从 Demo 的插件配置看见 apps/demo-free-layout/README.md运行时插件支持两种模式createRuntimePlugin({ mode: browser, // 浏览器模式工作流在浏览器内执行 // mode: server, // 服务器模式通过 serverConfig 指定 domain/port/protocol // serverConfig: { domain: localhost, port: 4000, protocol: http }, })即工作流既可以在浏览器内实时试跑适合 Demo 与调试也可以委托给后端服务执行适合生产环境。四、快速上手从一条 npx 命令到本地运行4.1 README 原始三步流程README 的 Quick Start 给出了完整流程三步即可跑起来第 1 步创建新的 FlowGram 项目npx flowgram.ai/create-applatestREADME 官方推荐选择Free Layout Demo ⭐️模板。第 2 步启动项目cd demo-free-layout npm install npm start第 3 步在浏览器打开http://localhost:3000即可看到工作流编辑器端口 3000 由 Demo 工程的 rsbuild 开发服务提供npm start在 apps/demo-free-layout/package.json 中实际执行cross-env NODE_ENVdevelopment rsbuild dev --open会同时自动打开浏览器。4.2 创建器支持哪些模板命令行交互列表与参数映射的真实实现在 apps/cli/src/create-app/index.ts。交互式选择inquirer.prompt提供 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-前缀映射到目录名见 create-app/index.ts#L81-L96例如 README 的姊妹文档 apps/demo-free-layout/README.md 给出的非交互写法npx flowgram.ai/create-applatest free-layout合法参数为fixed-layout、free-layout、fixed-layout-simple、free-layout-simple、playground、nextjs传入其他值会打印Invalid projectName并退出。4.3 创建器背后的源码流程结合 apps/cli/src/create-app/index.ts 的实现npx flowgram.ai/create-applatest实际完成了四件事查询最新版本号通过npm view flowgram.ai/demo-fixed-layout version --taglatest获取最新发布的 Demo 包版本L54-L56。可以看到Demo 工程本身也是作为 npm 包如flowgram.ai/demo-free-layout发布到 npm 的下载并解包 npm tarball拼接https://registry.npmjs.org/flowgram.ai/模板/-/模板-版本.tgzL104-L115用https.get流式下载后以tar解包到当前目录并把解包出的package目录重命名为目标模板名如demo-free-layout统一升级 FlowGram 依赖版本读取生成项目的package.json把所有flowgram.ai/*前缀的依赖dependencies 与 devDependencies改写为flowgram.ai/core的 latest 版本L15-L21、L130-L147。这样即使模板包是旧版本发布的脚手架生成后拿到的也是一套版本对齐的最新 FlowGram 依赖打印启动指引成功后输出cd demo-free-layout/npm install/npm start提示L149-L154。因此Quick Start 中的npm install npm start之所以简单是因为脚手架已经把模板、依赖版本对齐都提前做掉了。4.4 运行 Demo 工程的技术栈以 README 推荐的demo-free-layout为例apps/demo-free-layout/package.json 与 其 README 说明了该工程的技术选型前端React 18 TypeScript构建工具为 Rsbuild基于 Rspack样式Less Styled Components CSS 变量UI 库Semi Designdouyinfe/semi-ui依赖注入InversifyFlowGram 的插件/服务体系基于 DI核心依赖flowgram.ai/free-layout-editor加上一组插件包——free-snap-plugin自动对齐与参考线、free-lines-plugin连线渲染、free-node-panel-plugin节点添加面板、minimap-plugin小地图、export-plugin导出、free-container-plugin子画布、free-group-plugin分组、panel-manager-plugin侧边面板管理、free-stack-plugin以及form-materials、runtime-interface、runtime-js。这个依赖列表本身就是理解 FlowGram 插件化架构的最好样本编辑器核心 一组可插拔插件每个功能连线、对齐、小地图、分组……都是独立包按需装配。五、Demo 工程内部结构编辑器如何装配demo-free-layout的入口链路非常清晰值得作为二次开发的参照应用入口apps/demo-free-layout/src/app.tsx创建 React Root并通过unstableSetCreateRoot(createRoot)为 form-materials 注入 createRootReact 18/19 的 polyfill随后渲染Editor /。编辑器装配apps/demo-free-layout/src/editor.tsxexport const Editor () { const editorProps useEditorProps(initialData, nodeRegistries); return ( div classNamedoc-free-feature-overview FreeLayoutEditorProvider {...editorProps} div classNamedemo-container DockedPanelLayer EditorRenderer classNamedemo-editor / /DockedPanelLayer /div /FreeLayoutEditorProvider /div ); };这里体现了 FlowGram 编辑器的标准三层结构FreeLayoutEditorProvider接收FreeLayoutProps配置节点注册表、初始数据、业务规则回调、插件列表等初始化整个编辑器上下文DockedPanelLayer来自flowgram.ai/panel-manager-plugin停靠面板层承载变量面板、节点表单等侧边面板EditorRenderer渲染实际的画布。而useEditorProps(initialData, nodeRegistries)是编辑器配置中心详见 apps/demo-free-layout/README.md 的Editor Configuration System一节典型配置项包括{ background: true, // 背景网格 readonly: false, // 只读模式 initialData, // 初始画布数据FlowDocumentJSON nodeRegistries, // 节点注册表 playground: { preventGlobalGesture: true }, // 防止 Mac 浏览器手势干扰 nodeEngine: { enable: true }, variableEngine: { enable: true }, history: { enable: true, enableChangeNode: true }, // 撤销/重做 // 业务规则回调连线/删除/拖拽准入控制 canAddLine: (ctx, fromPort, toPort) { /* 连线规则 */ }, canDeleteLine: (ctx, line) { /* 删除连线规则 */ }, canDeleteNode: (ctx, node) { /* 删除节点规则 */ }, canDropToNode: (ctx, params) { /* 拖入节点规则 */ }, plugins: () [ /* 插件装配列表 */ ], onContentChange: debounce((ctx, event) { /* 自动保存 */ }, 1000), onInit: (ctx) { /* 初始化钩子 */ }, onAllLayersRendered: (ctx) { /* 渲染完成钩子 */ }, }注意四个can*回调——它们把工作流合法性约束哪里能连、哪里能删、哪里能拖从画布核心中解耦出来交给业务侧声明这正是 README 所说可扩展extensible的具体落点。节点注册表模式Node Registry PatternDemo 中每种节点都是一个FlowNodeRegistry例如 Start 节点的注册声明了metaisStart、deleteDisable、copyDisable、nodePanelVisible、defaultPorts、size、info图标与描述、formMeta表单配置以及canAdd()约束不允许多个开始节点。新增一种工作流节点时只需按此模式新增一个注册项无需改动核心代码。六、仓库架构总览Rush monorepo 下的包分类README 把 FlowGram 描述为可组合的框架这种可组合性直接体现在仓库的包组织上。仓库是一个由 Rush 管理的 monoreporush.jsonRush 5.150.0、pnpm 10.6.5Node 支持范围18.20.3 19.0.0 || 20.14.0 23.0.0AGENTS.md 给出的开发命令规范如下rush install安装依赖rush build编译全部注册工程rush dev:docs/rush dev:demo-free-layout热更新文档与 Demorush lint/rush lint:fix/rush ts-check统一 Lint 与 TS 诊断rush test聚合单测Vitestrush e2e:test运行 Playwright 端到端套件rush e2e:update-screenshot刷新截图快照。各层包与 README 四大能力的对应关系分层代表性包对应 README 能力画布引擎packages/canvas-engine/*core、document、renderer、free-layout-core、fixed-layout-coreFree/Fixed Layout Canvas节点引擎packages/node-engine/*form-core、form、nodeForm 表单引擎变量引擎packages/variable-engine/*variable-core、variable-layout、json-schemaVariable 变量引擎运行时packages/runtime/*interface、js-core、nodejsRuntime 运行时编辑器封装packages/client/*editor、free-layout-editor、fixed-layout-editor、playground-react开箱即用的编辑器材料packages/materials/*form-materials、fixed-semi-materials、form-antd-materials、type-editor、coze-editor开箱即用的 Materials插件packages/plugins/*26 个插件free-lines-plugin、free-snap-plugin、free-container-plugin、free-group-plugin、minimap-plugin、export-plugin、panel-manager-plugin、shortcuts-plugin、i18n-plugin、test-run-plugin等可组合的插件体系通用库packages/common/*utils、command、history、history-storage、i18n、reactive底层基础设施示例与文档apps/*demo-free-layout、demo-fixed-layout、demo-nextjs、demo-vite、demo-playground、docs等Quick Start 模板来源端到端测试e2e/*e2e/free-layout、e2e/fixed-layout关键工作流的回归保障其中e2e/fixed-layout的 Playwright 用例覆盖了拖拽drag、抽屉drawer、布局layout、节点node、试运行testrun、校验validate、变量variable等场景见 e2e/fixed-layout 下的*.spec.ts可以视为官方对画布 表单 变量 运行时四大能力组合行为的自动化验证。七、文档导航README 列出的官方文档板块README 的 Documentation 章节指出完整文档发布于 FlowGram 官方网站并划分为如下板块仓库中文档源码位于 apps/docssrc/zh与src/en分别存放中英文 mdx 页面Quick Start 快速上手框架引入与最小编辑器Canvas 画布Free/Fixed Layout 画布加载与操作Form 表单节点表单引擎开发Variable 变量变量引擎与数据流管理Material 材料材料体系介绍仓库中 apps/docs/components/form-materials 下有大量表单材料演示页Runtime 运行时浏览器/服务端运行模式Advanced Guides 进阶指南如缩放滚动等高级能力API Reference完整 API 参考Where to get Support 支持渠道与Contributing Guide 贡献指南。八、社区采用与联系渠道README 的 Adoption采用情况章节列出了三个基于 FlowGram 构建的知名项目Coze Studio一站式 AI 智能体开发工具提供最新大模型与工具、多种开发模式与框架覆盖从开发到部署的完整智能体开发环境NNDeploy基于工作流的多平台 AI 部署工具Certimate开源 SSL 证书管理工具通过可视化工作流自动申请与部署 SSL 证书是 Lets Encrypt 官方文档中列出的 ACME 客户端选项之一。联系与支持渠道READMEContact us章节仓库的 Issues 页面以及通过扫描 apps/docs/src/public/lark-group.png 二维码加入的飞书用户群。九、小结与深入路径回到 README 的核心信息FlowGram 提供的不是成品平台而是一套**双画布 表单引擎 变量引擎 运行时 材料/插件**的可组合工作流开发框架。上手路径非常短——npx flowgram.ai/create-applatest选择模板npm install npm start访问localhost:3000即可而其可扩展性则落在三个可操作面上插件装配面通过FreeLayoutProps.plugins装配/替换 packages/plugins 下的功能插件节点注册面通过nodeRegistries声明式新增节点类型meta/info/formMeta/canAdd业务规则面通过canAddLine、canDeleteNode、canDropToNode等回调约束工作流合法性。若想继续深入建议按此顺序阅读仓库apps/cli/src/create-app/index.ts脚手架→ apps/demo-free-layout/src/editor.tsx 与 apps/demo-free-layout/README.md编辑器装配与目录结构→ packages/canvas-engine/free-layout-core、packages/node-engine/form-core、packages/variable-engine/variable-core三大引擎核心→ e2e/free-layout端到端行为验证。赞分享前端低代码工作流自动化流程编排【免费下载链接】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 工作流开发框架从快速上手到画布、表单、变量引擎全解析FlowGram.AI 工作流开发框架从快速上手到画布、表单、变量引擎全解析 FlowGram 是一个可组合、可视化、易于集成且可扩展的工作流开发框架与工具集前端低代码工作流自动化流程编排Joplin 插件开发脚手架 generator-joplin 实战指南从初始化、构建到发布Joplin 插件开发脚手架 generator joplin 实战指南从初始化、构建到发布 本指南以 Joplin 官方插件生成器 generator jo知识管理跨平台插件系统FlowGram AI 工作流框架工程指南:Rush Monorepo 构建体系、分层架构与开发工作流全解析FlowGram AI 工作流框架工程指南:Rush Monorepo 构建体系、分层架构与开发工作流全解析 本文基于 FlowGram AI 仓库根目录的 C前端低代码工作流自动化流程编排上一篇汉字数字化的秘密武器9000汉字数据如何改变你的学习体验下一篇NeoMutt中的S/MIME功能使用指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考