Claude Code×draw.io MCPの設定方法｜公式コマンド1行で構成図を自動生成

先に答えを書きます。Claude Code に draw.io の公式MCPサーバをつなぐなら、ターミナルで次の1行を打てば終わりです。

claude mcp add drawio -- npx -y @drawio/mcp

ここで1つ、つまずきやすいところがあります。ネットの解説（この記事の旧版も含みます）には @jgraph/drawio-mcp というパッケージ名が出てきますが、この名前はnpmに存在しません（2026年10月5日にnpmの公開レジストリで確認）。公式のパッケージは @drawio/mcp です。コピペして「起動しない」と止まっていた方は、ここを直すだけで動くはずです。旧版で間違った名前を載せていました。すみません。

この記事は、draw.io の開発元が公開している公式リポジトリ（jgraph/drawio-mcp）と Claude Code の公式ドキュメントをもとに、設定・つながったかの確認・構成図を作らせる頼み方を順番にまとめたものです。

1. まず「どの方式で使うか」を決める
2. 設定は2通り。コマンド1行か、設定ファイルか
1. いちばん簡単なのはコマンド1行
2. ファイルで管理したいなら設定ファイル
3. つながったかを確かめる
4. 構成図を描かせる頼み方
5. まとめ：最初の1行だけ、公式の名前で

1. まず「どの方式で使うか」を決める

公式リポジトリのREADMEを読むと、draw.io をAIにつなぐ方法は4つ用意されています。Claude Code で使うなら、選ぶのは次の2つのどちらかです。

方式	図の出方	向いている人
MCPツールサーバ（`@drawio/mcp`）	ブラウザで draw.io のエディタが開き、そのまま手で直せる	AIに描かせてから自分で整えたい人。XML・CSV・Mermaid の3形式に対応
Claude Code 用プラグイン（MCP不要）	`.drawio` ファイルを作る。PNG・SVG・PDFへの書き出しもできる（書き出しには draw.io デスクトップ版が必要）	図をファイルとしてリポジトリに置きたい人

出典: jgraph/drawio-mcp README（2026年10月5日確認）

迷ったら、ブラウザですぐ直せるMCPツールサーバからで大丈夫です。この記事もこちらで進めます。

2. 設定は2通り。コマンド1行か、設定ファイルか

いちばん簡単なのはコマンド1行

冒頭の claude mcp add drawio -- npx -y @drawio/mcp がそれです。公式READMEの「Claude Code」の項に、この形で書かれています。動かすには Node.js（npx コマンド）が必要です（公式READMEの導入方法が npx を使う形のため）。

ファイルで管理したいなら設定ファイル

設定をファイルで持っておきたいときは、JSONに書く方法もあります。公式READMEに載っている形はこうです。

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "@drawio/mcp"]
    }
  }
}

このJSONを別のファイル（例: drawio-mcp.json）に保存して、claude --mcp-config ./drawio-mcp.json で起動する読み込ませ方もあります。--mcp-config は Claude Code の公式CLIリファレンスに載っているオプションです。チームで共有したいなら、claude mcp add --scope project drawio -- npx -y @drawio/mcp でプロジェクト直下の .mcp.json に保存する方法も公式ドキュメントで案内されています。

Windows で npx がうまく起動しないときは、"command": "cmd"、"args": ["/c", "npx", "-y", "@drawio/mcp"] のように cmd /c を通す書き方もよく使われています。ただ、これは公式READMEには書かれていない工夫なので、まずは上の公式の形で試してください。

3. つながったかを確かめる

Claude Code を起動して /mcp と打つと、つないだMCPサーバの一覧と状態が出ます。drawio が ✔ Connected（接続済み）になっていれば準備完了です。つながっていないときは、ターミナルで claude mcp get drawio を打つと、そのサーバの状態を詳しく確認できます。接続に失敗していれば ✘ Failed to connect と表示されます（公式ドキュメント「Managing your servers」の項）。

ここで止まる原因として多そうなのは、次の2つです。

パッケージ名が @jgraph/drawio-mcp のまま（存在しない名前なので起動できない）
Node.js が入っていない、または npx にパスが通っていない

4. 構成図を描かせる頼み方

つながったら、あとは普段どおり日本語で頼むだけです。たとえば AWS SAM の template.yaml があるフォルダで、こう頼みます。

template.yaml を読んで、リソースとリクエストの流れが分かる構成図を drawio で作って。AWSの公式アイコンを使って。

公式READMEによると、このサーバには図を開くための道具（XML・CSV・Mermaid の3形式）と、AWS・Azure・GCP・Kubernetes などのアイコンを含む約1万の図形から探す search_shapes という道具が入っています。「公式アイコンで」と頼むと、AIがこの検索を使ってアイコンを選べるわけです。

描けた図はブラウザの draw.io エディタで開くので、文字の重なりや線の向きは手で直せます。一発で完璧なレイアウトになるとは限らないので、「大枠はAIに描かせて、仕上げは自分で整える」くらいの気持ちで使うのがちょうどいいと思います。