FlowZap MCPサーバー

Claude、Cursor、Windsurf、その他8つのMCP互換ツールなどのAIアシスタントを使用して、ワークフロー図、シーケンス図、アーキテクチャ図を作成します。

FlowZapは、FlowZap Codeと呼ばれるテキストベースのDSLを使用した視覚的なワークフロー図作成ツールです。このMCPサーバーを使用すると、AIアシスタントが代わりに図を作成してくれます。

FlowZapとは？

FlowZapは、FlowZap Code DSLを使用して、テキストプロンプトを3つのビュー（ワークフロー、シーケンス、アーキテクチャ）の図に変換します。MermaidやPlantUMLではなく、シンプルさとAI生成のために設計された独自のドメイン固有言語です。

重要な事実:

4つの形状のみ: circle、rectangle、diamond、taskbox
ノード属性はコロンを使用: label:"Text"
エッジラベルはイコールを使用: [label="Text"]
ハンドル操作: n1.handle(right) -> n2.handle(left)
レーン表示ラベルは開始括弧と同じ行に記述する必要があります: laneName { # Label
シーケンス図の品質: レーンをまたぐすべてのリクエストには、次の主要なリクエストの前に対応するレスポンスエッジが必要です。エッジは時系列順に定義し、リクエスト → レスポンス → 次のリクエストという厳密なリズムを維持してください。孤立したノードは作成しないでください。

インストール

FlowZap MCPサーバーは、Model Context Protocol (MCP)をサポートするすべてのツールで動作します。

すべての互換性のあるコーディングツール

ツール	設定方法
Claude Desktop	`claude_desktop_config.json`に追加: macOS: `~/Library/Application Support/Claude/claude_desktop_config.json` Windows: `%APPDATA%\Claude\claude_desktop_config.json`
Claude Code	実行: `claude mcp add --transport stdio flowzap -- npx -y flowzap-mcp` またはプロジェクトルートの`.mcp.json`に追加。
Cursor	設定 → 機能 → MCPサーバー → サーバーを追加。同じJSON設定を使用。
Windsurf IDE	`~/.codeium/windsurf/mcp_config.json`に追加
OpenAI Codex	`~/.codex/config.toml`に追加: `[mcp_servers.flowzap]` `command = "npx"` `args = ["-y", "flowzap-mcp"]` または実行: `codex mcp add flowzap -- npx -y flowzap-mcp`
Warp Terminal	設定 → MCPサーバー → 「+ 追加」をクリック → JSON設定を貼り付け。
Zed Editor	`settings.json`に追加: `{"context_servers": {"flowzap": {"command": "npx", "args": ["-y", "flowzap-mcp"]}}}`
Cline (VS Code)	Clineサイドバーを開く → MCPサーバーアイコン → `cline_mcp_settings.json`を編集
Roo Code (VS Code)	プロジェクトまたはグローバル設定の`.roo/mcp.json`に追加。
Continue.dev	`.continue/mcpServers/flowzap.yaml`を作成: `name: FlowZap` `mcpServers:` `- name: flowzap` `command: npx` `args: ["-y", "flowzap-mcp"]`
Sourcegraph Cody	`openctx.providers`設定を介してVS Codeの`settings.json`に追加。

非互換: ReplitおよびLovable.devは、URL経由のリモートMCPサーバーのみをサポートしています。代わりにパブリックAPIを使用してください。

JSON設定

すべてのツールで同じJSON設定形式を使用します:

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

Windowsユーザー: ツールが表示されない場合は、絶対パスを使用してください:
"command": "C:\\Program Files\\nodejs\\npx.cmd"
npxのパスは以下で確認できます: where.exe npx

利用可能なツール

コアツール

ツール	説明
`flowzap_validate`	FlowZap Codeの構文を検証
`flowzap_create_playground`	共有可能な図のURLを作成
`flowzap_get_syntax`	FlowZap Codeの構文ドキュメントを取得

エージェント向けツール

ツール	説明
`flowzap_export_graph`	推論のためにFlowZap Codeを構造化JSONグラフ（レーン、ノード、エッジ）としてエクスポート
`flowzap_artifact_to_diagram`	HTTPログ、OpenAPI仕様、またはコードをFlowZap図に解析
`flowzap_diff`	2つのバージョンのFlowZap Codeを比較し、構造化された差分を取得
`flowzap_apply_change`	構造化されたパッチ操作（ノード/エッジの挿入/削除/更新）を適用

使用例

基本的な図の作成

AIアシスタントに以下のように依頼してください:

「このアプリに実装されている現在のサインインフローのシーケンス図を生成して」
「注文処理システムのワークフロー図を作成して」
「マイクロサービスAPIゲートウェイのアーキテクチャ図を作成して」
「ユーザー登録フローを示すフローチャートを作成して」
「ビルド、テスト、デプロイのステージを含むCI/CDパイプラインを図解して」

エージェント向けワークフロー

HTTPログを解析して図にする:

"Here are my nginx access logs. Create a sequence diagram showing the request flow."

エージェントはartifactType: "http_logs"を指定してflowzap_artifact_to_diagramを使用します。

図の構造を分析する:

"Which steps in this workflow touch the database?"

エージェントはflowzap_export_graphを使用してJSONグラフを取得し、それをクエリします。

変更内容を表示する:

"I updated the workflow. What's different from the previous version?"

エージェントはflowzap_diffを使用して新旧のコードを比較します。

安全なインクリメンタル更新:

"Add a logging step after the API call in this diagram."

エージェントは再生成の代わりに、構造化されたパッチを使用してflowzap_apply_changeを実行します。

アシスタントは以下の手順を行います:

説明に基づいてFlowZap Codeを生成
コードを検証
適切なビュー（ワークフロー、シーケンス、またはアーキテクチャ）でプレイグラウンドURLを作成し、表示・共有可能にする

FlowZap Codeの例

sales { # Sales Team
  n1: circle label:"Order Received"
  n2: rectangle label:"Submit Order"
  n5: rectangle label:"Receive decision"
  n1.handle(right) -> n2.handle(left)
  n2.handle(bottom) -> fulfillment.n3.handle(top) [label="Submit"]
}

fulfillment { # Fulfillment
  n3: rectangle label:"Review Order"
  n4: rectangle label:"Return decision"
  n3.handle(right) -> n4.handle(left)
  n4.handle(top) -> sales.n5.handle(bottom) [label="Approved"]
}

セキュリティ

認証不要 - 公開されているFlowZap APIのみを使用
ユーザーデータへのアクセスなし - 図やアカウントを読み取ることはできません
ローカル実行 - MCPサーバーはマシン上で実行されます
SSRF保護 - flowzap.xyzにのみ接続します
レート制限 - クライアント側で1分間に30リクエスト
入力検証 - コードサイズ最大50KB

エージェントスキル (skills.sh)

skills.sh経由で40以上の互換性のあるコーディングエージェントにFlowZapスキルをインストールできます:

npx skills add flowzap-xyz/flowzap-mcp

skills.sh リスト: https://skills.sh/flowzap-xyz/flowzap-mcp/flowzap-diagrams
スキルソース: skills/flowzap-diagrams/
互換性: Claude Code, Cursor, Windsurf, Codex, Gemini CLI, GitHub Copilot, Cline, Roo Code, Augment, OpenCodeなど。

リンク

ライセンス

MIT

FlowZap MCP Server