字节跳动终于把扣子的工作流引擎开源了
2025 年 2 月，字节跳动在 GitHub 上发布了 FlowGram——一个基于 React 的可视化工作流开发框架。截至 2026 年 8 月，这个项目已经积累了 8,300+ Star 和 765 Fork，成为字节在 AI 工作流领域最重要的开源贡献之一。
FlowGram 不是又一个现成的工作流平台（像 n8n 或 Dify），而是一个帮你搭建工作流平台的框架。它提供了构建可视化工作流所需的全部底层能力：画布引擎、节点表单、变量作用域链、以及开箱即用的物料组件（LLM、条件分支、代码编辑器等）。
一句话概括：如果你想做一个类似扣子（Coze）的工作流编辑器，FlowGram 就是那个帮你快速实现的脚手架。
从扣子（Coze）到 FlowGram：从产品到引擎
要理解 FlowGram 的定位，得先了解它的出身。
字节跳动的 扣子（Coze） 是一个面向普通用户的 AI Bot 搭建平台，核心能力之一就是可视化工作流编排——用户通过拖拽节点、连线，就能构建复杂的 AI 处理流程。这个工作流编辑器在扣子内部经过了大规模验证，服务了数百万用户。
FlowGram 正是从这个生产级产品中抽离出来的引擎层。字节把扣子工作流编辑器的前端框架开源了，但剥离了业务逻辑和后端服务。这意味着：
- 扣子 = FlowGram 引擎 + 业务后端 + 用户界面
- FlowGram = 纯前端工作流框架（需要你自接后端）
这个关系类似于 Dify 和 FlowGram 的区别：Dify 是全栈平台，FlowGram 是前端引擎。你选择 FlowGram，意味着你拥有完全的控制权——自定义后端、自定义数据模型、自定义部署方式。
核心特性：双布局模式与四大引擎
自由布局 vs 固定布局
FlowGram 最大的差异化特性是同时支持两种画布布局模式。
自由布局（Free Layout）： - 节点可以在画布上任意摆放 - 节点间通过自由曲线连接 - 支持缩放、平移、小地图导航 - 适合复杂、非结构化的工作流
固定布局（Fixed Layout）： - 节点自动排列，拖拽到指定位置 - 支持复合节点（分支、循环） - 适合有明确层级结构的流程
两种布局可以共存于同一个项目中，这在同类框架中很少见。
四大核心引擎
FlowGram 的架构由四个独立引擎组成：
1. 画布引擎（Canvas Engine） 基于 React 的高性能画布渲染，支持数千节点的流畅交互。内置撤销/重做、快捷键、选择框等编辑能力。
2. 表单引擎（Form Engine） 每个节点都需要配置参数。表单引擎基于 JSON Schema 动态渲染配置面板，内置校验规则和联动逻辑，支持自定义组件扩展。
3. 变量引擎（Variable Engine） 工作流内部的数据流管理。支持作用域链（每个节点可以访问父级变量）、类型推断和结构检查，在设计时就能发现数据流错误。
4. 运行时引擎（Runtime Engine） 工作流的执行引擎，负责节点调度、数据传递、错误处理和断点调试。支持浏览器端执行和服务端执行两种模式。
内置物料
FlowGram 提供了一套开箱即用的节点物料：
| 物料 | 功能 | 说明 |
|---|---|---|
| LLM Node | 大模型调用 | 支持 OpenAI、Claude 等多模型切换 |
| Condition | 条件分支 | 基于表达式判断执行路径 |
| Code Editor | 代码节点 | 内嵌 Monaco 编辑器，支持 JS/Python |
| HTTP Request | HTTP 请求 | 调用外部 API |
| Loop | 循环节点 | 数组遍历与批量处理 |
| Start/End | 起止节点 | 流程的入口和出口 |
所有物料都是可插拔的——你可以替换内置物料，也可以添加自定义节点类型。
技术架构：模块化设计与执行引擎
FlowGram 的架构设计体现了字节在大规模前端工程上的经验。整个框架采用 Monorepo 结构，核心代码分为 8 个包：
packages/
├── canvas-engine/ # 画布渲染与交互
├── node-engine/ # 节点生命周期管理
├── variable-engine/ # 变量作用域与类型推断
├── runtime/ # 工作流执行引擎
├── materials/ # 内置节点物料
├── plugins/ # 插件系统
├── client/ # 客户端 SDK
└── common/ # 公共工具
节点引擎（Node Engine）
每个节点都是一个独立的状态机，包含： - 输入端口：接收上游数据 - 配置面板：用户设置的参数 - 输出端口：向下游传递结果 - 执行逻辑：节点的核心处理函数
节点之间通过端口连接形成 DAG（有向无环图），运行时引擎按拓扑顺序执行。
变量作用域链
这是 FlowGram 的核心创新。每个节点都有自己的变量作用域，形成一棵作用域树：
Start 节点
├── 变量: userInput (string)
└── LLM 节点
├── 变量: prompt (string, 引用 userInput)
└── Code 节点
└── 变量: result (object, 引用 prompt)
子节点可以访问父节点的变量，但反过来不行。这种设计避免了变量污染，也让数据流更清晰。
运行时执行模式
FlowGram 支持两种执行模式：
浏览器端执行： - 适合轻量级工作流 - 无需后端服务，纯前端运行 - 限制：无法访问文件系统、数据库等后端资源
服务端执行： - 适合生产级工作流 - 需要部署运行时服务 - 支持异步节点、长时间运行任务
运行时引擎提供了断点调试能力——你可以在任意节点暂停执行，检查变量状态，然后继续或回退。
FlowGram vs n8n vs Dify vs Node-RED：工作流工具横向对比
在选择工作流工具之前，先搞清楚你的需求。以下对比帮你快速定位：
| 维度 | FlowGram | n8n | Dify | Node-RED |
|---|---|---|---|---|
| 定位 | 工作流前端开发框架 | 自动化工作流平台 | AI 应用开发平台 | IoT 事件流工具 |
| 开源协议 | MIT | Sustainable Use (fair-code) | Apache 2.0 | Apache 2.0 |
| 技术栈 | React/TypeScript | Vue/Node.js | Flask/React | Node.js |
| 布局模式 | 自由布局 + 固定布局 | 自由布局 | 固定布局（线性） | 自由布局 |
| 使用方式 | 嵌入你的应用 | 独立部署使用 | 独立部署使用 | 独立部署使用 |
| AI 能力 | 内置 LLM/Code 物料 | 需接外部节点 | 原生 AI 编排 | 需自行集成 |
| 自定义节点 | 完全自定义 | 支持 | 有限 | 支持 |
| 后端绑定 | 无（纯前端） | 自带后端 | 自带后端 | 自带后端 |
| 适用场景 | 构建工作流产品 | 业务自动化 | AI 应用搭建 | IoT/事件驱动 |
| Star 数 | 8.3k | 59k+ | 67k+ | 21k+ |
关键区别：
- FlowGram 是框架，其他三个是平台。如果你要构建一个类似扣子的工作流产品，选 FlowGram；如果你只是想用工作流来自动化任务，选 n8n 或 Dify。
- n8n 的 fair-code 协议限制商业使用（收入超过阈值需付费），FlowGram 的 MIT 协议无此限制。
- Dify 专注 AI 应用，工作流只是其功能之一；FlowGram 是通用工作流引擎，AI 只是其中一种应用场景。
快速上手：3 分钟搭建开发环境
环境准备
# Node.js 18+ 必需
node --version # 确认 >= 18
# 使用脚手架创建项目
npx @flowgram.ai/create-app@latest
脚手架会提示你选择模板：
? 选择模板：
❯ Free Layout Demo ⭐️ # 自由布局（推荐）
Fixed Layout Demo # 固定布局
Next.js + Ant Design # 生产级模板
Vite + React # 轻量模板
启动项目
cd demo-free-layout
npm install
npm start
浏览器打开 http://localhost:3000，你会看到一个完整的工作流编辑器界面。
项目结构
demo-free-layout/
├── src/
│ ├── components/ # UI 组件
│ ├── nodes/ # 自定义节点定义
│ ├── plugins/ # 插件配置
│ ├── editor.tsx # 编辑器入口
│ └── App.tsx # 应用入口
├── package.json
└── tsconfig.json
实战：搭建 AI 内容生成工作流
让我们用 FlowGram 搭建一个真实的 AI 工作流：输入主题 → 生成大纲 → 逐段写作 → 润色 → 输出文章。
第一步：定义工作流 JSON
FlowGram 的工作流以 JSON 格式描述节点和连接：
{
"nodes": [
{
"id": "start",
"type": "start",
"data": {
"outputs": {
"topic": { "type": "string", "value": "AI Agent 发展趋势" }
}
}
},
{
"id": "outline",
"type": "llm",
"data": {
"model": "gpt-4",
"prompt": "为以下主题生成文章大纲，返回 JSON 数组：{{start.topic}}",
"temperature": 0.7
}
},
{
"id": "write_loop",
"type": "loop",
"data": {
"array": "{{outline.output.sections}}",
"itemVar": "section"
},
"children": [
{
"id": "write_section",
"type": "llm",
"data": {
"model": "gpt-4",
"prompt": "根据大纲 {{loop.section}} 撰写详细内容，主题：{{start.topic}}",
"temperature": 0.5
}
}
]
},
{
"id": "polish",
"type": "llm",
"data": {
"model": "gpt-4",
"prompt": "润色以下文章内容，改善表达和连贯性：{{write_loop.output}}",
"temperature": 0.3
}
},
{
"id": "end",
"type": "end",
"data": {
"outputs": {
"article": "{{polish.output}}"
}
}
}
],
"edges": [
{ "source": "start", "target": "outline" },
{ "source": "outline", "target": "write_loop" },
{ "source": "write_loop", "target": "polish" },
{ "source": "polish", "target": "end" }
]
}
第二步：在编辑器中加载
import { FlowGramEditor } from '@flowgram.ai/editor';
function App() {
return (
<FlowGramEditor
initialWorkflow={workflowJson}
layout="free"
onExecute={async (nodeId, inputs) => {
// 自定义执行逻辑
if (nodeId === 'outline') {
const response = await fetch('/api/llm', {
method: 'POST',
body: JSON.stringify(inputs)
});
return response.json();
}
}}
/>
);
}
第三步：自定义执行后端
FlowGram 的前端编辑器负责可视化展示，实际执行需要你自己实现后端逻辑：
// runtime/executor.ts
import { WorkflowRuntime } from '@flowgram.ai/runtime';
const runtime = new WorkflowRuntime({
// 注册自定义节点执行器
executors: {
llm: async (node, inputs) => {
const { model, prompt, temperature } = node.data;
const response = await openai.chat.completions.create({
model,
messages: [{ role: 'user', content: prompt }],
temperature,
});
return { output: response.choices[0].message.content };
},
code: async (node, inputs) => {
const { language, code } = node.data;
// 安全执行用户代码（生产环境用沙箱）
const fn = new Function('inputs', code);
return fn(inputs);
},
http: async (node, inputs) => {
const { url, method, headers } = node.data;
const response = await fetch(url, { method, headers });
return response.json();
},
},
});
// 执行工作流
const result = await runtime.execute(workflowJson, {
topic: 'AI Agent 发展趋势'
});
console.log(result.article);
代码集成：嵌入到你的 React 应用
FlowGram 最大的价值在于可嵌入性。你可以把它集成到任何 React 应用中，而不是必须使用一个独立的工作流平台。
基础集成
import { FlowGramEditor } from '@flowgram.ai/editor';
import '@flowgram.ai/editor/dist/style.css';
function WorkflowBuilder() {
const [workflow, setWorkflow] = useState(initialWorkflow);
return (
<div style={{ height: '100vh' }}>
<FlowGramEditor
workflow={workflow}
onChange={setWorkflow}
layout="free"
// 自定义节点面板
nodePanels={{
myCustomNode: MyCustomNodePanel,
}}
// 自定义工具栏
toolbar={[
'undo', 'redo', '|',
'zoomIn', 'zoomOut', 'fitView', '|',
'execute', 'save',
]}
/>
</div>
);
}
自定义节点类型
创建你自己的节点类型，扩展工作流的能力：
// nodes/DatabaseQueryNode.ts
import { defineNode } from '@flowgram.ai/node-engine';
export const DatabaseQueryNode = defineNode({
type: 'database-query',
label: '数据库查询',
icon: 'database',
// 输入端口定义
inputs: {
sql: { type: 'string', label: 'SQL 语句' },
params: { type: 'object', label: '参数' },
},
// 输出端口定义
outputs: {
rows: { type: 'array', label: '查询结果' },
count: { type: 'number', label: '行数' },
},
// 配置表单
form: {
fields: [
{
key: 'database',
type: 'select',
label: '数据库',
options: ['mysql', 'postgresql', 'sqlite'],
},
{
key: 'timeout',
type: 'number',
label: '超时时间(ms)',
default: 5000,
},
],
},
// 执行逻辑
execute: async (inputs, config) => {
const { sql, params } = inputs;
const { database, timeout } = config;
const result = await queryDatabase(database, sql, params, timeout);
return {
rows: result.rows,
count: result.rows.length,
};
},
});
与 Next.js 集成
FlowGram 提供了 Next.js 的官方示例（demo-nextjs），支持 SSR 和 API Routes：
// pages/api/execute-workflow.ts
import { WorkflowRuntime } from '@flowgram.ai/runtime';
import type { NextApiRequest, NextApiResponse } from 'next';
const runtime = new WorkflowRuntime({
executors: {
// 注册所有节点执行器
llm: async (node, inputs) => { /* ... */ },
'database-query': async (node, inputs) => { /* ... */ },
},
});
export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
const { workflow, inputValues } = req.body;
const result = await runtime.execute(workflow, inputValues);
res.json({ success: true, data: result });
}
适用场景
FlowGram 特别适合以下场景：
1. 构建 AI 工作流产品
如果你想做一个类似扣子、Dify 的工作流平台，FlowGram 提供了现成的前端引擎。你只需要： - 设计自己的后端 API - 实现节点执行逻辑 - 自定义 UI 主题
真实案例：Coze Studio（扣子的开源版本）就是基于 FlowGram 构建的。
2. 企业内部自动化平台
企业内部常有各种审批流、数据处理流。用 FlowGram 可以搭建一个可视化的流程配置平台，让业务人员通过拖拽节点就能配置自动化流程，无需开发介入。
3. AI Agent 编排
多个 AI Agent 的协作可以用工作流来表达。每个 Agent 是一个节点，Agent 之间的数据传递通过连线定义。FlowGram 的变量作用域链特别适合管理 Agent 间的上下文传递。
4. 数据处理 Pipeline
ETL 流程、数据清洗管道、报表生成等场景，都可以用 FlowGram 可视化搭建。每个数据处理步骤是一个节点，数据在节点间流动。
5. 低代码平台的工作流模块
如果你在做低代码/无代码平台，工作流编排是核心功能之一。FlowGram 可以直接嵌入你的平台，作为工作流模块使用。
局限性与注意事项
当前局限
1. 纯前端框架，无后端
FlowGram 只提供前端画布和编辑器，不包含后端服务。你需要自己实现： - 工作流持久化（存储到数据库） - 节点执行引擎（服务端运行） - 用户认证与权限 - API 接口
这对小团队来说是不小的工作量。
2. React 绑定
FlowGram 深度绑定 React，无法在 Vue、Angular 或 Svelte 项目中使用。如果你的技术栈不是 React，需要评估迁移成本。
3. 文档仍在完善中
虽然核心功能都有文档，但一些高级特性（如自定义插件、复杂变量类型）的文档还不够详细，需要阅读源码。
4. 社区生态尚在早期
相比 n8n（59k Star）和 Dify（67k Star），FlowGram 的社区规模还较小。第三方节点物料、教程、案例相对有限。
生产环境建议
- 代码节点用沙箱执行：用户提交的代码必须在安全沙箱中运行，避免恶意代码影响服务器
- 大工作流分页加载：超过 500 个节点的工作流建议分页渲染，避免画布卡顿
- 版本管理：工作流 JSON 应该有版本控制，支持回滚
- 执行日志：记录每次执行的节点输入/输出，便于排查问题
常见问题（FAQ）
FlowGram 和扣子（Coze）是什么关系？
FlowGram 是扣子工作流编辑器的前端引擎开源版本。扣子 = FlowGram + 后端服务 + 用户界面。FlowGram 提供画布、节点、变量等底层能力，你需要自己实现后端逻辑。
FlowGram 能直接当工作流平台用吗？
不能直接使用。FlowGram 是一个开发框架，不是现成的平台。你需要基于它开发自己的工作流应用，实现后端执行引擎和数据持久化。如果你想直接使用工作流平台，推荐 n8n 或 Dify。
FlowGram 支持哪些前端框架？
目前只支持 React。FlowGram 的画布引擎、节点组件、表单系统都基于 React 构建。Vue、Angular 等框架暂不支持。
如何自定义节点类型？
通过 defineNode API 定义节点的类型、输入输出端口、配置表单和执行逻辑。自定义节点可以打包成插件发布，供其他项目使用。详见官方文档的 Materials 章节。
FlowGram 的工作流能导出/导入吗？
可以。工作流以 JSON 格式描述，支持序列化和反序列化。你可以将工作流 JSON 存储到数据库，也可以导出为文件分享。导入时只需将 JSON 传入编辑器的 workflow 属性。
总结评价
FlowGram 是字节跳动在 AI 工作流领域的重要开源贡献。它把扣子生产级的工作流引擎开放给了社区，让开发者可以快速搭建自己的可视化工作流产品。
优点： - 双布局模式（自由 + 固定）灵活强大 - 变量作用域链设计精巧，数据流清晰 - MIT 协议，商用友好 - 来自扣子的生产级验证，代码质量高 - 内置 LLM、条件、代码等 AI 物料
不足： - 纯前端框架，后端需自行实现 - 仅支持 React - 社区生态尚在早期 - 部分高级功能文档不完善
适合谁： - 正在构建工作流产品的团队 - 需要可视化编排能力的 AI 应用开发者 - 想搭建企业内部自动化平台的技术团队
不适合谁： - 只想用工作流自动化任务的个人用户（推荐 n8n） - 非 React 技术栈的团队 - 需要开箱即用的全栈 AI 平台（推荐 Dify）
FlowGram 的价值在于赋能——它不替代你的产品，而是帮你更快地构建产品。如果你正在做一个需要工作流编排的项目，FlowGram 值得认真评估。
参考链接： - GitHub 仓库：bytedance/flowgram.ai - 官方文档：flowgram.ai - 在线演示：CodeSandbox | StackBlitz