FlowGram実践レビュー：ByteDanceがオープンソース化したワークフローオーケストレーションエンジンでAIワークフローをビジュアル構築

Q: FlowGramをワークフロープラットフォームとして直接使えるか？

そのままでは使えない。FlowGramは開発フレームワークであり、既成のプラットフォームではない。これに基づいて独自のワークフローアプリを開発し、バックエンド実行エンジンとデータ永続化を実装する必要がある。ワークフロープラットフォームをそのまま使いたいなら、n8nかDifyを推奨する。

Q: FlowGramはどのフロントエンドフレームワークをサポートしているか？

現在Reactのみサポート。FlowGramのキャンバスエンジン、ノードコンポーネント、フォームシステムはすべてReactで構築されている。Vue、Angularなどのフレームワークは現時点では未対応。

Q: カスタムノードタイプはどう定義するか？

defineNode APIでノードのタイプ、入出力ポート、設定フォーム、実行ロジックを定義する。カスタムノードはプラグインとしてパッケージ化して公開し、他のプロジェクトで利用できる。

FlowGram実践レビュー：ByteDanceがオープンソース化したワークフローオーケストレーションエンジンでAIワークフローをビジュアル構築

AI 技術 2026-08-26 FlowGram 工作流引擎可视化编排字节开源 AI 工作流

ByteDanceがついにCozeのワークフローエンジンをオープンソース化

2025年2月、ByteDanceがGitHub上でFlowGramをリリースした——Reactベースのビジュアルワークフロー開発フレームワークだ。2026年8月現在、このプロジェクトは8,300+ Starと765 Forkを記録し、ByteDanceのAIワークフロー分野における最も重要なオープンソース貢献の一つとなっている。

FlowGramはまた別の既成ワークフロープラットフォーム（n8nやDifyのような）ではなく、ワークフロープラットフォームを構築するためのフレームワークだ。ビジュアルワークフロー構築に必要なすべての基盤能力を提供する：キャンバスエンジン、ノードフォーム、変数スコープチェーン、そしてすぐに使えるマテリアルコンポーネント（LLM、条件分岐、コードエディタなど）。

一言で言えば：Cozeのようなワークフローエディタを作りたいなら、FlowGramがそれを素早く実現するためのスキャフォールディングだ。

CozeからFlowGramへ：プロダクトからエンジンへ

FlowGramの立ち位置を理解するには、まずその出自を知る必要がある。

ByteDanceのCozeは一般ユーザー向けAI Bot構築プラットフォームで、中核機能の一つがビジュアルワークフローオーケストレーションだ——ユーザーはノードのドラッグ＆ドロップや線で結ぶだけで、複雑なAI処理フローを構築できる。このワークフローエディタはCoze内部で大規模に検証され、数百万のユーザーにサービスを提供してきた。

FlowGramはまさにこの本番級プロダクトから切り出されたエンジン層だ。ByteDanceはCozeワークフローエディタのフロントエンドフレームワークをオープンソース化した。ただしビジネスロジックとバックエンドサービスは切り離されている。つまり：

Coze = FlowGramエンジン + ビジネスバックエンド + ユーザーインターフェース
FlowGram = 純フロントエンドワークフローフレームワーク（バックエンドは自分で接続）

この関係はDifyとFlowGramの違いに似ている：Difyはフルスタックプラットフォーム、FlowGramはフロントエンドエンジン。FlowGramを選ぶということは、完全なコントロール権を持つことを意味する——カスタムバックエンド、カスタムデータモデル、カスタムデプロイ方法。

中核機能：デュアルレイアウトモードと4つのエンジン

フリーレイアウト vs フィクスドレイアウト

FlowGramの最大の差別化特徴は、2つのキャンバスレイアウトモードを同時にサポートしていることだ。

フリーレイアウト（Free Layout）： - ノードをキャンバス上に自由に配置 - ノード間はフリーカーブで接続 - ズーム、パン、ミニマップナビゲーション対応 - 複雑で非構造的なワークフローに適する

フィクスドレイアウト（Fixed Layout）： - ノードが自動整列、指定位置にドラッグ - 複合ノード（分岐、ループ）をサポート - 明確な階層構造を持つフローに適する

2つのレイアウトは同じプロジェクト内に共存でき、これは同種のフレームワークでは非常に稀だ。

4つの中核エンジン

FlowGramのアーキテクチャは4つの独立したエンジンで構成されている：

