draw.io

Draw.io MCP サーバー

LLM が draw.io エディターで図を作成して開けるようにする、公式の draw.io MCP（Model Context Protocol）サーバーです。

▶ 動画を見る。drawio.com/mcp で AI アシスタントに draw.io をセットアップできます。

図を作成する 4 つの方法

このリポジトリでは、draw.io を AI アシスタントと連携する 4 つの方法を紹介しています。環境に合った方法を選んでください。

	MCP App Server	MCP Tool Server	アシスタントプラグイン	プロジェクトの指示
仕組み	チャット内に図をインライン表示します	ブラウザーで図を開きます	.drawio ファイルを生成し、必要に応じて PNG／SVG／PDF にエクスポートするか、ブラウザー URL を生成します	Claude が Python 経由で draw.io URL を生成します
図の出力	会話に埋め込まれたインタラクティブビューアー	新しいタブで開く draw.io エディター	.drawio、.drawio.png／.svg／.pdf、またはブラウザー URL	draw.io へのクリック可能なリンク
インストールが必要	いいえ（mcp.draw.io でホストされています）	はい（npm パッケージ）	1 行のプラグインインストール（PNG／SVG／PDF へのエクスポートには draw.io Desktop のみ必要）	いいえ — 指示を貼り付けるだけです
XML、CSV、Mermaid に対応	XML と Mermaid	✅ すべてに対応	XML と Mermaid（Mermaid には draw.io Desktop が必要）	✅ すべてに対応
draw.io で編集可能	「draw.io で開く」ボタンから	✅ 直接編集可能	✅ 直接編集可能	リンク経由
対応環境	Claude.ai、ChatGPT、VS Code、Cursor、GitHub Copilot CLI、その他の MCP Apps ホスト	Claude Desktop、Cursor、OpenCode、その他の MCP クライアント	Claude Code、Codex CLI、GitHub Copilot、Cursor、Antigravity、OpenCode	Claude.ai（Projects を使用）
最適な用途	チャット内でのインラインプレビュー	ローカルのデスクトップワークフロー	ローカルでの開発ワークフロー	すばやいセットアップ、インストール不要

---

ガイド

プロンプトや例を試して確認したユーザーガイドは draw.io のドキュメントにあります。各アシスタントのセットアップ方法は drawio.com/mcp をご覧ください。

• プロンプトを書く: Mermaid または draw.io XML、速度、モデル
• 図の種類と例 と すべての図の種類を掲載したギャラリー
• 図を変更してスタイルを設定する: プロンプトによる変更、カラーテーマ、スタイル
• インストール方法と出力形式
• 図ビューアー

ギャラリーは docs/images/gallery/gallery.json と、その隣にある編集可能なライトモードおよびダークモードの SVG から生成されます。drawio.com はサイトのビルド時にこれらを読み込みます。

MCP アプリサーバー

MCP アプリサーバーは、MCP Apps プロトコルを使用して、AI チャットインターフェース内に draw.io の図をインラインで表示します。ブラウザーのタブを開く代わりに、図がインタラクティブな iframe として会話に直接表示されます。

公式のホスト型エンドポイントは次のとおりです。

https://mcp.draw.io/mcp

この URL を、Claude.ai、ChatGPT、VS Code（GitHub Copilot）、Cursor、GitHub Copilot CLI、または MCP Apps 対応ホストのリモート MCP サーバーとして追加できます。インストールは不要です。Claude.ai では、draw.io はコネクターディレクトリにも掲載されており、そこからワンクリックで追加できます。Cursor（≥ 2.6）では、図がエージェントチャット内にインラインで表示されます（ワンクリックインストール）。それ以前のビルドでは、代わりに stdio の @drawio/mcp ツールサーバーを使用してください。GitHub Copilot CLI では、copilot mcp add --transport http drawio https://mcp.draw.io/mcp を実行してください。ターミナルでは図をインライン表示できないため、draw.io で各図を開くリンクが返されます。

Node.js または jgraph/drawio-mcp Docker イメージを使用してサーバーをローカルで実行することも、独自のインスタンスを Cloudflare Workers にデプロイすることもできます。

ツール：

• create_diagram — draw.io XML または Mermaid（28 種類の図）を、チャット内にインタラクティブな図として表示します
• search_shapes — キーワードを使って、すべての draw.io ライブラリ（AWS、Azure、GCP、P&ID、電気、Cisco、Kubernetes、UML、BPMN など）にある 10,000 種類以上の図形を検索します。組み込みライブラリに適切な候補がない場合は、draw.io アイコンサービス（ブランドロゴや汎用的な概念アイコン）も検索します。XML に直接使用できる正確なスタイル文字列を返します。create_diagram を呼び出す前に、適切な図形を探すために使用してください。
• get_drawio_reference — XML または Mermaid の生成リファレンスを返します。このリファレンスは、モデルが各形式で最初の図を生成する前に一度読み込みます。

