Draw Flow MCP Server

🚀 Next AI Draw.io MCP Server

このMCP（Model Context Protocol）サーバーは、Claude DesktopやCursorなどのAIエージェントがdraw.ioのダイアグラムを生成および編集できるようにし、リアルタイムのブラウザープレビューを提供します。

自己完結型で、組み込みのHTTPサーバーを含んでおり、外部依存関係は必要ありません。

🚀 クイックスタート

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"]
    }
  }
}

📦 インストール

Claude Desktop

Claude Desktopの設定ファイル（macOSでは~/Library/Application Support/Claude/claude_desktop_config.json）に以下を追加します。

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"]
    }
  }
}

VS Code

VS Codeの設定ファイル（ワークスペースまたはユーザー設定の.vscode/mcp.json）に以下を追加します。

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"]
    }
  }
}

Cursor

CursorのMCP設定ファイル（~/.cursor/mcp.json）に以下を追加します。

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"]
    }
  }
}

Cline (VS Code Extension)

1. Clineの上部メニューバーにあるMCP Serversアイコンをクリックします。
2. Configureタブを選択します。
3. Configure MCP Serversをクリックしてcline_mcp_settings.jsonを編集します。
4. drawioサーバーを追加します。

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"]
    }
  }
}

Claude Code CLI

claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest

その他のMCPクライアント

以下の標準的なMCP設定を使用します。

• コマンド: npx
• 引数: ["@next-ai-drawio/mcp-server@latest"]

💻 使用例

基本的な使用法

1. 設定を更新した後、MCPクライアントを再起動します。
2. AIにダイアグラムを作成するように依頼します。

   "Create a flowchart showing user authentication with login, MFA, and session management"

3. ダイアグラムがブラウザーにリアルタイムで表示されます！

✨ 主な機能

• リアルタイムプレビュー：AIがダイアグラムを作成する際に、ブラウザーにダイアグラムが表示され、更新されます。
• バージョン履歴：ビジュアルサムネイルで以前のダイアグラムバージョンを復元できます。右下の時計ボタンをクリックして、以前の状態を閲覧および復元します。
• 自然言語対応：フローチャート、アーキテクチャダイアグラムなどを平文で記述できます。
• 編集サポート：自然言語の指示で既存のダイアグラムを修正できます。
• エクスポート：ダイアグラムを.drawioファイルとして保存できます。
• 自己完結型：組み込みサーバーで、オフラインでも動作します（ただし、draw.io UIはデフォルトでembed.diagrams.netから読み込まれ、DRAWIO_BASE_URLで設定可能です）。

📚 詳細ドキュメント

利用可能なツール

動作原理

┌─────────────────┐     stdio      ┌─────────────────┐
│  Claude Desktop │ <───────────> │   MCP Server    │
│    (AI Agent)   │               │  (this package) │
└─────────────────┘               └────────┬────────┘
                                          │
                                 ┌────────▼────────┐
                                 │ Embedded HTTP   │
                                 │ Server (:6002)  │
                                 └────────┬────────┘
                                          │
                                 ┌────────▼────────┐
                                 │  User's Browser │
                                 │ (draw.io embed) │
                                 └─────────────────┘

1. MCPサーバーは、Claudeからのツール呼び出しを標準入出力経由で受け取ります。
2. 組み込みHTTPサーバーは、draw.io UIを提供し、状態を管理します。
3. ブラウザーは、ポーリングによってリアルタイムのダイアグラム更新を表示します。

設定

プライベートデプロイメント（自己ホスト型draw.io）

セキュリティに敏感な環境でdraw.ioをプライベートデプロイする場合は、以下の設定を行います。

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"],
      "env": { 
        "DRAWIO_BASE_URL": "https://drawio.your-company.com"
      }
    }
  }
}

公式のDockerイメージを使用して、独自のdraw.ioインスタンスをデプロイできます。

docker run -d -p 8080:8080 jgraph/drawio

その後、DRAWIO_BASE_URL=http://localhost:8080（またはサーバーのURL）を設定します。

トラブルシューティング

ポートが既に使用中

ポート6002が使用中の場合、サーバーは自動的に次の利用可能なポート（最大6020まで）を試みます。

または、カスタムポートを設定することもできます。

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"],
      "env": { "PORT": "6003" }
    }
  }
}

"No active session"

最初にstart_sessionを呼び出して、ブラウザーウィンドウを開きます。

ブラウザーが更新されない

ブラウザーのURLに?mcp=クエリパラメータが含まれていることを確認してください。MCPセッションIDは、ブラウザーをサーバーに接続します。

📄 ライセンス

Apache-2.0