1. キャンバスエンジン（Canvas Engine） Reactベースの高性能キャンバスレンダリング、数千ノードのスムーズなインタラクションをサポート。アンドゥ/リドゥ、ショートカット、選択ボックスなどの編集機能を内蔵。

2. フォームエンジン（Form Engine） 各ノードにはパラメータ設定が必要。フォームエンジンはJSON Schemaに基づいて設定パネルを動的にレンダリングし、バリデーションルールと連動ロジックを内蔵、カスタムコンポーネント拡張をサポート。

3. 変数エンジン（Variable Engine） ワークフロー内部のデータフロー管理。スコープチェーン（各ノードが親変数にアクセス可能）、型推論、構造チェックをサポートし、設計時にデータフローエラーを検出できる。

4. ランタイムエンジン（Runtime Engine） ワークフローの実行エンジンで、ノードスケジューリング、データ伝達、エラーハンドリング、ブレークポイントデバッグを担当。ブラウザ側実行とサーバー側実行の2モードをサポート。

組み込みマテリアル

FlowGramはすぐに使えるノードマテリアルセットを提供する：

マテリアル	機能	説明
LLM Node	大規模モデル呼び出し	OpenAI、Claudeなど複数モデル切り替え対応
Condition	条件分岐	式に基づき実行パスを判定
Code Editor	コードノード	Monacoエディタ内蔵、JS/Python対応
HTTP Request	HTTPリクエスト	外部API呼び出し
Loop	ループノード	配列走査とバッチ処理
Start/End	開始/終了ノード	フローの入口と出口

すべてのマテリアルはプラグ可能だ——組み込みマテリアルを置き換えることも、カスタムノードタイプを追加することもできる。

技術アーキテクチャ：モジュラー設計と実行エンジン

FlowGramのアーキテクチャ設計には、ByteDanceの大規模フロントエンドエンジニアリングの経験が反映されている。フレームワーク全体は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は2つの実行モードをサポートする：

ブラウザ側実行： - 軽量ワークフローに適する - バックエンドサービス不要、純フロントエンドで実行 - 制限：ファイルシステム、データベースなどのバックエンドリソースにアクセス不可

サーバー側実行： - 本番級ワークフローに適する - ランタイムサービスのデプロイが必要 - 非同期ノード、長時間実行タスクをサポート

ランタイムエンジンはブレークポイントデバッグ機能を提供する——任意のノードで実行を一時停止し、変数状態を確認してから続行またはロールバックできる。

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はフレームワーク、他の3つはプラットフォーム。Cozeのようなワークフロープロダクトを構築するならFlowGram、タスク自動化にワークフローを使うならn8nかDifyを選ぼう。
n8nのfair-codeライセンスは商業利用を制限する（収入が閾値を超えると有料）、FlowGramのMITライセンスにはこの制限はない。
DifyはAIアプリに特化し、ワークフローはその機能の一つに過ぎない。FlowGramは汎用ワークフローエンジンで、AIはその応用シーンの一つに過ぎない。

クイックスタート：3分で開発環境を構築

環境準備

BASH

# Node.js 18+ 必須
node --version  # >= 18 を確認

# スキャフォールディングでプロジェクトを作成
npx @flowgram.ai/create-app@latest

スキャフォールディングでテンプレートを選択する：

? テンプレートを選択：
❯ Free Layout Demo ⭐️    # フリーレイアウト（推奨）
  Fixed Layout Demo       # フィクスドレイアウト
  Next.js + Ant Design    # 本番級テンプレート
  Vite + React            # 軽量テンプレート

プロジェクト起動

BASH

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ワークフローを構築しよう：トピック入力 → アウトライン生成 → 段落ごとの執筆 → 推敲 → 記事出力。

ステップ1：ワークフローJSONの定義

FlowGramのワークフローはJSON形式でノードと接続を記述する：

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" }
  ]
}

ステップ2：エディタでロード

TYPESCRIPT

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();
        }
      }}
    />
  );
}

ステップ3：実行バックエンドのカスタマイズ

FlowGramのフロントエンドエディタはビジュアル表示を担当し、実際の実行にはバックエンドロジックを自分で実装する必要がある：

TYPESCRIPT

// 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アプリに統合できる。

基本統合

TSX

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>
  );
}

カスタムノードタイプ

独自のノードタイプを作成し、ワークフローの機能を拡張する：

TYPESCRIPT

// 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をサポートする：

TYPESCRIPT

// 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ワークフロープロダクトの構築