ドキュメント全文 →

Note: 図は、Claude.ai、ChatGPT、GitHub Copilot 搭載の VS Code、Cursor など、MCP Apps 拡張に対応するホストでインライン表示されます。GitHub Copilot CLI など、その他のホストでもツールは動作し、draw.io で図を開くリンクを返します。

---

MCP ツールサーバー

図を draw.io エディターで直接開く、従来の MCP サーバーです。XML、CSV、Mermaid.js 形式に対応し、ライトボックスとダークモードのオプションを備えています。npm では @drawio/mcp として公開されています。

クイックスタート：npx @drawio/mcp

Claude Desktop、Claude Code、VS Code（GitHub Copilot）、Cursor（ワンクリックインストール対応）、OpenCode のセットアップ手順を利用できます。

ドキュメント全文 →

---

アシスタント向けプラグイン（Claude Code、Codex CLI、GitHub Copilot）

AI コーディングアシスタント向けにプラグインとしてパッケージ化された drawio スキルです（plugins/）。ネイティブの .drawio ファイルを生成し、オプションで PNG、SVG、PDF にエクスポートできます（エクスポートしたファイルには XML が埋め込まれるため、draw.io で編集できます）。または、app.diagrams.net で図を直接開くブラウザー URL を生成します。Claude Code と Cursor のプラグインにはホスト型の MCP App Server も同梱されているため、ホストが対応していれば図がインラインで表示されます。Codex と Copilot のポートでは MCP の設定は不要です。同じスキルを4つのホスト向けに提供しています。

Claude Code（全ドキュメント →）— このリポジトリのマーケットプレイスからインストールします。

/plugin marketplace add jgraph/drawio-mcp
/plugin install drawio@drawio

または、ローカルにクローンしたリポジトリから claude --plugin-dir ./plugins/claude-code を使って直接読み込むこともできます。

Codex CLI（全ドキュメント →）— 同じマーケットプレイスリポジトリからインストールします。

codex plugin marketplace add jgraph/drawio-mcp
codex plugin add drawio@drawio

GitHub Copilot CLI（全ドキュメント →）— 同じマーケットプレイスリポジトリからインストールします。

copilot plugin marketplace add jgraph/drawio-mcp
copilot plugin install drawio@drawio

その他の Copilot の環境（VS Code エージェントモード、コーディングエージェント、コードレビュー）では、代わりにリポジトリの .github/skills/ ディレクトリから同じスキルを読み込みます。詳しくはプラグインの READMEをご覧ください。

Cursor（全ドキュメント →）— 同じスキルにホスト型の MCP App Server を加えたもので、図を Cursor のエージェントチャット内にもインラインで描画します。Cursor Marketplace（Customize → drawio → Install）からインストールするか、plugins/cursor を ~/.cursor/plugins/local/drawio にコピーしてウィンドウを再読み込みしてください。

Antigravity（全ドキュメント →）— GitHub 上のプラグインのディレクトリからインストールします。

agy plugin install https://github.com/jgraph/drawio-mcp/tree/main/plugins/antigravity

OpenCode ではプラグインは不要です。.opencode/skills/ と .claude/skills/（および ~/ 以下の同等のディレクトリ）にあるスキルを検出するため、Claude Code のスキルフォルダーをそのまま使用できます。1行でインストールする方法は、OpenCode（プラグイン不要）をご覧ください。

デフォルトでは、プラグインは .drawio ファイルを書き込み、draw.io で開きます。出力形式を変更するには、リクエストに形式を指定してください。

• png / svg / pdf — draw.io デスクトップ CLI を使って --embed-diagram を指定し、エクスポートします
• url — Node.js 組み込みの zlib で XML を圧縮し、結果を app.diagrams.net で開きます。draw.io Desktop は不要です。.drawio ファイルは永続的なコピーとしてローカルに保持されます。

---

代替方法：プロジェクトの指示（MCP 不要）

何もインストールせずに使える代替方法です。Python コード実行を使って draw.io URL を生成するよう Claude に教える指示を Claude Project に追加します。MCP サーバーもデスクトップアプリも不要です。貼り付けるだけですぐに使えます。

全ドキュメント →

---

ダイアグラムのレイアウト

AI がダイアグラムを生成した後に実行できる、任意かつ独立したレイアウト処理が 2 つあります。1 つはノードを再配置し、もう 1 つはエッジの経路のみを引き直します。利用できる処理はアプローチによって異なります。

