前端低代码工作流自动化流程编排【免费下载链接】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 的中文说明文档为核心结合开源仓库中的 monorepo 结构、create-app 脚手架源码与示例工程代码系统讲解 FlowGram 的定位与四大核心能力自由布局画布、固定布局画布、表单引擎、变量引擎、从npx flowgram.ai/create-app到本地运行的完整上手流程以及将自由布局编辑器集成进自有 React 项目的典型代码范式读完即可在本地跑通官方 Demo 并理解各功能包之间的调用关系。一、FlowGram 是什么框架而非现成平台FlowGram 是一个可组合、可视化、易于集成且可扩展的工作流开发框架与工具集目标是帮助开发者以更快、更简单的方式搭建 AI 工作流平台。它内置了开箱即用的工作流开发能力可视化流程画布自由布局 固定布局两种形态节点配置表单引擎变量作用域链开箱即用的物料LLM、条件、代码编辑器等。需要特别强调官方文档的定位表述FlowGram 并非一个现成的工作流平台而是帮助你构建平台的框架与工具。这一区别直接体现在仓库的组织方式上——仓库rush.json中以 Rush monorepo 管理了约 70 个项目按职责划分为引擎层packages/canvas-engine、packages/node-engine、packages/variable-engine、packages/runtime、客户端编辑器packages/client、插件packages/plugins含 30 余个独立插件包、物料packages/materials以及多个可独立运行的示例应用apps/demo-*。用户既可以整体使用示例工程也可以按需取用其中任意一层。二、快速上手从一条命令到本地运行官方文档给出的最短上手路径是三步1. 创建一个新的 FlowGram 项目npx flowgram.ai/create-applatest官方推荐选择Free Layout Demo模板。2. 启动项目cd demo-free-layout npm install npm start3. 在浏览器中打开http://localhost:3000。模板选项与 create-app 的底层实现上述命令背后的实现位于 apps/create-app/src/index.ts。从源码看交互式界面提供的 7 个模板选择为交互选项名对应模板包Fixed Layout Demodemo-fixed-layoutFree Layout Demodemo-free-layoutFixed Layout Demo Simpledemo-fixed-layout-simpleFree Layout Demo Simpledemo-free-layout-simpleFree Layout Nextjs Demodemo-nextjsFree Layout Vite Demo Simpledemo-viteDemo Playground for infinite canvasdemo-playground除了交互式选择create-app还支持直接传参创建源码中合法参数为fixed-layout、free-layout、fixed-layout-simple、free-layout-simple、playground、nextjs会自动拼接为demo-参数名文件夹名。其工作流可以归纳为通过npm view查询对应 demo 包的 latest 版本号从 npm registry 下载flowgram.ai/模板名的 tarball 并解压到当前目录将解压目录重命名为模板名并批量把package.json中所有flowgram.ai前缀的依赖版本对齐为flowgram.ai/core的最新版本保证整套包版本一致。因此模板工程并非从 Git 仓库克隆而是以 npm 包分发的形式落地这也解释了为什么每个 demo 包都带有files字段如 apps/demo-free-layout/package.json 中声明发布src/、rsbuild.config.ts、index.html等文件。运行脚本与依赖结构以官方推荐的 demo-free-layout 为例npm start实际执行的是cross-env NODE_ENVdevelopment rsbuild dev --open即基于 Rsbuild 的开发服务器。其依赖清单本身就是一份自由布局编辑器所需插件的完整清单{ dependencies: { flowgram.ai/free-layout-editor: workspace:*, flowgram.ai/free-snap-plugin: workspace:*, flowgram.ai/free-lines-plugin: workspace:*, flowgram.ai/free-node-panel-plugin: workspace:*, flowgram.ai/minimap-plugin: workspace:*, flowgram.ai/export-plugin: workspace:*, flowgram.ai/free-container-plugin: workspace:*, flowgram.ai/free-group-plugin: workspace:*, flowgram.ai/form-materials: workspace:*, flowgram.ai/panel-manager-plugin: workspace:*, flowgram.ai/free-stack-plugin: workspace:*, flowgram.ai/runtime-js: workspace:* } }monorepo 内以workspace:*协议引用脚手架生成的模板工程中会被替换为具体版本号。可以看到自由布局编辑器由核心编辑器包 若干能力插件组合而成连线lines、吸附snap、节点面板node-panel、小地图minimap、分组group、容器container、导出export、面板管理panel-manager等能力均以独立插件包形式提供这正是可组合定位的具体体现。参与源码开发的运行环境要求若需要直接基于本仓库开发rush.json 声明了官方工具链约束Rush 版本5.150.0包管理器为pnpm10.6.5Rush 会安装隔离的本地副本Node.js 支持版本范围18.20.3 19.0.0 || 20.14.0 23.0.0。仓库还配套了 git hookscommon/git-hooks与自动安装脚本common/scripts/install-run-rush.js、install-run-rushx.js用于在提交前执行 lint 与依赖一致性检查。三、官方 Demo 演示的工作流全貌README 中描述的演示案例是一条典型的 AI 工作流遍历一组城市通过 HTTP 获取实时天气用 Code 节点解析温度借助 LLM 生成穿搭建议经由 Condition 进行筛选在循环中汇总结果最后使用 Advisor LLM 选出最舒适的城市并将结果发送至 End 节点。这条流程与 Demo 工程注册的节点类型一一对应。apps/demo-free-layout/src/nodes/index.ts 中注册了 15 类节点export const nodeRegistries: FlowNodeRegistry[] [ ConditionNodeRegistry, StartNodeRegistry, EndNodeRegistry, LLMNodeRegistry, LoopNodeRegistry, CommentNodeRegistry, BlockStartNodeRegistry, BlockEndNodeRegistry, HTTPNodeRegistry, CodeNodeRegistry, ContinueNodeRegistry, BreakNodeRegistry, VariableNodeRegistry, GroupNodeRegistry, MultiConditionNodeRegistry, ];演示提到的循环中汇总对应LoopNodeRegistry配合ContinueNodeRegistry/BreakNodeRegistryHTTP 获取天气对应HTTPNodeRegistry解析温度对应CodeNodeRegistry生成穿搭建议 / Advisor LLM对应LLMNodeRegistryCondition 筛选对应ConditionNodeRegistry/MultiConditionNodeRegistry起始与收尾则是StartNodeRegistry/EndNodeRegistry。节点注册表FlowNodeRegistry[]是把业务节点接入画布的统一入口下一节会展示它在编辑器中的用法。四、四大核心能力官方文档将特性归纳为表格形式这里逐条展开并映射到仓库中对应的实现包。4.1 Free Layout Canvas自由布局画布自由布局画布中节点可任意摆放并可在节点间创建边进行链接适合无固定流程拓扑的图编辑场景。实现上由 packages/canvas-engine 提供地基coreflowgram.ai/core画布核心documentflowgram.ai/document节点/边/画布的文档模型rendererflowgram.ai/renderer渲染层free-layout-coreflowgram.ai/free-layout-core自由布局专有逻辑客户端封装packages/client/free-layout-editorflowgram.ai/free-layout-editor。从 packages/client/free-layout-editor/src/index.ts 的导出结构看该包对外聚合了核心模块flowgram.ai/editor、自由布局核心free-layout-core、预设preset、Hooks、工具函数并直接再导出free-history-plugin历史/撤销能力即一个包拿到可用的自由布局编辑器export * from flowgram.ai/editor; export * from flowgram.ai/free-layout-core; export * from ./components; export * from ./preset; export * from ./hooks; export * from ./tools; export * from flowgram.ai/free-history-plugin;4.2 Fixed Layout Canvas固定布局画布固定布局画布中节点可拖拽至指定位置并支持复合节点如分支与循环适合流程结构相对规整、需要层级化表达的业务流程。对应实现包为packages/canvas-engine/fixed-layout-core与packages/client/fixed-layout-editor另有fixed-drag-plugin固定布局拖拽、fixed-history-plugin固定布局历史、fixed-semi-materials基于 Semi 设计的固定布局物料等配套包。4.3 Form表单引擎表单引擎负责管理节点数据的增删改查并提供渲染、验证、副作用、联动和错误捕获等能力从而简化节点配置界面的开发。仓库中对应packages/node-engine下的form-coreflowgram.ai/form-core表单核心与formflowgram.ai/form物料侧则提供packages/materials/form-materials、form-antd-materials等表单物料包。仓库中专有apps/demo-node-form示例工程专门演示节点表单这一场景表单元数据驱动的写法可参考该工程的form-meta.tsx与node-registries.tsx见 apps/demo-node-form/src。4.4 Variable变量引擎变量引擎支持作用域约束、变量结构检查和类型推断用于管理工作流中的数据流。实现位于packages/variable-enginevariable-coreflowgram.ai/variable-core变量模型与作用域链核心variable-layoutflowgram.ai/variable-layout变量选择器相关的布局能力json-schemaflowgram.ai/json-schema基于 JSON Schema 的结构描述。配合插件packages/plugins/node-variable-plugin、packages/plugins/variable-plugin以及物料packages/materials/type-editor类型编辑器即可在节点表单中引用上游节点输出的变量并获得类型约束——这是 AI 工作流中数据沿边流动体验的关键一环。五、编辑器集成范式自由布局 Demo 的编辑器写法官方 Demo 的编辑器入口非常短小是理解 FlowGram 集成方式的最好样本。apps/demo-free-layout/src/editor.tsx 全文核心如下import { DockedPanelLayer } from flowgram.ai/panel-manager-plugin; import { EditorRenderer, FreeLayoutEditorProvider } from flowgram.ai/free-layout-editor; import flowgram.ai/free-layout-editor/index.css; import { nodeRegistries } from ./nodes; import { initialData } from ./initial-data; import { useEditorProps } from ./hooks; export 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 ); };其中三个关键构件FreeLayoutEditorProvider自由布局编辑器的 Provider承载画布上下文、节点注册表与初始数据其内部通过free-layout-preset预置默认插件集preset 目录见 packages/client/free-layout-editor/src/preset组件实现位于 packages/client/free-layout-editor/src/components。EditorRenderer真正渲染画布的组件DockedPanelLayer来自flowgram.ai/panel-manager-plugin负责节点配置面板等浮层的停靠管理。useEditorProps(initialData, nodeRegistries)这一 Hook位于apps/demo-free-layout/src/hooks把初始画布数据initial-data.ts与节点注册表上一节列出的 15 类节点组装成 Provider 所需 props。换言之集成 FlowGram 自由布局编辑器的标准动作就是注册节点 → 准备初始数据 → 用 Provider 包裹 Renderer。固定布局侧flowgram.ai/fixed-layout-editor遵循同样的 Provider/Renderer 模式差异在于布局模型与复合节点能力。六、仓库工程全景monorepo 结构与配套工具围绕 README 描述的能力仓库按如下层次组织均出自 rush.json 的项目清单分层目录代表包画布引擎packages/canvas-enginecore、document、renderer、free-layout-core、fixed-layout-core节点引擎packages/node-enginenode、form-core、form变量引擎packages/variable-enginevariable-core、variable-layout、json-schema运行时packages/runtimeruntime-interface、runtime-js、runtime-nodejs客户端编辑器packages/clienteditor、free-layout-editor、fixed-layout-editor、playground-react插件packages/pluginsfree-lines-plugin、free-snap-plugin、free-group-plugin、minimap-plugin、export-plugin、shortcuts-plugin、test-run-plugin等 30 余个物料packages/materialsform-materials、form-antd-materials、fixed-semi-materials、type-editor、coze-editor通用基础packages/commonutils、reactive、command、history、history-storage、i18n示例应用apps/demo-*9 个 demofree/fixed 布局、node-form、materials、nextjs、nextjs-antd、react-16、vite、playgroundE2E 测试e2ee2e/fixed-layoutdrag、drawer、layout、node、testrun、validate、variable 等 Playwright 用例、e2e/free-layout值得注意的两点工程事实运行时独立成层packages/runtime同时提供浏览器端runtime-js与 Node.js 端runtime-nodejs运行时并通过runtime-interface定义契约说明工作流执行能力与画布编辑能力是解耦的——画布产出的是可序列化的工作流数据执行交给运行时。CLI 工具链除create-app外仓库还提供flowgram.ai/cliapps/cli/src/index.ts内置四个子命令create-app创建项目、materials同步物料到项目支持--refresh-project-imports、--target-material-root-dir、--select-multiple选项、find-used-materials查找项目中已使用的物料、update-version批量更新项目中的 flowgram 版本。这套工具面向从官方物料库按需取材的开发模式。七、文档体系与多语言支持本仓库自带完整文档站点工程 apps/docs基于 Rspress 构建内容分中文apps/docs/src/zh135 篇 MDX与英文apps/docs/src/en两套覆盖与 README 章节清单一致的十大板块快速入门自由画布固定画布表单变量素材materials运行时进阶指南API 参考获取支持与贡献指南文档中的代码示例还通过 apps/docs/components/tsx-editor.tsx 等组件做了交互式处理并在apps/docs/scripts/auto-generate.ts中支持示例代码的自动生成。八、生态采用与参与方式README 列出了采用 FlowGram 的开源项目可作为集成参考Coze Studio一体化 AI Agent 开发工具NNDeploy基于工作流的多平台 AI 部署工具Certimate借助可视化工作流自动申请与部署 SSL 证书的开源工具。参与渠道方面问题反馈走仓库 Issues贡献流程可参考仓库根目录的 CONTRIBUTING.md开发约束见 AGENTS.md 与 CLAUDE.md文档的多语言版本英文、西班牙文、俄文、葡萄牙文、德文、日文分别位于 README.md、README_ES.md、README_RU.md、README_PT.md、README_DE.md、README_JA.md。小结FlowGram.AI 的价值在于把AI 工作流平台拆解为可独立取用的四层能力——画布引擎、表单引擎、变量引擎与运行时——并以 30 余个插件包和 9 个可运行的 demo 工程证明其组合方式。上手路径始终是一条命令npx flowgram.ai/create-applatest加三步运行深入路径则是沿着 demo-free-layout 的Provider → Renderer → DockedPanelLayer集成范式逐包阅读packages/canvas-engine、packages/node-engine、packages/variable-engine与packages/runtime的源码最终把这套框架组装进自己的平台。赞分享前端低代码工作流自动化流程编排【免费下载链接】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 的官方 README README_ES.md ht前端低代码工作流自动化流程编排FlowGram用于构建 AI 工作流平台的工作流开发框架FlowGram用于构建 AI 工作流平台的工作流开发框架 FlowGram 是一个可组合、可视化、易于集成且可扩展的工作流开发框架与工具集目标是帮助开发者前端低代码工作流自动化流程编排mediasoup-client 数据通道实战produceData 与 consumeData 实现实时消息传输mediasoup client 数据通道实战produceData 与 consumeData 实现实时消息传输 在 WebRTC 应用中除了音视频流实上一篇Yandex Music App 开源项目教程下一篇Ninja性能优化秘籍10个技巧让你的Web应用飞起来 创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考