本教程将带你深入了解字节跳动最新开源的可视化工作流引擎——FlowGram。这款引擎融合了节点式设计与AI增强功能，旨在简化开发流程，帮助你快速构建高效、智能的工作流应用，是当前备受关注的开源工作流工具之一。

什么是 FlowGram？

字节跳动（ByteDance）近期开源了其基于节点的流程构建引擎：FlowGram。它是一款在线上产品中经过验证且极受用户青睐的强大工具，也是飞书工作流、扣子自动化等产品中使用的核心可视化流程引擎。

FlowGram 结合了节点式设计和 AI 增强功能，提供直观的可视化工作流构建体验。它支持 固定布局（结构化流程） 和 自由布局（灵活连接），通过 AI 自动化任务（如数据清洗、报告生成），并允许开发者扩展节点功能。

它通过前端可视化编辑器（React）实现节点拖拽和连接，结合后端 AI 集成（支持 豆包、DeepSeek、Kimi 等通用大模型），提供流畅的交互体验。FlowGram 的设计目标是简化工作流开发，同时通过 AI 增强自动化能力。特别适合需要明确输入输出的可视化工作流场景。

小提示： 如果你是第一次接触工作流引擎，可以将 FlowGram 想象成一个 “乐高积木” 平台。你可以把不同的功能模块（节点）像积木一样拖拽、拼接，组成一个完整的自动化流程，整个过程几乎不需要编写大量代码。

核心引擎特点

FlowGram 引擎的核心优势在于其灵活性与AI融合能力，主要表现在以下几个方面：

• 节点式设计与AI增强的结合：将复杂的工作流拆解为一个个独立的节点，并利用AI能力实现数据清洗、报告生成等自动化任务。
• 双布局模式：提供固定布局和自由布局两种模式，满足从结构化到灵活的多种场景需求。
• 丰富的交互体验：支持节点拖拽、连线、配置、参数输入、状态高亮等，确保输入输出清晰明了。
• 强大的扩展能力：开发者可以为节点增加自定义功能或集成外部服务，打造专属的工作流。

核心功能亮点

FlowGram 的核心功能围绕其 可视化 和 AI 驱动 的特性展开，主要包含以下六大亮点，每一项都经过精心设计，以提升开发效率与用户体验。

1. 双布局模式

FlowGram 提供了两种核心布局模式，以适应不同的工作流设计习惯：

• 固定布局（结构化流程）：适合有明确步骤和顺序的流程，节点沿网格或固定路径排列，看起来像传统的组织结构图。
• 自由布局（灵活连接）：允许节点在画布上任意放置，通过线条自由连接，适合复杂、不规则或需要高度灵活性的交互式工作流。

2. AI 能力增强

FlowGram 的 AI 集成是其最大亮点之一，可接入多种主流大模型：

• 支持接入 豆包、月之暗面 Kimi、DeepSeek 等通用大模型。
• 可增强工作流的智能化处理能力，例如自动分析文本、生成报告、进行数据清洗等。

3. 丰富的交互体验

为了让开发过程更直观、高效，FlowGram 设计了多种交互方式：

• 拖拽与连线：在画布上直接拖拽节点并连线，即可定义流程。
• 参数输入与配置：每个节点都可以独立配置参数，输入输出一目了然。
• 状态高亮：运行时节点会显示不同状态（如运行中、成功、失败），方便调试。

4. 节点控制丰富

FlowGram 提供了强大的节点控制能力，几乎涵盖所有常规工作流逻辑：

• 分支判断：根据条件执行不同的路径。
• 循环执行：重复执行某个节点或子流程。
• 嵌套子流程：将一个复杂的流程作为一个节点，实现流程复用。
• 条件表达式：支持自定义条件，实现更精细化的控制。

5. 强大的扩展能力

FlowGram 具备良好的可扩展性，允许开发者根据业务需求进行自定义：

• 可为节点增加 自定义功能（如调用内部API、处理特定数据格式）。
• 可集成 外部服务（例如接入公司内部的邮件系统、CRM系统等）。

6. 低代码能力支撑

FlowGram 不仅仅是一个编辑器，它还是一个构建低代码平台的坚实基础：

• 提供了构建更大规模自动化系统所需的基础组件。
• 形成了完整的扩展体系，让非技术用户也能通过拖拽和配置来创建复杂流程。

固定布局演示：

自由布局演示：

快速部署指南

FlowGram 是基于 TypeScript 开发而成，需要借助前端 NodeJS 环境进行本地部署。请按照以下步骤操作：

① 安装 Node.js 18+

使用 nvm（Node Version Manager）来安装和管理Node.js版本，这是最佳实践。

nvm install lts/hydrogen
nvm alias default lts/hydrogen # set default node version
nvm use lts/hydrogen

② 克隆项目

从字节跳动的 Git 仓库克隆 FlowGram 到本地。

git clone git@github.com:bytedance/flowgram.ai.git

③ 安装全局依赖包

需要安装 pnpm（包管理器）和 rush（Microsoft的monorepo管理工具）。

npm i -g pnpm@9.12.0 @microsoft/rush@5.140.0

④ 安装项目依赖

进入项目根目录后，使用 rush 命令安装所有子项目的依赖。

rush update

⑤ 编译项目

编译整个项目。

rush build

⑥ 运行项目Demo

编译成功后，可以分别运行固定布局和自由布局的演示版本。

rush dev:demo-fixed-layout
rush dev:demo-free-layout

其他命令速查：

• 文档开发：rush dev:docs （访问 http://localhost:3000）
• 创建新应用：npx @flowgram.ai/create-app@latest

常见问题 1： 部署过程中，执行 rush update 或 rush build 报错怎么办？

解答： 请确保你的 Node.js 版本 在 18+。建议使用 nvm 来管理版本。如果依然报错，可以尝试以下步骤：
1. 删除项目中的 node_modules 文件夹和 pnpm-lock.yaml 文件（如果有）。
2. 重新执行 rush update，它会重新下载所有依赖。

常见问题 2： 我需要集成 AI 能力，该如何开始？

解答： FlowGram 的 AI 集成是架构层面的，你需要在 后端 将 AI 模型（如豆包、DeepSeek）作为服务注册进来。在前端编辑器中，你只需拖拽一个“AI节点”并配置相关参数即可。具体的集成方式请参考项目中的 rush dev:docs 文档。

小提示： 在运行 rush dev:demo-fixed-layout 或 rush dev:demo-free-layout 时，如果提示端口被占用，可以在命令后面添加 -- --port=你想要的端口号 来指定一个新端口。

写在最后

传统的工作流构建往往依赖于大量的编码和配置，既耗时又容易出错。而 FlowGram 的出现，为开发者提供了一种全新的方式：通过可视化的节点编辑，快速搭建清晰、直观的工作流。

FlowGram 本身是以闭源形式在字节内部产品中进行使用（飞书、Coze），而现在将其开源，将会有更多企业与开发者团队以其开源特性和 AI 增强能力，二次定制化适合企业内部的高效工作流。

其 双布局模式、丰富的交互体验、强大的扩展能力以及 AI 集成计划，在众多开源工作流工具中都是独树一帜的。无论是自动化办公、数据分析，还是 AI 流程集成等等，都是值得接入自己的产品应用中去。