レイアウト処理	機能	App Server（create_diagram）	Tool Server（open_drawio_xml）	アシスタントプラグイン	プロジェクトの指示
ELK 自動レイアウト（postLayout: "elk"）	ノードを整然とした階層レイアウトに再配置し、その一環としてエッジの経路も設定します	✅	—	draw.io Desktop CLI（--layout）経由で対応	—
libavoid によるルーティング（routing: "libavoid"）	ノードの位置を維持し、コネクターを図形の周囲に沿って直交するように引き直します	✅	✅ v1.3.0 以降	draw.io Desktop CLI（--layout libavoid）経由で対応	—

• これらは draw.io XML ダイアグラムに適用されます。Mermaid ダイアグラムはすでに自動でレイアウトされるため、どちらの処理も必要ありません。
• App Server はダイアグラムのレンダリング後にインラインビューアーでこれらを適用します。Tool Server は draw.io エディターを開く前にサーバー側で libavoid を適用します。プラグインはローカルにインストールされた draw.io Desktop CLI を通じて処理します。
• いずれか一方を選んでください。両方は使用しないでください。ELK はすでに独自にエッジの経路を設定するため、その上に libavoid を追加しても重複になります。レイアウトを再配置するには postLayout を、意図的に配置したレイアウト上のコネクターを整えるには routing を使用します。

---

データの保管場所とオフラインでの使用

厳格なデータ制限のある環境にデプロイする場合、各アプローチでダイアグラムのデータがどこに送られるかを正確に説明します。

どのコンポーネントも、ダイアグラムをクラウドのラスタライザーに送信しません。 このリポジトリでは convert.diagrams.net（またはクラウドのエクスポートエンドポイント）はどこからも呼び出されず、「ローカルの依存関係がない場合にクラウドへフォールバックする」経路もありません。PNG／SVG／PDF のエクスポートはアシスタントプラグインでのみ行われます。プラグインはローカルにインストールされた draw.io Desktop CLI（which drawio で場所を特定）をシェルから呼び出します。インストールされていない場合は .drawio ファイルが保持され、データは送信されません。

ダイアグラムはマシンの外部に送信されますか？

アプローチ	ダイアグラムはマシンの外部に送信されますか？
MCP App Server — ホスト型（mcp.draw.io）	はい — MCP リクエストとして draw.io サーバーに送信されます。ローカルに保つには、代わりにセルフホストしてください（下記参照）。
MCP App Server — セルフホスト（ローカルの Node、jgraph/drawio-mcp Docker イメージ、または独自の Cloudflare）	いいえ — サーバーで処理され、クライアント側でレンダリングされる HTML に埋め込まれます。
MCP Tool Server（@drawio/mcp）	いいえ — URL の #fragment に含まれます。この部分はブラウザーからサーバーに送信されません。
アシスタントプラグイン（Claude Code、Codex CLI、GitHub Copilot、Cursor、Antigravity）	いいえ — ローカルに書き込まれ、ローカルの draw.io Desktop CLI によってエクスポートされます。ただし、Claude Code と Cursor のプラグインにはホスト型 App Server も含まれています。このサーバーで作成したダイアグラムは mcp.draw.io に送信されます（上の行を参照）。

デフォルトでは、サーバーはダイアグラムの内容をログに記録せず、リクエストのメタデータ（メソッド、セッション、ステータス、所要時間）のみを記録します。Cloudflare でホストされた App Server がレスポンス本文をログに記録するのは、DEBUG=true を指定して実行した場合のみです。

外部リクエストの削減

図自体はローカルに保存されますが、レンダリング時にはデフォルトで app.diagrams.net と viewer.diagrams.net から draw.io のウェブアプリ／ビューアーのコードが読み込まれます。これらが取得するのはアプリケーションのコードとアセットであり、図ではありませんが、それでも外部へのリクエストは発生します。リクエストを減らす、またはなくすには、次の方法があります。

• アプリサーバー： VIEWER_PATH 環境変数を指定してビルドすると、viewer.diagrams.net から読み込む代わりにビューアーをインライン化できます。サーバー側では、起動時と毎日、viewer.diagrams.net にバージョン確認を行います（データは送信せず、タイムアウトは 5 秒で、安全にブロックできます）。また、DRAWIO_ICON_SERVICE_URL=off を指定しない限り、search_shapes は検索語を使って icons.diagrams.net に問い合わせます。
• ツールサーバー： DRAWIO_BASE_URL 環境変数にセルフホスト可能な draw.io インスタンスを指定します。サーバー側の 2 つの処理でも、draw.io のリリースごとに 1 回、viewer.diagrams.net からコードを取得し、ユーザーごとにキャッシュします。対象は libavoid のルーティングコア（routing: "libavoid"。インストール時にも事前取得されます）と drawio-elk バンドル（postLayout: "elk"。初回使用時に取得され、DRAWIO_ELK_URL で変更できます）です。これらの処理を要求しなければ、このようなリクエストは発生しません。いずれの場合も、図がリクエストに含まれることはありません。
• アシスタントプラグイン： オプトインの url 出力モードでは、図を app.diagrams.net で開きます（URL はハードコードされており、DRAWIO_BASE_URL に相当する設定はありません）。このリクエストを避ける必要がある場合は、デフォルトの .drawio 出力を使うか、ローカルのデスクトップアプリからエクスポートしてください。

