Draw.io MCP server

Draw.io MCP サーバー

English · 簡体中文

最も広く普及している作図ツール、Draw.io（Diagrams.net）で、Vibe Diagramming を楽しみましょう。

主な特長

• Claude Code プラグイン：/plugin marketplace add lgazo/drawio-mcp-server を実行し、続けて /plugin install drawio を実行すると、/drawio-open と /drawio-status のスラッシュコマンドを利用できます。

• npx drawio-mcp-server install <host> を実行すると、claude-code、claude-desktop、codex、zed、opencode、または all の MCP 設定を書き込みます。

• ドキュメントの永続化ツール：set-document-title と save-document。

• Draw.io ライブラリ API のバージョン互換性メカニズム。

• IFrame で Draw.io MCP を有効化

• AWS、GCP、Azure、Cisco19、CiscoSafe のステンシルを、drawio のサイドバーから実行時に自動検出

• list-documents と target_document セレクターによる複数ドキュメントの指定で、マルチタブのワークフローに対応

• ページ単位のツールで必須の target_page セレクターを使用した、複数ページの指定

• ライブ操作はドキュメントごとに FIFO で直列化されるため、複数のエージェントが異なるファイルを安全に扱えます

• ページ管理ツール：list-pages、get-current-page、create-page、copy-page、rename-page

• Mermaid の図をインポート、埋め込み、または展開

• Firefox のサポートが復活しました。TLS モードが必要です。

• サーバーは TLS モードに対応し、自己署名証明書を任意で生成できます。

• XML、SVG（XML 埋め込み）、PNG（XML 埋め込み）から図をインポート／エクスポート

• ウェイポイントによるエッジのジオメトリ制御と、自動セルフコネクターのルーティング

• 入れ子の図形やグループ化のための親子関係

• サーバーと拡張機能を同じモノレポに統合

• Draw.io エディターを内蔵 — ブラウザー拡張機能は不要

• AI エージェントが Draw.io の図を操作できる MCP サーバー

• MCP ツールによる図のプログラム作成、検査、変更

• 複雑な図のためのレイヤー管理

• あらゆる MCP クライアント（Claude Desktop、Claude Code、Zed、Codex など）で動作

はじめに

Draw.io MCP サーバーは、Draw.io の作図機能を AI エージェントで利用できるようにします。図の要素を作成、読み取り、更新、削除できる MCP ツールを提供し、AI アシスタントがアーキテクチャ図、フローチャート、ビジュアルドキュメントを自動で作成できるようにします。

利用方法は 2 通りあります。

1. 内蔵エディター - サーバーが Draw.io を直接ホストし、ブラウザーからアクセスできます
2. ブラウザー拡張機能 - 拡張機能を介して、ブラウザーで実行中の Draw.io に接続します

実験的機能：draw.io デスクトップ（Electron）アプリとの統合は現在開発中ですが、上流の CSP の問題により作業が停止しています。詳しくは DESKTOP.md をご覧ください。

要件

• Node.js（v22 以上。v22 LTS および v24 LTS でテスト済み）- MCP サーバーのランタイム環境
• MCP クライアント - Claude Desktop、Claude Code、Zed、Codex、OpenCode、または MCP 互換のホスト

組み込みエディターの場合

追加の要件はありません。--editor フラグを指定するだけで、すぐに使用できます。

ブラウザー拡張機能の場合

• ブラウザー拡張機能 - drawio-mcp-extension
• ブラウザーで Draw.io を開いておく必要があります

オプション

• pnpm - 推奨のパッケージマネージャー（npm も問題なく使えます）

クイックスタート

1. MCP ホストを設定する

最速の方法：

• Claude Code： /plugin marketplace add lgazo/drawio-mcp-server に続けて /plugin install drawio を実行します。
• その他のホスト： npx drawio-mcp-server install <host> を実行します。<host> には claude-code、claude-desktop、codex、zed、opencode、または all を指定します。

詳細なリファレンス、フラグ、アンインストール方法については docs/PLUGINS.md を、リリースの作成方法については docs/release.md を参照してください。

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "drawio-mcp-server", "--editor"]
    }
  }
}

