前端低代码工作流自动化流程编排【免费下载链接】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 的官方 READMEREADME_ES.md与英文版 README.md 内容对齐为主线完整梳理 FlowGram 的定位、快速启动方式、四大核心能力自由布局画布、固定布局画布、表单引擎、变量引擎以及配套的材料与运行时体系并结合仓库中的 CLI 实现、Free Layout Demo 源码和 packages 目录结构帮助读者掌握“从零创建一个可运行的 AI 工作流编辑器”的完整路径。FlowGram 是什么框架与工具集而非现成平台FlowGram 官方对自身的定义是一个可组合composable、视觉化visual、易集成easy-to-integrate、可扩展extensible的工作流开发框架与工具集目标是帮助开发者更快、更简单地构建 AI 工作流平台。这里有一个关键区分也是理解 FlowGram 设计哲学的前提FlowGram 不是一台“开箱即用”的工作流平台而是帮你搭建自己平台的框架和工具集。围绕这个目标FlowGram 内置了四件核心工具内置工具解决的问题对应仓库模块流程画布Flow Canvas节点、连线的可视化编辑packages/canvas-engine/core、document、fixed-layout-core、free-layout-core、renderer节点配置表单Node Form节点参数的 CRUD、校验、联动packages/node-engine/form-core、packages/materials/form-materials变量作用域链Variable Scope Chain数据在节点间流动的约束与推导packages/variable-engine/variable-core即用材料MaterialsLLM、条件、代码编辑器等现成节点packages/materials/这种“引擎 插件 材料”的分层使得下游可以在不修改内核的前提下按业务需要拼装出自己的工作流编辑器。官方 Demo 在演示什么README 中给出的示例工作流是一条完整的 AI 决策链路值得逐节点拆开理解它基本覆盖了 FlowGram 的全部核心能力迭代城市列表——用 Loop循环节点遍历一组城市HTTP 请求实时天气数据——HTTP 节点发起真实网络调用Code 节点解析温度数据——在浏览器中执行自定义代码逻辑LLM 节点生成穿衣建议——调用大模型生成结构化内容Condition 节点做条件门控——按条件分支决定是否继续跨循环聚合结果——变量引擎在循环作用域中累积数据顾问 LLM 节点在多个候选城市中挑选最舒适的一个最终把结果送进End 节点。这条链路同时用上了容器节点Loop、外部调用HTTP、代码执行Code、模型调用LLM、控制流Condition/Break/Continue和作用域变量是理解 FlowGram 能力边界的最佳样本。快速开始三步跑起 Free Layout DemoREADME 推荐的入门模板是Free Layout Demo完整命令如下# 1. 创建新项目交互式选择模板或直接传模板名 npx flowgram.ai/create-applatest# 2. 安装依赖并启动 cd demo-free-layout npm install npm start# 3. 浏览器打开 http://localhost:3000create-app 实际提供了哪些模板这个命令对应仓库中的 apps/cli/src/create-app/index.ts。从源码看它提供的模板列表比 README 提到的更多交互式选择时共有 7 个选项模板名生成的目录Fixed Layout Demodemo-fixed-layoutFree Layout DemoREADME 推荐 ⭐️demo-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也可以在命令行直接传模板名跳过交互例如npx flowgram.ai/create-applatest free-layout合法取值fixed-layout、free-layout、fixed-layout-simple、free-layout-simple、playground、nextjs。从 apps/cli/src/create-app/index.ts 的实现可以看到CLI 的工作流程是通过npm view flowgram.ai/demo-fixed-layout version --taglatest查询最新版本号从 npm registry 下载形如flowgram.ai/{模板名}/-/{模板名}-{版本}.tgz的 tarball 并解压到当前目录重命名为模板目录读取生成的package.json把其中所有flowgram.ai前缀的依赖版本统一改写为flowgram.ai/core的 latest 版本——这保证了脚手架与核心包版本始终对齐打印cd {目录} / npm install / npm start的后续指引。也就是说模板本身就是发布在 npm 上的包如flowgram.ai/demo-free-layoutcreate-app 本质是一个“下载 版本对齐”的脚手架。深入 Free Layout Demo 工程结构apps/demo-free-layout/ 是 README 推荐的“最佳实践”示例其 README 自称 Best-practice demo for free layout官方模板即来源于此。核心技术栈前端框架React 18 TypeScript构建工具Rsbuild基于 Rspack 的现代构建工具入口在 rsbuild.config.ts其中显式开启了decorators: { version: legacy }以支持 Inversify 的injectable()/inject装饰器UI 库Semi Designdouyinfe/semi-ui样式Less Styled Components CSS Variables依赖注入Inversify应用入口Provider Renderer 面板层整个编辑器的装配非常简洁见 apps/demo-free-layout/src/editor.tsxFreeLayoutEditorProvider {...editorProps} div classNamedemo-container DockedPanelLayer EditorRenderer classNamedemo-editor / /DockedPanelLayer /div /FreeLayoutEditorProvider三层结构各负其责FreeLayoutEditorProvider注入FreeLayoutProps初始数据、节点注册表、插件、事件回调等全部编辑器配置DockedPanelLayer来自flowgram.ai/panel-manager-plugin侧边栏/停靠面板的挂载层EditorRenderer真正的画布渲染器。而editorProps由 apps/demo-free-layout/src/hooks/use-editor-props.tsx 中的useEditorProps统一构建它是编辑器的“配置中心”包含基础开关background背景网格、readonly、initialDatainitial-data.ts 提供初始文档 JSON、nodeRegistries节点注册表引擎开关nodeEngine: { enable: true }、variableEngine: { enable: true }、history: { enable: true, enableChangeNode: true }节点增删改纳入撤销/重做业务规则钩子canAddLine连线合法性、canDeleteLine、canDeleteNode、canDropToNode拖拽入容器规则插件列表plugins: () [...]与生命周期事件onInit、onContentChange防抖 1 秒的自动保存、onAllLayersRendered。节点注册表14 种工作流节点apps/demo-free-layout/src/nodes/index.ts 集中导出了全部节点注册表export const nodeRegistries: FlowNodeRegistry[] [ ConditionNodeRegistry, // 条件节点 StartNodeRegistry, // 开始节点 EndNodeRegistry, // 结束节点 LLMNodeRegistry, // 大模型节点 LoopNodeRegistry, // 循环节点 CommentNodeRegistry, // 注释节点 BlockStartNodeRegistry, // 子画布开始 BlockEndNodeRegistry, // 子画布结束 HTTPNodeRegistry, // HTTP 请求 CodeNodeRegistry, // 代码执行 ContinueNodeRegistry, // continue BreakNodeRegistry, // break VariableNodeRegistry, // 变量节点 GroupNodeRegistry, // 分组 MultiConditionNodeRegistry, // 多条件 ];对应的WorkflowNodeType枚举见 nodes/constants.ts覆盖start / end / llm / http / code / variable / condition / loop / block-start / block-end / comment / continue / break等类型。每个节点遵循统一的注册模式例如开始节点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; }, // 全局只允许一个开始节点 };这种“注册表 元数据 表单元数据”的模式意味着新增一个业务节点不需要改动任何核心代码只需新增一个 Registry 并加入nodeRegistries数组。插件体系每个能力都是独立插件Demo 中启用的插件包括详见 plugins/createFreeLinesPlugin连线渲染与交互支持在连线上渲染加节点按钮createMinimapPlugin小地图导航createFreeSnapPlugin拖拽自动对齐与参考线createFreeNodePanelPlugin加节点面板createContainerNodePlugin容器节点Loop 等复合节点createFreeGroupPlugin节点分组createContextMenuPlugin右键菜单createRuntimePlugin工作流运行时支持mode: browser浏览器模式或mode: server服务端模式createVariablePanelPlugin变量管理面板。这些插件大多对应 packages/plugins/ 下的独立包如free-lines-plugin、minimap-plugin、free-snap-plugin等可按需裁剪。运行时浏览器与服务端两种执行模式工作流执行由 packages/runtime/ 支撑分为runtime-interface协议接口、runtime-js-coreJS 执行核心与runtime-nodejsNode 端运行时。Demo 的 runtime-plugin 支持createRuntimePlugin({ mode: browser, // 浏览器模式 // mode: server, // 服务端模式可配置 domain / port / protocol })配合 Demo 中完整的 testrun 组件状态栏、测试运行表单、JSON 输入可以实时运行和调试工作流。四大核心能力详解README 特性表逐条展开README 的特性表列出了四个核心特性下面逐条对应到仓库实现。1. 自由布局画布Free Layout Canvas节点可放置在画布任意位置用自由形态的连线连接这是 Coze 式“无限画布”体验。实现位于 packages/canvas-engine/free-layout-core底层依赖canvas-engine/core的 playground画布视口、坐标变换、手势与document文档模型。配套的交互能力由插件提供自由连线free-lines-plugin、吸附对齐free-snap-plugin、分组free-group-plugin、容器free-container-plugin、自动布局free-auto-layout-plugin、缩放手势free-stack-plugin。2. 固定布局画布Fixed Layout Canvas节点只能拖拽到规定位置并原生支持分支、循环等复合节点——更接近传统 BPMN/流程图式的自上而下编排。实现位于 packages/canvas-engine/fixed-layout-core示例工程为 apps/demo-fixed-layout/。它同样提供连线校验、历史、拖拽fixed-drag-plugin、历史fixed-history-plugin等配套插件。3. 表单引擎Form表单引擎负责节点数据的CRUD并提供渲染、校验、副作用、联动linkage、错误捕获能力把“节点配置面板”的开发从手工受控组件中解放出来。核心实现是 packages/node-engine/form-core 与 packages/node-engine/form即插即用的表单材料各类输入控件、类型编辑器在 packages/materials/form-materials还有独立的类型编辑器 packages/materials/type-editor 支持按 JSON Schema 生成配置界面。节点注册表中的formMeta字段就是表单引擎的入口。4. 变量引擎Variable变量引擎支持作用域约束、变量结构检查与类型推断管理数据在工作流中的流动。核心实现在 packages/variable-engine/variable-core从源码结构看包含scope、ast、services等模块即作用域解析 表达式 AST 服务层配套的变量布局渲染在variable-layoutJSON Schema 转换在json-schema。Demo 中的 Loop 节点“跨循环聚合结果”正是变量作用域机制的典型应用循环内部对累加器的写入在循环外部以受限方式可读。如何在仓库中继续深入官方文档站源码就在这个仓库里apps/docs/Rspress 构建含 apps/docs/src/en 与 apps/docs/src/zh 双语README 中给出的文档章节在仓库内均有对应目录可离线阅读快速开始、画布、表单、变量、材料、运行时、进阶指南、API 参考——对应apps/docs/src/zh/guide/、apps/docs/src/en/guide/、apps/docs/src/*/api、apps/docs/src/*/materials示例源码在apps/docs/examples/之外的独立 apps 中apps/demo-fixed-layout-simple/最简固定布局、apps/demo-free-layout-simple/最简自由布局、apps/demo-playground/无限画布 Playground、apps/demo-node-form/节点表单示例、apps/demo-react-16/React 16 兼容示例端到端测试在 e2e/Playwright例如 e2e/fixed-layout/tests/ 覆盖了拖拽、抽屉、布局、节点、试运行、校验、变量等场景贡献指南见 CONTRIBUTING.md 与 CLAUDE.md、AGENTS.md。如果需要直接获取源码可使用git clone https://gitcode.com/gh_mirrors/fl/flowgram.ai社区的采用情况README 列出了三个基于 FlowGram 的知名开源项目可作为真实场景参考Coze Studio一站式 AI Agent 开发工具提供多种开发模式与框架NNDeploy基于工作流的多平台 AI 部署工具Certimate开源 SSL 证书管理工具用可视化工作流自动申请并部署证书是 Lets Encrypt 官方文档中列出的 ACME 客户端选项之一。小结FlowGram 的 README 给出了清晰的“框架”定位它提供画布、表单、变量、材料四类引擎与可裁剪的插件体系而不是一个成品平台。配合npx flowgram.ai/create-applatest一键生成的 Free Layout DemoReact 18 Rsbuild Inversify14 种内置节点、9 个功能插件、浏览器/服务端双运行时开发者可以在半小时内得到一个可编辑、可试运行、可导出export-plugin的 AI 工作流编辑器再按业务需要扩展节点与插件。若希望建立自己的工作流平台建议的阅读路径是先跑通 apps/demo-free-layout/再沿FreeLayoutProps配置、节点注册表、插件列表三条线深入 packages/client/free-layout-editor 与 packages/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点击查看免费下载相关推荐FlowGram AI 工作流框架工程指南:Rush Monorepo 构建体系、分层架构与开发工作流全解析FlowGram AI 工作流框架工程指南:Rush Monorepo 构建体系、分层架构与开发工作流全解析 本文基于 FlowGram AI 仓库根目录的 C前端低代码工作流自动化流程编排LangFlow可视化AI工作流开发平台完全指南LangFlow可视化AI工作流开发平台完全指南 LangFlow作为一款革命性的可视化AI工作流构建平台正在重新定义开发人员创建和部署智能应用的方式。这个人工智能大模型AI AgentRAG后端前端MCP 服务工作流自动化Langflow可视化AI应用开发平台零代码构建智能工作流Langflow可视化AI应用开发平台零代码构建智能工作流 在人工智能技术飞速发展的今天Langflow作为一款创新的可视化AI应用开发工具正在改变着普通人工智能大模型AI AgentRAG后端前端MCP 服务工作流自动化上一篇Mixamo动画转换工具终极指南从Blender到UE4的完整流程下一篇Zotero SciHub插件完整使用教程一键获取学术文献的终极方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 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 的官方 READMEREADME_ES.md与英文版 README.md 内容对齐为主线完整梳理 FlowGram 的定位、快速启动方式、四大核心能力自由布局画布、固定布局画布、表单引擎、变量引擎以及配套的材料与运行时体系并结合仓库中的 CLI 实现、Free Layout Demo 源码和 packages 目录结构帮助读者掌握“从零创建一个可运行的 AI 工作流编辑器”的完整路径。FlowGram 是什么框架与工具集而非现成平台FlowGram 官方对自身的定义是一个可组合composable、视觉化visual、易集成easy-to-integrate、可扩展extensible的工作流开发框架与工具集目标是帮助开发者更快、更简单地构建 AI 工作流平台。这里有一个关键区分也是理解 FlowGram 设计哲学的前提FlowGram 不是一台“开箱即用”的工作流平台而是帮你搭建自己平台的框架和工具集。围绕这个目标FlowGram 内置了四件核心工具内置工具解决的问题对应仓库模块流程画布Flow Canvas节点、连线的可视化编辑packages/canvas-engine/core、document、fixed-layout-core、free-layout-core、renderer节点配置表单Node Form节点参数的 CRUD、校验、联动packages/node-engine/form-core、packages/materials/form-materials变量作用域链Variable Scope Chain数据在节点间流动的约束与推导packages/variable-engine/variable-core即用材料MaterialsLLM、条件、代码编辑器等现成节点packages/materials/这种“引擎 插件 材料”的分层使得下游可以在不修改内核的前提下按业务需要拼装出自己的工作流编辑器。官方 Demo 在演示什么README 中给出的示例工作流是一条完整的 AI 决策链路值得逐节点拆开理解它基本覆盖了 FlowGram 的全部核心能力迭代城市列表——用 Loop循环节点遍历一组城市HTTP 请求实时天气数据——HTTP 节点发起真实网络调用Code 节点解析温度数据——在浏览器中执行自定义代码逻辑LLM 节点生成穿衣建议——调用大模型生成结构化内容Condition 节点做条件门控——按条件分支决定是否继续跨循环聚合结果——变量引擎在循环作用域中累积数据顾问 LLM 节点在多个候选城市中挑选最舒适的一个最终把结果送进End 节点。这条链路同时用上了容器节点Loop、外部调用HTTP、代码执行Code、模型调用LLM、控制流Condition/Break/Continue和作用域变量是理解 FlowGram 能力边界的最佳样本。快速开始三步跑起 Free Layout DemoREADME 推荐的入门模板是Free Layout Demo完整命令如下# 1. 创建新项目交互式选择模板或直接传模板名 npx flowgram.ai/create-applatest# 2. 安装依赖并启动 cd demo-free-layout npm install npm start# 3. 浏览器打开 http://localhost:3000create-app 实际提供了哪些模板这个命令对应仓库中的 apps/cli/src/create-app/index.ts。从源码看它提供的模板列表比 README 提到的更多交互式选择时共有 7 个选项模板名生成的目录Fixed Layout Demodemo-fixed-layoutFree Layout DemoREADME 推荐 ⭐️demo-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也可以在命令行直接传模板名跳过交互例如npx flowgram.ai/create-applatest free-layout合法取值fixed-layout、free-layout、fixed-layout-simple、free-layout-simple、playground、nextjs。从 apps/cli/src/create-app/index.ts 的实现可以看到CLI 的工作流程是通过npm view flowgram.ai/demo-fixed-layout version --taglatest查询最新版本号从 npm registry 下载形如flowgram.ai/{模板名}/-/{模板名}-{版本}.tgz的 tarball 并解压到当前目录重命名为模板目录读取生成的package.json把其中所有flowgram.ai前缀的依赖版本统一改写为flowgram.ai/core的 latest 版本——这保证了脚手架与核心包版本始终对齐打印cd {目录} / npm install / npm start的后续指引。也就是说模板本身就是发布在 npm 上的包如flowgram.ai/demo-free-layoutcreate-app 本质是一个“下载 版本对齐”的脚手架。深入 Free Layout Demo 工程结构apps/demo-free-layout/ 是 README 推荐的“最佳实践”示例其 README 自称 Best-practice demo for free layout官方模板即来源于此。核心技术栈前端框架React 18 TypeScript构建工具Rsbuild基于 Rspack 的现代构建工具入口在 rsbuild.config.ts其中显式开启了decorators: { version: legacy }以支持 Inversify 的injectable()/inject装饰器UI 库Semi Designdouyinfe/semi-ui样式Less Styled Components CSS Variables依赖注入Inversify应用入口Provider Renderer 面板层整个编辑器的装配非常简洁见 apps/demo-free-layout/src/editor.tsxFreeLayoutEditorProvider {...editorProps} div classNamedemo-container DockedPanelLayer EditorRenderer classNamedemo-editor / /DockedPanelLayer /div /FreeLayoutEditorProvider三层结构各负其责FreeLayoutEditorProvider注入FreeLayoutProps初始数据、节点注册表、插件、事件回调等全部编辑器配置DockedPanelLayer来自flowgram.ai/panel-manager-plugin侧边栏/停靠面板的挂载层EditorRenderer真正的画布渲染器。而editorProps由 apps/demo-free-layout/src/hooks/use-editor-props.tsx 中的useEditorProps统一构建它是编辑器的“配置中心”包含基础开关background背景网格、readonly、initialDatainitial-data.ts 提供初始文档 JSON、nodeRegistries节点注册表引擎开关nodeEngine: { enable: true }、variableEngine: { enable: true }、history: { enable: true, enableChangeNode: true }节点增删改纳入撤销/重做业务规则钩子canAddLine连线合法性、canDeleteLine、canDeleteNode、canDropToNode拖拽入容器规则插件列表plugins: () [...]与生命周期事件onInit、onContentChange防抖 1 秒的自动保存、onAllLayersRendered。节点注册表14 种工作流节点apps/demo-free-layout/src/nodes/index.ts 集中导出了全部节点注册表export const nodeRegistries: FlowNodeRegistry[] [ ConditionNodeRegistry, // 条件节点 StartNodeRegistry, // 开始节点 EndNodeRegistry, // 结束节点 LLMNodeRegistry, // 大模型节点 LoopNodeRegistry, // 循环节点 CommentNodeRegistry, // 注释节点 BlockStartNodeRegistry, // 子画布开始 BlockEndNodeRegistry, // 子画布结束 HTTPNodeRegistry, // HTTP 请求 CodeNodeRegistry, // 代码执行 ContinueNodeRegistry, // continue BreakNodeRegistry, // break VariableNodeRegistry, // 变量节点 GroupNodeRegistry, // 分组 MultiConditionNodeRegistry, // 多条件 ];对应的WorkflowNodeType枚举见 nodes/constants.ts覆盖start / end / llm / http / code / variable / condition / loop / block-start / block-end / comment / continue / break等类型。每个节点遵循统一的注册模式例如开始节点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; }, // 全局只允许一个开始节点 };这种“注册表 元数据 表单元数据”的模式意味着新增一个业务节点不需要改动任何核心代码只需新增一个 Registry 并加入nodeRegistries数组。插件体系每个能力都是独立插件Demo 中启用的插件包括详见 plugins/createFreeLinesPlugin连线渲染与交互支持在连线上渲染加节点按钮createMinimapPlugin小地图导航createFreeSnapPlugin拖拽自动对齐与参考线createFreeNodePanelPlugin加节点面板createContainerNodePlugin容器节点Loop 等复合节点createFreeGroupPlugin节点分组createContextMenuPlugin右键菜单createRuntimePlugin工作流运行时支持mode: browser浏览器模式或mode: server服务端模式createVariablePanelPlugin变量管理面板。这些插件大多对应 packages/plugins/ 下的独立包如free-lines-plugin、minimap-plugin、free-snap-plugin等可按需裁剪。运行时浏览器与服务端两种执行模式工作流执行由 packages/runtime/ 支撑分为runtime-interface协议接口、runtime-js-coreJS 执行核心与runtime-nodejsNode 端运行时。Demo 的 runtime-plugin 支持createRuntimePlugin({ mode: browser, // 浏览器模式 // mode: server, // 服务端模式可配置 domain / port / protocol })配合 Demo 中完整的 testrun 组件状态栏、测试运行表单、JSON 输入可以实时运行和调试工作流。四大核心能力详解README 特性表逐条展开README 的特性表列出了四个核心特性下面逐条对应到仓库实现。1. 自由布局画布Free Layout Canvas节点可放置在画布任意位置用自由形态的连线连接这是 Coze 式“无限画布”体验。实现位于 packages/canvas-engine/free-layout-core底层依赖canvas-engine/core的 playground画布视口、坐标变换、手势与document文档模型。配套的交互能力由插件提供自由连线free-lines-plugin、吸附对齐free-snap-plugin、分组free-group-plugin、容器free-container-plugin、自动布局free-auto-layout-plugin、缩放手势free-stack-plugin。2. 固定布局画布Fixed Layout Canvas节点只能拖拽到规定位置并原生支持分支、循环等复合节点——更接近传统 BPMN/流程图式的自上而下编排。实现位于 packages/canvas-engine/fixed-layout-core示例工程为 apps/demo-fixed-layout/。它同样提供连线校验、历史、拖拽fixed-drag-plugin、历史fixed-history-plugin等配套插件。3. 表单引擎Form表单引擎负责节点数据的CRUD并提供渲染、校验、副作用、联动linkage、错误捕获能力把“节点配置面板”的开发从手工受控组件中解放出来。核心实现是 packages/node-engine/form-core 与 packages/node-engine/form即插即用的表单材料各类输入控件、类型编辑器在 packages/materials/form-materials还有独立的类型编辑器 packages/materials/type-editor 支持按 JSON Schema 生成配置界面。节点注册表中的formMeta字段就是表单引擎的入口。4. 变量引擎Variable变量引擎支持作用域约束、变量结构检查与类型推断管理数据在工作流中的流动。核心实现在 packages/variable-engine/variable-core从源码结构看包含scope、ast、services等模块即作用域解析 表达式 AST 服务层配套的变量布局渲染在variable-layoutJSON Schema 转换在json-schema。Demo 中的 Loop 节点“跨循环聚合结果”正是变量作用域机制的典型应用循环内部对累加器的写入在循环外部以受限方式可读。如何在仓库中继续深入官方文档站源码就在这个仓库里apps/docs/Rspress 构建含 apps/docs/src/en 与 apps/docs/src/zh 双语README 中给出的文档章节在仓库内均有对应目录可离线阅读快速开始、画布、表单、变量、材料、运行时、进阶指南、API 参考——对应apps/docs/src/zh/guide/、apps/docs/src/en/guide/、apps/docs/src/*/api、apps/docs/src/*/materials示例源码在apps/docs/examples/之外的独立 apps 中apps/demo-fixed-layout-simple/最简固定布局、apps/demo-free-layout-simple/最简自由布局、apps/demo-playground/无限画布 Playground、apps/demo-node-form/节点表单示例、apps/demo-react-16/React 16 兼容示例端到端测试在 e2e/Playwright例如 e2e/fixed-layout/tests/ 覆盖了拖拽、抽屉、布局、节点、试运行、校验、变量等场景贡献指南见 CONTRIBUTING.md 与 CLAUDE.md、AGENTS.md。如果需要直接获取源码可使用git clone https://gitcode.com/gh_mirrors/fl/flowgram.ai社区的采用情况README 列出了三个基于 FlowGram 的知名开源项目可作为真实场景参考Coze Studio一站式 AI Agent 开发工具提供多种开发模式与框架NNDeploy基于工作流的多平台 AI 部署工具Certimate开源 SSL 证书管理工具用可视化工作流自动申请并部署证书是 Lets Encrypt 官方文档中列出的 ACME 客户端选项之一。小结FlowGram 的 README 给出了清晰的“框架”定位它提供画布、表单、变量、材料四类引擎与可裁剪的插件体系而不是一个成品平台。配合npx flowgram.ai/create-applatest一键生成的 Free Layout DemoReact 18 Rsbuild Inversify14 种内置节点、9 个功能插件、浏览器/服务端双运行时开发者可以在半小时内得到一个可编辑、可试运行、可导出export-plugin的 AI 工作流编辑器再按业务需要扩展节点与插件。若希望建立自己的工作流平台建议的阅读路径是先跑通 apps/demo-free-layout/再沿FreeLayoutProps配置、节点注册表、插件列表三条线深入 packages/client/free-layout-editor 与 packages/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点击查看免费下载相关推荐FlowGram AI 工作流框架工程指南:Rush Monorepo 构建体系、分层架构与开发工作流全解析FlowGram AI 工作流框架工程指南:Rush Monorepo 构建体系、分层架构与开发工作流全解析 本文基于 FlowGram AI 仓库根目录的 C前端低代码工作流自动化流程编排LangFlow可视化AI工作流开发平台完全指南LangFlow可视化AI工作流开发平台完全指南 LangFlow作为一款革命性的可视化AI工作流构建平台正在重新定义开发人员创建和部署智能应用的方式。这个人工智能大模型AI AgentRAG后端前端MCP 服务工作流自动化Langflow可视化AI应用开发平台零代码构建智能工作流Langflow可视化AI应用开发平台零代码构建智能工作流 在人工智能技术飞速发展的今天Langflow作为一款创新的可视化AI应用开发工具正在改变着普通人工智能大模型AI AgentRAG后端前端MCP 服务工作流自动化上一篇Mixamo动画转换工具终极指南从Blender到UE4的完整流程下一篇Zotero SciHub插件完整使用教程一键获取学术文献的终极方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考