https://github.com/bytedance/flowgram.ai
https://flowgram.ai/guide/introduction.html
https://site.logic-flow.cn/article/lowcode-with-logicflow
https://mp.weixin..com/s/9aWQv4tnkGcHW04RxK1VsA
扣子及AI 工作流搭建技术-刘文成.pdf
前前文：免费使用满血版DeepSeek-R1的多种方案、大语言模型（LLM）应用开发平台
FlowGram 是一套基于节点编辑的流程搭建引擎，帮助开发者快速创建固定布局或自由连线布局的流程，并提供一套交互的最佳实践, 很适合有明确输入和输出的可视化工作流。
Github: https://github.com/bytedance/flowgram.ai
官网：https://flowgram.ai/
已服务字节内部30+项目，包含扣子工作流、飞书低代码平台工作流、飞书多维表格工作流等。
固定布局（Fixed Layout）与自由布局（Free Layout）的核心区别体现在节点约束、交互逻辑、适用场景三个维度，以下是具体对比：
一、交互行为差异
特性
固定布局（Fixed Layout）
自由布局（Free Layout）
节点移动
受网格 / 预设位置约束（如 vertical-fixed-layout.ts
实现垂直对齐）
无约束，任意坐标拖拽（free-layout-core
支持自由坐标）
连接逻辑
自动吸附至节点锚点（输入 / 输出端口对齐）
支持自由路径连线（可弯曲、任意角度）
复合节点
内置分支 / 循环等层级结构（如 WorkflowNodeEntity
的子节点递归）
纯扁平结构，无内置层级（需手动通过节点嵌套模拟）
对齐辅助
网格线、吸附提示（代码中 LayoutService
提供对齐算法）
无辅助线，完全自由摆放
二、典型应用场景
固定布局（适合结构化流程）
- 流程图 / 逻辑图：如审批流程、算法步骤（代码中 fixed-layout-demo.gif 展示分支节点嵌套）。
- 模块化配置：AI 提示词链的分层配置（@flowgram.ai/fixed-layout-editor 支持输入输出端口绑定）。
- 特点：强制规范结构，适合需要清晰层级和数据流的场景（如代码生成、自动化任务编排）。
自由布局（适合创意 / 复杂连接）
- 思维导图：节点无规则关联（free-layout-demo.gif 展示发散式连接）。
- AI 工作流：多模型组合的复杂调用（free-layout-core 支持任意节点间的动态连线）。
- 特点：无约束的创作空间，扣子 Coze 教程;适合探索性、非结构化的流程设计。
三、代码实现差异（关键文件对比）
功能模块
固定布局实现（fixed-layout-core
）
自由布局实现（free-layout-core
）
布局算法
VerticalFixedLayout.ts
实现垂直方向自动排版
FreeLayoutService.ts
仅记录节点坐标，无自动排版
节点数据结构
支持 blocks
嵌套（树形结构，如子画布节点）
扁平的 nodes
+ edges
（JSON 结构无层级）
交互约束
NodeDragger
限制移动范围（allowDrag
配置）
FreeNodeDragger
完全开放移动（无坐标限制）
连接线
EdgeAutoAlign
自动拉直（fixed-layout-editor
默认样式）
CubicBezierEdge
支持曲线（自由布局默认样式）
四、输出数据对比（JSON 结构）
固定布局（含层级）
自由布局（纯扁平）
五、如何选择？
- 选固定布局：需要强制规范结构、层级嵌套（如流程图、低代码表单）。
- 选自由布局：追求灵活性、创意连接（如 AI 多模态流程、思维导图）。
💡 实际案例：
- 固定布局：文档中的「审批流程」示例，节点必须按顺序排列，分支结构清晰。
- 自由布局：AI 提示词生成器，用户可随意连接「主题」「修饰词」「输出格式」节点。
通过 npx @flowgram.ai/create-app 初始化项目时，可直接选择 fixed-layout-simple 或 free-layout-simple 模板体验差异
一、条件组件（Condition）
二、循环组件（Loop）
三、错误监控组件（Try Catch）
四、大模型组件（LLM）
♾️、自定义节点
参考：
https://flowgram.ai/guide/advanced/form.html
https://flowgram.ai/guide/advanced/variable.html
变量引擎是 Flowgram 提供的一个可选内置功能，可以帮助 Workflow 设计时更高效地实现变量信息编排。它可以实现以下功能：
作用域约束控制、变量信息树的维护、变量类型自动联动推导
如官网所讲
- CanvasEngine：画布引擎负责绘制“点-线”构成的图, 保障大规模节点时的流畅性
- NodeEngine: 节点引擎提供 渲染、校验、数据修改等表单能力
- VariableEngine: 变量引擎引入作用域模型, 抽象各业务场景的变量
- Material: 物料库包含默认 ICON 等 UI, 业务接入后可覆盖扩展
https://flowgram.ai/guide/concepts/variable-engine.html
非常建议看官方说明。
参考官方学习
画布引擎：https://flowgram.ai/guide/concepts/canvas-engine.html
节点引擎：https://flowgram.ai/guide/concepts/node-engine.html
ECS：https://flowgram.ai/guide/concepts/ecs.html
IOC：https://flowgram.ai/guide/concepts/ioc.html
对比ReactFlow：https://flowgram.ai/guide/concepts/reactflow.html
如果你看了前面的参考，就知道这是3月8日第19届D2终端技术大会中工程研发专场中《扣子及AI 工作流搭建技术-刘文成》的分享。也是在这个时间之后FlowGram才开源。
发布者：Ai探索者，转载请注明出处：https://javaforall.net/267884.html原文链接：https://javaforall.net
