扣子coze的AI工作流搭建技术，开源项目FlowGram流程搭建引擎

最新推荐文章于 2025-04-08 14:07:03 发布

无奈何杨

最新推荐文章于 2025-04-08 14:07:03 发布

阅读量967

点赞数 9

文章标签：人工智能开源

本文链接：https://blog.csdn.net/weixin_44783934/article/details/146923438

版权

参考

https://github.com/bytedance/flowgram.ai

https://flowgram.ai/guide/introduction.html

https://site.logic-flow.cn/article/lowcode-with-logicflow

https://mp.weixin.qq.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 支持任意节点间的动态连线）。
特点：无约束的创作空间，适合探索性、非结构化的流程设计。

三、代码实现差异（关键文件对比）

功能模块

固定布局实现（fixed-layout-core

）

自由布局实现（free-layout-core

）

布局算法

VerticalFixedLayout.ts

实现垂直方向自动排版

FreeLayoutService.ts

仅记录节点坐标，无自动排版

节点数据结构

支持 blocks

嵌套（树形结构，如子画布节点）

扁平的 nodes

+ edges

（JSON 结构无层级）

交互约束

NodeDragger

限制移动范围（allowDrag

配置）

FreeNodeDragger

完全开放移动（无坐标限制）

连接线

EdgeAutoAlign

自动拉直（fixed-layout-editor

默认样式）

CubicBezierEdge

支持曲线（自由布局默认样式）

四、输出数据对比（JSON 结构）

固定布局（含层级）

{
  "nodes": [
    {
      "id": "root",
      "type": "flow",
      "blocks": [  
        { "id": "step1", "label": "开始" },
        { 
          "id": "branch", 
          "type": "if", 
          "blocks": [{"id": "then", "label": "条件成立"}]  
        }
      ]
    }
  ]
}

自由布局（纯扁平）

{
  "nodes": [
    { "id": "node1", "x": 100, "y": 50, "label": "A" },
    { "id": "node2", "x": 300, "y": 200, "label": "B" }
  ],
  "edges": [
    { "source": "node1", "target": "node2", "path": "M100,50 Q200,125 300,200" }  // 贝塞尔曲线坐标
  ]
}