AI に図を描かせるなら draw.io 公式の MCP サーバーか Claude Code プラグインで、編集できる .drawio にする

draw.io 公式の MCP サーバー（@drawio/mcp）を入れると、AI が XML・CSV・Mermaid から図を作り、draw.io のエディタで開ける。Claude Code なら公式プラグインで .drawio ファイルを直接作らせ、PNG／SVG／PDF にも書き出せる。インストールしたくない時は、claude.ai のプロジェクト指示だけで済ませる方法もある。

どんな時に使う？

構成図やフロー図を AI に下書きさせ、あとで人が手で直したい
Mermaid の図をそのまま編集可能な形にしたい

手順

Claude Code（MCP）: claude mcp add drawio -- npx -y @drawio/mcp
Claude Code（プラグイン、.drawio ファイルを作る）:
```
/plugin marketplace add jgraph/drawio-mcp
/plugin install drawio@drawio
```
Mermaid の変換、ELK の自動レイアウト、PNG／SVG／PDF の書き出しには draw.io Desktop が要る。XML の .drawio やブラウザで開く URL だけなら不要
VS Code（Copilot）: .vscode/mcp.json の servers に {"drawio": {"command": "npx", "args": ["-y", "@drawio/mcp"]}}。VS Code 1.109 以降はホスト版 https://mcp.draw.io/mcp（"type": "http"）でチャット内に図を表示できる
インストールなし: リポジトリの project-instructions を claude.ai のプロジェクト指示に入れる

注意点

ホスト版 MCP（mcp.draw.io）を使うと、図の内容が draw.io のサーバーに送られる。社外秘の構成図はローカルの方法を使う
プラグインの更新は手動: claude plugin marketplace update drawio → claude plugin update drawio@drawio → 再起動

出典

@drawio · 2026-02-10
npm @drawio/mcp（v1.10.1）: npmjs.com
リポジトリ: github.com/jgraph/drawio-mcp