CozeやDifyのようなワークフロープラットフォームを作りたい場合、FlowGramは既成のフロントエンドエンジン提供する。必要なのは： - 独自のバックエンドAPI設計 - ノード実行ロジックの実装 - UIテーマのカスタマイズ

実例：Coze Studio（Cozeのオープンソース版）はFlowGramに基づいて構築されている。

2. 企業内自動化プラットフォーム

企業内には様々な承認フロー、データ処理フローが存在する。FlowGramを使えばビジュアルなフロー設定プラットフォームを構築でき、ビジネス担当者がノードをドラッグ＆ドロップするだけで自動化フローを設定できる。開発者の介入は不要。

3. AI Agentオーケストレーション

複数のAI Agentの協業をワークフローで表現できる。各Agentが一つのノードで、Agent間のデータ伝達は接続線で定義する。FlowGramの変数スコープチェーンは、Agent間のコンテキスト伝達管理に特に適している。

4. データ処理パイプライン

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はCozeワークフローエディタのフロントエンドエンジンのオープンソース版だ。Coze = FlowGram + バックエンドサービス + ユーザーインターフェース。FlowGramはキャンバス、ノード、変数などの基盤能力を提供し、バックエンドロジックは自分で実装する必要がある。

FlowGramをワークフロープラットフォームとして直接使えるか？

そのままでは使えない。FlowGramは開発フレームワークであり、既成のプラットフォームではない。これに基づいて独自のワークフローアプリを開発し、バックエンド実行エンジンとデータ永続化を実装する必要がある。ワークフロープラットフォームをそのまま使いたいなら、n8nかDifyを推奨する。

FlowGramはどのフロントエンドフレームワークをサポートしているか？

現在Reactのみサポート。FlowGramのキャンバスエンジン、ノードコンポーネント、フォームシステムはすべてReactで構築されている。Vue、Angularなどのフレームワークは現時点では未対応。

カスタムノードタイプはどう定義するか？

defineNode APIでノードのタイプ、入出力ポート、設定フォーム、実行ロジックを定義する。カスタムノードはプラグインとしてパッケージ化して公開し、他のプロジェクトで利用できる。詳細は公式ドキュメントのMaterials章を参照。

FlowGramのワークフローはエクスポート/インポートできるか？

可能だ。ワークフローはJSON形式で記述され、シリアライズとデシリアライズをサポートする。ワークフローJSONをデータベースに保存することも、ファイルとしてエクスポートして共有することもできる。インポート時はJSONをエディタのworkflowプロパティに渡すだけだ。

総評

FlowGramはByteDanceのAIワークフロー分野における重要なオープンソース貢献だ。Cozeの本番級ワークフローエンジンをコミュニティに公開し、開発者が独自のビジュアルワークフロープロダクトを素早く構築できるようにした。

長所： - デュアルレイアウトモード（フリー + フィクスド）は柔軟で強力 - 変数スコープチェーンの設計が秀逸で、データフローが明確 - MITライセンスで商用利用に優しい - Cozeの本番級検証を経たコード品質の高さ - LLM、条件、コードなどのAIマテリアルを内蔵

短所： - 純フロントエンドフレームワークで、バックエンドは独自実装が必要 - Reactのみサポート - コミュニティエコシステムはまだ発展初期 - 一部の高度な機能のドキュメントが未整備

誰に向いているか： - ワークフロープロダクトを構築中のチーム - ビジュアルオーケストレーション機能を必要とするAIアプリ開発者 - 企業内自動化プラットフォームを構築したい技術チーム

誰に向いていないか： - ワークフローでタスク自動化をしたい個人ユーザー（n8nを推奨） - React以外の技術スタックのチーム - すぐに使えるフルスタックAIプラットフォームを必要とする場合（Difyを推奨）

FlowGramの価値はエンパワーメントにある——プロダクトを置き換えるのではなく、より速くプロダクトを構築できるようにする。ワークフローオーケストレーションが必要なプロジェクトに取り組んでいるなら、FlowGramは真剣に評価する価値がある。

参考リンク： - GitHubリポジトリ：bytedance/flowgram.ai - 公式ドキュメント：flowgram.ai - オンラインデモ：CodeSandbox | StackBlitz

ByteDanceのオープンソースFlowGramワークフローエンジン徹底レビュー。8.3k Star、Reactベースのビジュアルフローオーケストレーションフレームワーク、フリーレイアウト＆フィクスドレイアウトのデュアルモード対応。技術アーキテクチャ完全解析、n8n/Difyとの比較、AIコンテンツ生成ワークフローの実践構築。