Flowzap MCP

🚀 FlowZap MCP Server

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

FlowZapは、FlowZap Codeと呼ばれるテキストベースのDSLを備えた視覚的なワークフロー図作成ツールです。このMCPサーバーにより、AIアシスタントがあなたのために図を作成できます。

🚀 クイックスタート

FlowZap MCP Serverを使って、AIアシスタントによる図の作成を始めましょう。以下に詳細な手順を説明します。

✨ 主な機能

FlowZapとは？

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

主な特徴:

• たった4つの形状: circle、rectangle、diamond、taskbox
• ノード属性はコロンを使用: label:"Text"
• エッジラベルはイコールを使用: [label="Text"]
• ハンドルの指定: n1.handle(right) -> n2.handle(left)
• シーケンス図の品質: すべてのクロスレーンリクエストには対応するレスポンスエッジが必要; エッジは時系列順に定義; 孤立したノードはなし

📦 インストール

FlowZap MCP Serverは、Model Context Protocol (MCP)をサポートするすべてのツールと互換性があります。

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

非互換: ReplitとLovable.devはURLを通じたリモートMCPサーバーのみをサポートします。代わりにPublic APIを使用してください。

JSON設定

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

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

Windowsユーザー: ツールが表示されない場合は、絶対パスを使用してください。

"command": "C:\\Program Files\\nodejs\\npx.cmd"

where.exe npxでnpxのパスを見つけてください。

利用可能なツール

コアツール

エージェント中心のツール

💻 使用例

基本的な図の作成

AIアシスタントに以下のように依頼します。

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

エージェント中心のワークフロー

HTTPログを図に解析する:

"これが私のnginxアクセスログです。リクエストフローを示すシーケンス図を作成してください。"

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

図の構造を分析する:

"このワークフローのどのステップがデータベースにアクセスしていますか？"

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

変更点を表示する:

"ワークフローを更新しました。前のバージョンと何が異なっていますか？"

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

安全な段階的な更新:

"この図のAPI呼び出しの後にロギングステップを追加してください。"

エージェントは構造化されたパッチを使用してflowzap_apply_changeを実行し、再生成ではなく更新します。

アシスタントは以下の手順を実行します。

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

基本的な使用法

sales { # Sales Team
  n1: circle label:"Order Received"
  n2: rectangle label:"Validate Order"
  n3: diamond label:"Valid?"
  n1.handle(right) -> n2.handle(left)
  n2.handle(right) -> n3.handle(left)
  n3.handle(right) -> fulfillment.n4.handle(left) [label="Yes"]
}

fulfillment { # Fulfillment
  n4: rectangle label:"Process Order"
  n5: circle label:"Complete"
  n4.handle(right) -> n5.handle(left)
}

🔧 技術詳細

セキュリティ

• 認証不要 - 公開された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