LLM は別途考慮が必要です

図は LLM によって生成されます。ホスト型モデルを使う場合、この MCP サーバーをどこで実行していても、図の内容はプロバイダーのクラウド上で生成されます。エンドツーエンドの隔離には、ローカルでホストされたモデルも必要です。

確認方法

デプロイ環境から外部への呼び出しが一切ないことを確認する確実な方法は、ネットワークの外向き通信をブロックした状態で実行する（またはブラウザーの Network タブを監視する）ことです。そのうえで、引き続きレンダリングできることを確認してください。厳格な隔離が必要なデプロイでは、この方法をおすすめします。

---

XML リファレンス（信頼できる唯一の情報源）

エッジのルーティング、コンテナー、レイヤー、タグ、メタデータ、ダークモード、スタイルプロパティ、XML の整形式性を網羅した、draw.io XML 生成リファレンスは、単一の正規ファイルにまとめられています。

shared/xml-reference.md

上記 4 つのアプローチはすべて、LLM プロンプトの信頼できる唯一の情報源としてこのファイルを使用します。

アプローチ	リファレンスへのアクセス方法
MCP アプリサーバー	起動時／ビルド時にファイルを読み込み、get_drawio_reference ツールから返します
MCP ツールサーバー	起動時にファイルを読み込み（リポジトリ内のファイル、または prepack による同梱コピー）、get_drawio_reference ツールから返します。open_drawio_xml の説明には、要約版の shared/xml-essentials.md が含まれます
アシスタントプラグイン（Claude Code、Codex CLI、GitHub Copilot）	GitHub の raw URL から要約版の shared/xml-essentials.md を取得します。レイヤー、タグ、メタデータ、テーブル、部門横断グリッド、ダークモードの色を扱う場合に限り、完全版を取得します
プロジェクトの指示	ユーザーは要約版の shared/xml-essentials.md を Claude Project にコピーし、該当するトピックが必要な場合に限り、完全版を使用します

XML 生成のガイダンスを更新するときは、shared/xml-reference.md を編集してください。変更はすべての利用箇所に自動的に反映されます。変更が shared/xml-essentials.md に要約されているルールに関わる場合は、そちらの該当箇所も更新してください。

---

図形検索インデックス

search_shapes ツールは、すべての draw.io 図形を含む事前構築済みインデックスを使用します。このインデックスは、ライブの draw.io クライアント（https://app.diagrams.net/js/app.min.js）を元に、jsdom を介して Node.js ですべてのサイドバーパレットの初期化を実行し、図形データを取得して生成されます。

draw.io アイコンサービス（icons.diagrams.net — エディターのサイドバーと同じグループ化されたアイコン検索）は、このインデックスには含まれません。ローカルインデックスにクエリとの強い一致がない場合、search_shapes はサービスにライブで問い合わせ、shape=image スタイルのアイコンを返します。エンドポイントを上書きするには DRAWIO_ICON_SERVICE_URL にセルフホストのサービスを設定し、アイコンの補完を無効にするには off を設定してください。

shape-search/search-index.json はリポジトリにコミットされています。Update Shape Search Index GitHub Action は、draw.io のリリースごとに（ビルドが完了すると drawio-dev が drawio-release をディスパッチします）、リリース済み draw.io クライアントからインデックスを再生成します。また、フォールバックとして毎日再生成し、図形に変更があった場合はプルリクエストを作成します。マージされると、ツールサーバーは CDN からインデックスを取得します。ホストされたアプリサーバーにはインデックスがバンドルされているため、デプロイが必要です。

インデックスを手動で再生成するには（たとえば、ジェネレーター自体を改良している場合）：

cd shape-search
npm install
npm run generate

# Rebuild the MCP App Server worker to embed the updated index
cd ../mcp-app-server
npm run build:worker

ジェネレーターは公開されている draw.io ウェブアプリから app.min.js を直接取得するため、draw.io ソースのローカルチェックアウトは不要です。

---

開発

# MCP App Server
cd mcp-app-server
npm install
npm start

# MCP Tool Server
cd mcp-tool-server
npm install
npm start

関連リソース

• draw.io - 無料のオンライン図表エディター
• draw.io Desktop - デスクトップアプリケーション
• @drawio/mcp on npm - npm 上のこのパッケージ
• drawio-mcp on GitHub - ソースコードリポジトリ
• Mermaid.js Documentation
• MCP Specification
• MCP Apps Extension