draw.io MCP Server

draw.io MCP Server とは？

draw.io MCP Server は draw.io チームが公式にホストしている MCP App です。Mermaid.js または draw.io XML をインタラクティブな図に変換し、Claude.ai、ChatGPT、VS Code、Cursor の会話内に直接表示します。インストールもサインインも不要です。

draw.io（diagrams.net とも呼ばれます）は JGraph による広く使われている作図ツールです。https://mcp.draw.io/mcp でホストされるサーバーは MCP Apps 拡張を使い、モデルが create_diagram を呼ぶと、ホストが公式の draw.io ビューアーでサンドボックス化された iframe 内に図を描画します。ズーム、パン、レイヤー、全画面に対応し、編集を続けるための「Open in draw.io」ボタンもあります。コードは jgraph/drawio-mcp で Apache 2.0 のオープンソースとして公開されており、同じサーバーをセルフホストすることもできます。

draw.io MCP Server の使い方

URL をリモート MCP サーバーとして追加します。サーバーはサインイン不要なので、認証はオフのままにします。

https://mcp.draw.io/mcp

MCP Apps に対応したホスト（Claude.ai、ChatGPT、GitHub Copilot 付きの VS Code 1.109 以降、Cursor 2.6 以降）では図がインラインで表示されます。Claude Code など他のホストでは、draw.io で図を開くリンクが返されます。

Claude Code

claude mcp add --transport http drawio https://mcp.draw.io/mcp

Claude Code のターミナルでは図をインライン表示できないため、図ごとに app.diagrams.net のリンクが返されます。

Claude Desktop と claude.ai

draw.io は Claude のコネクタディレクトリに掲載されており、ワンクリックで追加できます。Settings → Connectors → Add custom connector を開いて URL を貼り付けることもできます。

Cursor

draw.io の README に従い、~/.cursor/mcp.json または .cursor/mcp.json に追加します。

{
  "mcpServers": {
    "drawio": {
      "url": "https://mcp.draw.io/mcp"
    }
  }
}

VS Code

draw.io の README に従い、.vscode/mcp.json に追加します。

{
  "servers": {
    "drawio": {
      "type": "http",
      "url": "https://mcp.draw.io/mcp"
    }
  }
}

エントリの上にある Start をクリックし、Agent モードの Copilot Chat に図の作成を依頼します。

draw.io MCP Server の主な機能

• draw.io チームの公式サーバーで、mcp.draw.io でホストされ、アカウントは不要。
• MCP Apps ホストでのインラインかつインタラクティブな図（ズーム、パン、レイヤー切り替え、ライトボックス、全画面）。
• Mermaid（フローチャート、シーケンス図、クラス図、状態遷移図、ER 図、ガントチャート、マインドマップ、タイムライン、C4、アーキテクチャ図など）またはネイティブの draw.io XML に対応。
• Mermaid はネイティブに解析・レイアウトされてから draw.io に変換されます。
• XML の図にはオプションで ELK の階層レイアウトを適用可能。
• 約 10,000 の組み込みステンシル（クラウドアーキテクチャ、ネットワーク、Cisco、Kubernetes、BPMN、P&ID、電気）と draw.io アイコンサービスからの図形検索。
• 「Open in draw.io」でフル機能のエディターに引き継ぎ。
• オープンソース（Apache 2.0）で、Node.js、Docker、Cloudflare Workers でセルフホスト可能。

draw.io MCP Server のツール

図の作成。 create_diagram は mermaid か xml のどちらか 1 つだけを受け取って描画します。説明では、Mermaid にヘッダーがある図の種類にはすべて Mermaid を使い、それ以外は XML を使うようモデルに指示しています。オプションには postLayout: "elk" と、XML レイアウト用の direction があります。

リファレンス。 get_drawio_reference は xml または mermaid の生成リファレンスを Markdown で返します。モデルは会話ごと・形式ごとに最初の図の前に 1 回呼び出します。これにより create_diagram の説明を短く保っています。

図形。 search_shapes はキーワードで図形を探し、正確なスタイル文字列、サイズ、タイトルを返します。業界特有の図形、ブランドロゴ、絵的なアイコン向けで、標準的なフローチャートや UML には使いません。

draw.io MCP Server のユースケース

• アーキテクチャ図：「AWS アイコンを使って、ALB、2 つの ECS サービス、RDS データベースからなる AWS アーキテクチャを描いて。」
• コードの説明：「ログインリクエストがこれらのサービスをどう流れるか、シーケンス図にして。」
• データモデリング：「この 3 つのテーブルの ER 図を作って。」
• 計画：「このプロジェクト計画をガントチャートにして。」
• ネットワーク図：「このオフィスネットワークを Cisco の図形で描いて。」
• ブレインストーミング：「製品ローンチのアイデアをマインドマップにして。」

draw.io MCP Server と代替ツールの比較

draw.io は stdio のツールサーバー @drawio/mcp（npx -y @drawio/mcp）も公開しています。こちらは図をインライン描画せず、ブラウザのフル機能の draw.io エディターで開きます。MCP Apps 非対応のホストや、ブラウザのエディターを好む場合に使います。また、仕組みが異なり draw.io チーム製ではないコミュニティ版の Draw.io MCP server もあります。

draw.io MCP Server のトラブルシューティング

• 図がインラインではなくリンクで表示される。 ホストが MCP Apps に対応していません（Claude Code や古い Cursor など）。リンクを開くか、対応ホストを使ってください。
• Cursor で何も描画されない。 インライン描画には Cursor 2.6 以降が必要です。古いバージョンでは stdio の @drawio/mcp サーバーを使ってください。
• モデルが誤った形式で入力を渡す。 xml か mermaid のどちらか 1 つを、オブジェクトや配列ではなくプレーンな文字列で渡してください。
• 図を社外に出せない。 ホスト版のエンドポイントでは図が draw.io のサーバーに送信されます。データを社内に留める必要がある場合は MCP App サーバーをセルフホストしてください。