MCP サーバーを使うと、Claude Code がプロジェクトのファイルをもとに draw.io の図を描けます。図はブラウザのライブキャンバスに表示されます。これは Web アプリと同じキャンバスで、手で編集でき、Claude は次に図を変更する前に手での編集を読み取ります。

インストール

Node.js 18 以降が必要です。ターミナルで次を実行します。

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

新しい Claude Code セッションを開始します。接続されると、/mcp の一覧に drawio が表示されます。

Codex、VS Code、Cursor などのクライアントについては、MCP サーバーの README を参照してください。

最初の図を描く

Claude が読めるものについて、図を頼みます。

このリポジトリを読んでアーキテクチャを図にして

Claude は自分のツールでコードを読み、ブラウザでプレビューを開いて、そこに図を描きます。大きな図は何回かに分けて描かれるので、図ができあがっていく様子が見えます。

ほかにも、次のような頼み方がうまくいきます。

claude

手で編集する：プレビューは機能のそろった draw.io エディタです。図形を動かしたり、ラベルやスタイルを変えたりできます。Claude は次に編集する前に、手での変更も含めて図を読み取ります。
図形を指し示す：プレビューで図形を選び、「これらを青にして」「これを 2 つのサービスに分けて」のように伝えます。Claude は選択した図形を読み取ります。
変更を確認する：Claude の変更は数秒間枠で示されます。プレビューで Ctrl+Z を押すと、最後の変更を取り消せます。
さらにさかのぼる：直近 20 のバージョンがキャンバスの横にカードとして並び、比較や復元ができます。Claude に取り消しを頼むこともできます。

変更はすべて、直近 20 のバージョンとともに ~/.next-ai-drawio/<session-id>.drawio に保存され、最新の 50 個の図が残ります。後の会話で図の続きを描くには、Claude にその図を頼みます。Claude が保存済みの図を見つけて開き直します。

ファイルが必要なときは、Claude にエクスポートを頼みます。形式は .drawio、.png、.svg、.drawio.svg です。.drawio.svg ファイルは draw.io でも開いて編集できる画像なので、README ファイルに向いています。

~/.next-ai-drawio/instructions.md に書きます。たとえば「常にミニマルなスタイルを使う」です。ルールは呼び出しのたびに描画ガイドに追加されるので、変更は再起動しなくても反映されます。使われるのは最初の 5000 文字です。

環境変数でサーバーの動作を変えられます。サーバーを追加するときに -e で渡します。

claude mcp add --scope user drawio -e DRAWIO_LANG=ja -- npx @next-ai-drawio/mcp-server@latest

変数	既定値	内容
`PORT`	`6002`	プレビューのポート。使用中の場合は、6020 までの空いている次のポートを使います
`DRAWIO_DATA_DIR`	`~/.next-ai-drawio`	保存した図と `instructions.md` のフォルダ。`off` にすると保存しません
`DRAWIO_AUTO_SCREENSHOT`	未設定	`true` にすると、作成と編集の結果すべてにスクリーンショットを付けます（1 回の呼び出しで 2 秒から 10 秒かかります）
`DRAWIO_LANG`	未設定	エディタとプレビューの言語を固定します：`en`、`zh`、`zh-tw`、`ja`、`de` など
`DRAWIO_DARK`	`auto`	`1` はダーク、`0` はライトで起動し、`auto` はシステムに合わせます
`BROWSER`	未設定	`none` にすると、プレビューを自動では開きません

すべての変数と、セルフホストした draw.io を使う方法は、MCP サーバーの README にあります。

プレビューが開かない：Claude にプレビューの URL を聞いて、自分で開いてください。URL の ?mcp= の部分が、ページをセッションにつなぎます。
VS Code の Simple Browser や Cursor のブラウザでプレビューが真っ白になる：このページはほかのページへの埋め込みを拒否します。通常のブラウザで URL を開いてください。
スクリーンショットや PNG/SVG のエクスポートがタイムアウトする：これらはプレビューのタブが描画しており、ブラウザはバックグラウンドのタブの処理を遅くします。タブを前面に出して、もう一度試してください。
「No active session」：Claude が先にセッションを開始する必要があります。drawio のセッションをもう一度開始するよう Claude に頼んでください。