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

• シーケンス図の品質: レーンをまたぐすべてのリクエストには、次の主要なリクエストの前に対応するレスポンスエッジが必要です。エッジは時系列順に定義し、リクエスト → レスポンス → 次のリクエストという厳密なリズムを維持してください。孤立したノードは作成しないでください。

Related MCP server: Draw.io MCP Server

インストール

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

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

非互換: 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

利用可能なツール

コアツール

エージェント向けツール

使用例

基本的な図の作成

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を実行します。

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

1. 説明に基づいてFlowZap Codeを生成

2. コードを検証

3. 適切なビュー（ワークフロー、シーケンス、またはアーキテクチャ）でプレイグラウンド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など。

リンク

• FlowZap ウェブサイト

• FlowZap Code ドキュメント

• FlowZap MCP ブログ

• LLM コンテキスト

• テンプレートライブラリ

• npm パッケージ

• GitHub リポジトリ

ライセンス

MIT

Maintenance

Resources

• NPM Package
• GitHub Repository
Need Help?Related Servers

Tools

• flowzap_apply_changeA
• flowzap_artifact_to_diagramB
• flowzap_create_playgroundA
• flowzap_diffA
• flowzap_export_graphA
• flowzap_get_syntaxB
• flowzap_validateA