インストール
$ 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クライアントを再起動して、たとえば「このリポジトリを読んでアーキテクチャを図にして」と頼みます。ブラウザでプレビューが開き、図が描かれていく様子が見えます。
できること
プロジェクトから描く
エージェントは自分のツールでコードやドキュメントを読みます。既存の .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 にあります。