インストール
$ claude mcp add --scope user drawio -- npx @next-ai-drawio/mcp-server@latest--scope user を付けると、すべてのプロジェクトでツールを使えます。付けないと、コマンドを実行したフォルダでしか使えません。
Claude Code のコミュニティマーケットプレイスから、プラグインとしてもインストールできます（Claude Code 2.1.275 以降）。
/plugin install next-ai-drawio --marketplace anthropics/claude-plugins-community$ codex mcp add drawio -- npx @next-ai-drawio/mcp-server@latestCodex は図を変更する drawio ツールを呼ぶたびに確認を求め、フルアクセスなしの codex exec は「MCP tool call requires approval」で失敗します。drawio ツールを確認なしで実行させるには、~/.codex/config.toml のこのサーバーのセクションに 1 行追加します。
[mcp_servers.drawio]
command = "npx"
args = ["@next-ai-drawio/mcp-server@latest"]
default_tools_approval_mode = "approve"一部のツールだけ許可するには、代わりに [mcp_servers.drawio.tools.<ツール名>] に approval_mode = "approve" を設定します。
または .vscode/mcp.json に手で書きます。
{
"servers": {
"drawio": { "type": "stdio", "command": "npx", "args": ["@next-ai-drawio/mcp-server@latest"] }
}
}または ~/.cursor/mcp.json、claude_desktop_config.json、cline_mcp_settings.json など、クライアントの MCP 設定に手で書きます。
{
"mcpServers": {
"drawio": { "command": "npx", "args": ["@next-ai-drawio/mcp-server@latest"] }
}
}Claude Code、Codex、Cursor、VS Code、Cline など、ファイルを編集してコマンドを実行できるエージェントに、次の文を貼り付けます。
https://raw.githubusercontent.com/DayuanJiang/next-ai-draw-io/main/packages/mcp-server/README.md
に従って、いま使っているクライアントに drawio MCP サーバーをインストールして。
すべてのプロジェクト向けに（ユーザースコープ、Claude Code なら "--scope user"）、
サーバー名は "drawio" にして、設定済みのサーバーは残して。
そのあと、ツールが表示されるように再読み込みする方法を教えて。クライアントを再起動して、たとえば「このリポジトリを読んでアーキテクチャを図にして」と頼みます。ブラウザでプレビューが開き、図が描かれていく様子が見えます。
できること
プロジェクトから描く
エージェントは自分のツールでコードやドキュメントを読みます。既存の .drawio や .drawio.svg ファイルも開けます。
変更はすべてバージョンに
AI の変更は数秒間枠で示され、Ctrl+Z 一回で取り消せます。直近 20 のバージョンがキャンバスの横に並び、復元や比較ができます。
あなたと AI で同じキャンバスを
いつでも手で編集でき、図形を選んで「これ」と指示することもできます。AI は次に編集する前にあなたの変更を読み取ります。
本物のアイコン
Web 版と同じ描画ルールと、AWS、Azure、GCP、Kubernetes、Cisco などの図形ライブラリを使うので、AI は実在するアイコン名を使います。
仕上がりを自分で確認
AI は描画結果のスクリーンショットを見て、重なった図形を直せます。
書き出し、オフライン、保存
.drawio、.png、.svg、.drawio.svg で保存できます。draw.io エディタを同梱しているのでオフラインでも動き、図は保存されるので後の会話で続きを描けます。
draw.io MCP サーバーの選び方
draw.io の図を描ける MCP サーバーはいくつかあります。2026 年 10 月時点での違いは次のとおりです。
| サーバー | 図の見方と変え方 | 向いている場面 |
|---|---|---|
このサーバー @next-ai-drawio/mcp-server | 図の見方と変え方ブラウザのライブ draw.io キャンバス。AI は手での編集や選択も含めてキャンバスを読み取れます。AI の変更は枠で示され、Ctrl+Z で取り消せ、以前のバージョンも復元できます | 向いている場面あなたと AI が交互に同じ図を直していくとき |
draw.io 公式の @drawio/mcp | 図の見方と変え方XML、CSV、Mermaid から作った図を、新しいタブの draw.io エディタで開きます。図を読み取るツールはありません | 向いている場面完全な draw.io エディタで、自分で編集を続けたいとき |
draw.io がホストする MCP アプリ https://mcp.draw.io/mcp | 図の見方と変え方Claude.ai、ChatGPT、VS Code、Cursor のチャット内に図を表示します。インストール不要で、図は draw.io のサーバーに送られます | 向いている場面チャットアプリで作業していて、会話の中で図を見たいとき |
| Claude Code、Codex CLI、Copilot CLI 向けの draw.io プラグイン | 図の見方と変え方.drawio ファイルを書き出すスキルです。PNG、SVG、PDF への書き出しには draw.io Desktop が必要です | 向いている場面MCP サーバーなしで、リポジトリに図のファイルを置きたいとき |
lgazo/drawio-mcp-server | 図の見方と変え方localhost の draw.io エディタか、ブラウザ拡張機能経由で自分の draw.io を使います。図形、レイヤー、ページを 1 つずつ作成、読み取り、更新、削除するツールがあります | 向いている場面細かいツール、複数ドキュメントの同時操作、Mermaid の読み込みが必要なとき |
ツール
| ツール | 内容 |
|---|---|
start_session | プレビューを開き、描画ガイドを返します。session_id で保存済みの図の続きを描けます |
create_new_diagram | mxCell の XML から新しい図を描きます |
edit_diagram | id を指定してセルを追加、更新、削除します。すべて成功するか、何も変更しません |
get_diagram | ブラウザでの編集を含む、現在の XML |
get_selection | プレビューで選択している図形 |
screenshot_diagram | AI が確認するための、ページの PNG |
load_diagramexport_diagram | .drawio や .drawio.svg ファイルを開きます。.drawio、.png、.svg、.drawio.svg で保存します |
restore_version | 以前のバージョンに戻します。やり直しもできます |
list_saved_diagrams | 以前のセッションで保存した図。新しい順 |
get_drawing_guideget_shape_library | 描画ルールをもう一度取得します。aws4 などのライブラリのアイコンスタイルを取得します |
list_pagesadd_pagerename_pagedelete_page | ページ（タブ） |
設定とトラブルシューティング
環境変数、独自の描画ルール、セルフホストの draw.io、よくある問題の対処法は、ドキュメントと README にあります。