openflowkit-mcp

OpenFlowKit

描いても、コードで書いても、エージェントに任せても作れるアーキテクチャ図。
無料のオープンソースで、ローカル優先です。GitHub リポジトリを貼り付けると、すべての矢印にコード行の引用が付いた構成図が表示されます。

アプリを開く  ·  ドキュメント  ·  MCP のセットアップ  ·  ディスカッション  ·  課題

OpenFlowKit を選ぶ理由

1. エージェントがキャンバスにリアルタイムで描画します

Claude Code、Cursor、または任意の MCP クライアントを接続して、図の作成を依頼できます。エージェントはページを読み取り、描画し、スタイルを変更して、作業を確認するためにスクリーンショットを撮ります。その様子をリアルタイムで見ることができます。エージェントによる変更はそれぞれ 1 回の取り消し操作として記録され、自分で行った変更と同じように元に戻せます。エージェントを接続する ↓

2. テキストとキャンバスが同じ図になります

flowchart right
  Client [blue] -> "API Gateway" [emerald] : HTTPS
  "API Gateway" -> Queue [queue, amber]
  Queue -> Worker
  Worker -> Store [cylinder, red, bold]

コードパネル（⌥C）を開き、ここに貼り付けて ⌘↵ を押します。キャンバス上で図形をドラッグしたり、テキストを編集したりできます。⌘↵ を押すと、テキストからフレームが再生成され、1 回の取り消し操作として記録されます。Mermaid、Structurizr、D2 を貼り付けると、変換されます。

空のキャンバスでボックスに owner/repo と入力して Map repo を押すか、 app.openflowkit.com/#/map/github/<owner>/<repo> を開きます（サンプルを試す）。 ブラウザーが GitHub からリポジトリを読み込み、その構成要素を描画します。ボックスをクリックするとその場で開き、各矢印にはコードへのリンク付きで、その根拠となる file:line が表示されます。キーもインストールも不要です。プライベートリポジトリの場合は、ページで読み取り専用の GitHub トークンを追加するか、チェックアウトしたリポジトリをマップします：npx openflowkit map . --html map.html （プライベートリポジトリ）。

4. アニメーションも含めてエクスポートする

PNG、SVG、PDF、JSON、または README 用の Copy as Mermaid。上のテキストに animate ブロックを追加してステップに名前を付けると、ブラウザーでアニメーション付き SVG、GIF、MP4、または WebM をエクスポートできます。

animate build 6s loop {
  step Client
  step Client -> "API Gateway" : HTTPS
  step Queue, Worker
  step Store hold 2s
}

_{このアニメーションは上の2つのスニペットをアプリでアニメーション付き SVG としてエクスポートしたものです。GitHub では画像と同じように再生されます。}

10種類の図を、1つの言語で

どの種類も、短くて柔軟なテキストで記述でき、行ごとのエラーには修正方法が示されます。 以下の図は、それぞれのドキュメントページにある最初の例をopenflowkit CLIでレンダリングしたものです。

アーキテクチャ · クラウドアイコン、グループ、ビューを備えたC4モデル	シーケンス · alt / opt / loop、注釈、アクティベーション
フローチャート · 図形、分岐、グループ	ERD · 列、キー、カラスの足によるカーディナリティ
状態 · 開始と終了、複合状態	クラス · メンバー、ステレオタイプ、関係
マインドマップ · インデントでツリーを表現	Gitグラフ · ブランチ、マージ、タグ
チャート · テキストでデータを記述し、テーブルで編集可能	ワイヤーフレーム · スマートフォン、タブレット、デスクトップ画面向けの35種類のコントロール

言語仕様はバージョン管理され、1つのファイルにまとめられています：src/dsl/grammar.md （ドキュメント）。コードパネル、アシスタント、MCP ツール、CLIは、すべて同じテキストを使用します。

クイックスタート

ブラウザーで使う： app.openflowkit.com。インストールもアカウントも不要です。

ターミナルで使う： npx openflowkit（Node 20.11+）。

ローカルで実行する（Node 22.22+）：

git clone https://github.com/openflowkit/openflowkit.git
cd openflowkit
npm install && npm run dev      # http://localhost:3000

エージェントを接続する

OpenFlowKit には、エージェントツールが1セットあります。エージェントの実行場所に応じて行を選んでください。

Claude Code の場合は、次の1行を実行します。

claude mcp add -s user openflowkit -- npx -y openflowkit mcp

Codex の場合：codex mcp add openflowkit -- npx -y openflowkit mcp。

Claude Desktop、Windsurf、その他の MCP クライアントの場合：

{
  "mcpServers": {
    "openflowkit": { "command": "npx", "args": ["-y", "openflowkit", "mcp"] }
  }
}

エージェントを再起動し、アプリでエージェントを接続をクリックするか、 app.openflowkit.com/#/connectを開きます。このパネルには各クライアントの手順があり、 ペアリングトークン付きの同じ設定をコピーできます。アプリを開いていない場合、同じツールでリポジトリ内の .openflow.json ファイルを編集します。 すべてのクライアントの詳しい手順と問題の解決方法については、エージェントを接続するをご覧ください。

