FlowGram 實測：字節開源的工作流編排引擎，視覺化搭建 AI 工作流

字節跳動終於把扣子的工作流引擎開源了

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 提供了一套開箱即用的節點物料：

所有物料都是可插拔的——你可以替換內建物料，也可以新增自訂節點類型。

技術架構：模組化設計與執行引擎

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 是框架，其他三個是平台。如果你要建構一個類似扣子的工作流產品，選 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