その他の MCP クライアントや詳細な設定（pnpm のオプションを含む）については、Configuration を参照してください。

2. エディターを開く

MCP ホストを再起動した後、次の URL を開きます：http://localhost:3000/

3. 図の作成を始める

試してみることができるプロンプトの例：

「プロデューサー、コンシューマー、および3つのバックエンドサービスを含むメッセージキューを示す、イベント駆動型アーキテクチャの図を作成してください」

「3ページ構成のイベント駆動型アーキテクチャの図を作成してください。サービスのトポロジー、メッセージフロー、リトライ／障害処理をそれぞれ担当する3つのエージェントを並行して使い、各エージェントには個別の対象ページを割り当ててください。」

「データベース、API ゲートウェイ、エンドポイントを示す4つのマイクロサービスを含む CRUD API の図を描いてください」

「『Background』という新しいレイヤーを追加して、装飾要素をすべてそこに移動し、その後、注釈用の新しいレイヤーを作成してください」

AI アシスタントは MCP ツールを使って図を操作できるようになりました。

機能

このサーバーは、次の MCP ツールを提供します。

• ドキュメントの検出 - 接続された Draw.io ドキュメントのインスタンスを一覧表示し、以降の呼び出しを特定のタブ／ファイルのインスタンスに振り分けます
• 図の確認 - 図形、ページ、レイヤー、セルのプロパティを読み取ります
• 図の変更 - 対象ページ上の図形、エッジ、ラベルを追加、編集、削除します
• ページ管理 - ページの一覧表示、現在のページの確認、ページの作成、コピー、名前変更を行います。対応するランタイムでは、表示中のページを強制的に切り替えません
• レイヤー管理 - レイヤーの作成、切り替え、整理を行います
• ベンダー図形の対応 - AWS、GCP、Azure、Cisco19、CiscoSafe のステンシルを、実行時に drawio のサイドバーから自動検出します。これにより、エージェントは手作業で整備したカタログがなくても、mxgraph.gcp2.cloud_run や mxgraph.cisco19.router などのアイコンを配置できます
• 組み込み TLS — オプトインで HTTPS + WSS を有効にできます。手動の証明書／キーを使用するか、ユーザーごとのローカル CA を使って自己署名証明書を自動生成できます。CONFIG.md → TLS を参照してください。

利用可能なツールの一覧については、Tools Reference を参照してください。

インストール

このサーバーは MCP ホストの一部として実行されます。npm および pnpm のオプションを含む、サポート対象のすべてのクライアント（Claude Desktop、Claude Code、Zed、Codex、oterm）の詳細な設定については、Configuration を参照してください。

代替方法：ブラウザー拡張機能

組み込みエディターの代わりに、ブラウザー拡張機能を使用して、ブラウザーで実行中のDraw.ioに接続できます。--editorフラグの有無にかかわらず動作します。

1. ブラウザーでDraw.ioを開きます
2. Draw.io MCP Browser Extensionをインストールします。
   • Chrome ウェブストア
   • Firefox アドオン
3. 拡張機能が接続されていることを確認します（アイコンに緑色のシグナルが重ねて表示されます）。

--editorを指定しない場合の設定：

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

詳細については、拡張機能のドキュメントを参照してください。

実験的機能：Draw.io Desktop

draw.io desktop（Electron）アプリとの連携は実験的で、現在、上流のCSPの問題によりエンドツーエンドで動作しません。プラグインはdraw.io desktop内で読み込まれますが、MCPサーバーへのWebSocket接続は、draw.ioにハードコードされたconnect-src 'self'ポリシーによって拒否されます。

セットアップ手順の全容と現在の制限事項については、DESKTOP.mdを参照してください。

関連リソース

設定 - CLIフラグと高度なオプション

ツールリファレンス - MCP ツールの完全なドキュメント

トラブルシューティング

プロンプトの例

コントリビューション

アーキテクチャ

開発

Draw.io Desktop（実験的） - インストール先と既知のCSP制限

スターの履歴

評価