draw.io公式MCPサーバーでClaude Codeに図を描かせる方法

draw.io MCPサーバーの4つの導入方法から、Claude Codeで選ぶもの

draw.io MCPサーバーは、オンライン図表エディタのdraw.io(diagrams.net)が公式に公開しているMCP(Model Context Protocol)実装です。Claude Codeに指示するだけで、ER図や構成図のXMLを生成し、draw.ioエディタで開いたりファイルとして書き出したりできます。

ClaudeでdrawioのMCPを使う方法は、利用する画面で変わります。Claude Codeではclaude mcp addでTool Serverを登録するか、/plugin installでdraw.ioスキルを入れます。Claude.aiでは、ホスト型のApp Server(https://mcp.draw.io/mcp)をコネクタとして追加します。

リポジトリには用途の異なる4つの導入方法があります。Claude Codeで手順が用意されているのは、コマンド型の「MCP Tool Server」とプラグイン配布の「Assistant Plugin」の2つです。残る2つはClaude.aiやMCP Apps対応ホスト向けで、通常のClaude Code CLIでは使いません。

Claude.aiのコネクタ一覧にはdraw.ioも載っており、一覧から追加できます。ホスト型のため図の内容はdraw.ioのサーバーに送られる点は、後半の送信範囲の節で扱います。

以降はMCP Tool Serverの導入から、ER図・構成図の生成、Assistant Pluginへの切り替え、データの流れまでを順に扱います。ほかのMCPサーバーを探すときは、カタログのMCP Registryも参考になります。GoogleのBigQuery向けMCPサーバー(Claude BigQuery連携)のように、企業がMCPサーバーを自社で配布する動きは他分野でも広がっています。

導入前提

MCP Tool ServerはNode.js製のnpmパッケージです。実行にはNode.jsとnpmが必要で、npxが使えればグローバルインストールは要りません。Claude Code側は、MCPサーバーを追加できるバージョンなら追加設定なしで使えます。追加操作そのものは、ClaudeとTravis CIを連携するなど他の連携記事と共通です。

draw.io Desktopは必須ではありません。生成した図をPNG・SVG・PDFへエクスポートしたい場合だけ、Assistant Plugin側で必要になります。ポスターのように見た目が主役の一枚絵なら、canvas-designスキルのほうが向きます。

Tool Serverを登録して接続を確かめる

npx @drawio/mcpを実行すると、draw.ioエディタを新しいブラウザタブで開くモードのMCPサーバーが起動します。Claude Codeにはローカルのstdioサーバーとして登録します。

claude mcp add --transport stdio drawio -- npx @drawio/mcp

リポジトリのREADMEが示す登録コマンドはclaude mcp add drawio -- npx -y @drawio/mcpです。-yは、パッケージが未取得のときのインストール確認を自動で承諾するnpxのフラグで、MCPサーバーは対話なしで起動されるため、付けておくと初回起動で止まりにくくなります。

登録先のスコープは既定でlocalです。チームで共有したい場合は--scope projectを付けます。v2.1.285で作業用の空ディレクトリに--scope project付きで実行すると、次の出力が返り、.mcp.jsonが生成されました。

Added stdio MCP server drawio with command: npx @drawio/mcp to project config
File modified: <作業ディレクトリ>/.mcp.json

生成された.mcp.jsonの中身は次のとおりです。手で書くときもこの形に揃えます。

{
  "mcpServers": {
    "drawio": {
      "type": "stdio",
      "command": "npx",
      "args": ["@drawio/mcp"],
      "env": {}
    }
  }
}

自己ホストのdraw.ioを使う場合は、このenvにDRAWIO_BASE_URL(既定はhttps://app.diagrams.net/)を書きます。

登録後は接続状態を確認します。

claude mcp list

drawioの行が接続済みと表示されれば準備完了です。--scope projectで登録した直後は、.mcp.jsonのサーバーが未承認のため「Pending approval」と表示されます。一度claudeを起動して承認すると、接続の対象になります。ツールの詳細はclaude mcp get drawio、セッション内では/mcpコマンドで見られます。

ツールの使い分け: XML・CSV・Mermaid

Tool Serverが公開するツールは、入力形式ごとに分かれています。何を持っているかで選ぶと迷いません。

このほか、ローカルの複数ページ.drawioファイルを1ページずつ読み書きするlist_pages / get_page / set_pageもあります。

ER図をプロンプトから生成する

Claude Codeへの指示は、生成したい図の内容を自然文で伝えるだけです。

ClaudeはXMLを組み立て、Tool Serverがdraw.ioエディタのタブを開きます。エディタ上でそのまま編集でき、ローカルファイルとして保存もできます。

構成図(アーキテクチャ図)を生成する

システム構成図やネットワーク図も同じ手順です。draw.ioにはAWS・Azure・GCP・Kubernetesなど1万点を超えるシェイプがあり、search_shapesがキーワードから該当シェイプのスタイル文字列を検索します。

検索インデックスはdraw.ioの新リリースごとに自動更新されます。内蔵ライブラリに良い一致がないときは、draw.ioのアイコンサービスから、ブランドロゴや一般的な概念アイコンを補って返します。

図が乱れたときのレイアウト整形

生成直後の図は、ノードの配置やエッジの経路が乱れることがあります。Tool Serverのopen_drawio_xmlには、直し方の違う2つの引数があります。

どちらか一方を選びます。ELKはエッジの配線まで自前で行うため、libavoidを重ねても冗長です。

公式の記述には食い違いがあります。リポジトリ直下のREADMEの比較表は、Tool ServerのELKを「なし」、libavoidを「v1.3.0から」としています。一方、mcp-tool-serverのREADMEと、直下READMEのデータの流れを説明する節は、postLayout: "elk"をTool Serverの引数として扱っています。本文は、引数の一覧が詳しいツール側のREADMEに合わせています。動かないときはバージョンを確認してください。

Mermaid経由では、open_drawio_mermaidのpostLayout: "elk"がフローチャートだけに効き、それ以外の図種では無視されます。

プラグイン版(Assistant Plugin)に切り替える場面

プラグインの実体はdraw.ioスキルです。MCPサーバーを立てずに済ませたい場合や、PNGなどで書き出したい場合は、Claude Code向けのAssistant Pluginが使えます。MCPの設定は要らず、.drawioファイルをローカルに生成します。

/plugin marketplace add jgraph/drawio-mcp
/plugin install drawio@drawio

既定では.drawioファイルを書き出してdraw.ioで開きます。出力形式は指示に含めて変えます。

• png / svg / pdf: draw.io Desktopのコマンドラインツールで書き出します。--embed-diagram付きなので、書き出したファイルにXMLが埋め込まれ、draw.ioで再編集できます
• url: XMLをNode.js標準のzlibで圧縮し、app.diagrams.netで開くURLにします。draw.io Desktopは不要で、.drawioファイルも手元に残ります

draw.io Desktopがwhich drawioで見つからない環境では、書き出しは実行されず.drawioだけが残ります。ローカルのリポジトリからプラグインを読み込むなら、claude --plugin-dir ./plugins/claude-codeという方法もあります。

同じスキルはCodex CLIやGitHub Copilot CLI向けにも配布されています。各エージェントのMCP対応の違いは、AIコーディングエージェントのMCP対応状況を比較するで扱っています。

図データはどこまで外部に出るか

導入方式によって、図の中身が外部に送信されるかどうかが変わります。

Tool Serverの場合、図が開くまでの経路は次のとおりです。

図データが手元に留まる方式でも、外部への通信がゼロとは限りません。READMEが挙げる例外は次のとおりです。

• ビューアーコード: エディタの読み込みで、app.diagrams.netやviewer.diagrams.netからアプリのコードを取得します。図ではなくコードとアセットの取得です。Tool ServerではDRAWIO_BASE_URLで自己ホストに切り替えて減らせます
• レイアウト用のコード: routing: "libavoid"とpostLayout: "elk"を使うと、Tool Serverはlibavoidの中核やdrawio-elkのバンドルをdraw.ioのリリースごとにviewer.diagrams.netから取得し、ユーザーごとにキャッシュします。libavoidはインストール時にも先に取得されます。指定しなければこの通信は起きません
• アイコン検索: search_shapesは、内蔵ライブラリに良い一致がないとき、draw.ioのアイコンサービスへ問い合わせて補います。エンドポイントはDRAWIO_ICON_SERVICE_URLで自己ホストのサービスに差し替え、offで無効化できると書かれています。Tool Serverで効くかどうかは、READMEに明記がありません

なお、いずれの方式でも図を生成するのはLLM自身です。完全にローカルで完結させるには、ローカルホストのモデルとの組み合わせが必要です。READMEは、外部への通信が本当にないかを確かめる方法として、ネットワークの出口を塞いだ環境で表示できるかを試すか、ブラウザのNetworkタブを見ることを挙げています。

よくあるつまずき

• 手順の取り違え: claude mcp addで登録するのがMCP Tool Server、/plugin installで入れるのがAssistant Pluginです。設定場所も挙動も別物です。
• ネットワーク遮断環境でエディタが出ない: ビューアーコードの読み込み先(app.diagrams.net・viewer.diagrams.net)がブロックされている可能性があります。自己ホスト構成のApp Serverでは、VIEWER_PATHでビューアーを埋め込んだビルドにできます。
• PNG・SVG・PDFが出てこない: draw.io Desktopが未インストールだと、Assistant Pluginは.drawioファイルだけを残します。

まとめ

ER図や構成図をプロンプトから作るだけなら、claude mcp addで入れるMCP Tool Serverが最短です。PNG・SVG・PDFで書き出したい、MCPの設定を増やしたくないという理由が出てきたら、Assistant Pluginに切り替える選択肢があります。図の内容を社外に出せない環境では、ホスト型のApp Serverを避けたうえで、レイアウトやアイコン検索が外部から取得するコードの範囲も確認しておくと安全です。