# Claude Code
claude plugin marketplace add openflowkit/openflowkit
claude plugin install openflowkit@openflowkit

# Codex: add the marketplace, then install OpenFlowKit from the Plugins Directory
codex plugin marketplace add openflowkit/openflowkit

MCP サーバーを使うと、キャンバス上でもファイル上でも、エージェントが各種操作を行えます。

次のように依頼できます。

• 「このリポジトリのアーキテクチャを図にして。」
• 「選択したボックスを赤にして、API の前にキャッシュを追加して。」
• 「README にある Mermaid を編集可能な図に変換して。」
• 「architecture.ofk とコードを比較して、ずれがあれば教えて。」

キャンバスの編集内容は安全に保持されます。何かを移動、スタイル変更、名前変更した後、エージェントがテキストから再生成する場合、get_diagram はそれぞれの編集内容を保持するテキストを渡し、update_diagram は破棄が必要だった項目を報告します。エージェントによる変更はすべて 1 回の取り消し操作となり、Connect パネルには直近の変更が Undo ボタンとともに表示されます。

独自のキーを使う場合： ⌘J でアシスタントが開きます。Claude、OpenAI、Gemini、 Groq、Mistral、Cerebras、NVIDIA、OpenRouter、Ollama、または OpenAI 互換のエンドポイント（LM Studio…）を選び、 キーを貼り付けます。キーはこのブラウザー内に保存され、返信は適用するか却下する提案として届きます。

既存の図を取り込む

コードパネルに貼り付けると変換され、変換できなかった項目は正直に一覧表示されます。Mermaid をキャンバスに直接貼り付けると、その場に図が描画されます。

図を外部に出す場合、Copy as Mermaid を使うと、README や Wiki 用のフローチャートまたはシーケンス図が Mermaid テキストとして出力されます。Mermaid · Structurizr からの移行

リポジトリと CI での利用

openflowkit CLI は、アプリと同じエンジンを使って、任意のターミナルや CI ジョブから実行できます。

npx openflowkit render diagram.ofk -o diagram.svg   # Mermaid, D2, Structurizr or DSL → SVG
npx openflowkit validate diagram.ofk --strict       # exit 1 on an error
npx openflowkit convert flow.mmd -o flow.openflow.json
npx openflowkit discover . --out architecture.ofk   # draft a C4 model of this repo
npx openflowkit drift .                             # exit 1 when the code moved on

architecture.ofk をコードの隣にコミットし、CI で drift を実行して整合性を保ちます。PR diagrams Action は、図の変更内容をプルリクエストにコメントします。ノードとコネクターの数、テキストの差分、.ofk モデルのずれが表示されます。 CLI · GitHub Action

エクスポートと共有

キーボード

すべての操作にキーが割り当てられており、アプリ内で?を押すと一覧が表示されます。

仕組み

_{この図もOpenFlowKitのテキストです：how-it-works.ofk。パルスプリセットを使ってアニメーションSVGとしてエクスポートされています。}

あなたとエージェントはキャンバスに直接描くこともできます。テキストによる編集も手作業による編集も、すべて同じドキュメントに対するコマンドです。

キャンバス上のどのフレームも正規テキストとして書き出され、テストではformat(format(x)) == format(x)が成り立ちます。言語とドキュメントのコードはReact、Pixi、DOMに依存しないプレーンなTypeScriptです。そのため、同じコンパイラーをブラウザー、MCP サーバー、CLIで実行できます。全体の解説は**ARCHITECTURE.md**をご覧ください。

セルフホスト

docker build -t openflowkit . && docker run --rm -p 3045:3045 openflowkit   # http://localhost:3045

画像はnginxの背後で動作する静的ビルドで、ホスト版アプリと同じヘッダーを使用しています。コンテンツセキュリティポリシー、独自ネットワーク上のAIプロバイダー、共有リンクについては、 セルフホスティングをご覧ください。

プライバシー

図はブラウザー内に保存されます。外部に送信されるのは、ご自身で選択した場合のみです。ご自身のキーを使う AI はそのプロバイダーに接続し、共有リンクでは暗号化されたコピーがアップロードされ、リポジトリマップでは GitHub からデータを読み取ります。 アカウントは不要です。OpenFlowKit の改善に役立てるため、基本的な利用状況の統計情報を収集しています。設定から無効にできます。 ホームの すべての図をダウンロード ですべてを一度にバックアップし、インポート するとどのブラウザーでも復元できます。

コントリビュート

Issue、アイデア、PR を歓迎します。セットアップとチェックについてはCONTRIBUTING.mdを、コードの構成についてはARCHITECTURE.mdをご覧ください。質問はDiscussionsへどうぞ。各バージョンでの変更点：CHANGELOG.md。

セキュリティ上の問題は、SECURITY.mdの説明に従って非公開で報告してください。MIT ライセンスです。詳細はLICENSEをご覧ください。

OpenFlowKit が図の作成に役立ったら、GitHub で ⭐ を付けてください。
_{ほかの人に見つけてもらうきっかけになります。}

アプリを開く  ·  ドキュメント  ·  コントリビュート  ·  ディスカッション  ·  バグを報告