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

draw.io MCPサーバーとは(4つの導入方法)

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

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

この記事では、Claude Codeで最初に試すことになる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 CodeにMCPサーバーを追加する基本操作自体は、ClaudeとTravis CIを連携するなど他の連携記事とも共通です。draw.io Desktopアプリは必須ではありませんが、生成した図をPNG・SVG・PDFへエクスポートしたい場合はAssistant Plugin側でインストールが必要になります。

コマンド型のMCPサーバー(MCP Tool Server)を導入する

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

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

このコマンドはローカルスコープにサーバー定義を書き込みます。チーム全体で共有したい場合は--scope projectを付け、.mcp.jsonをリポジトリにコミットする運用に切り替えます。自己ホストのdraw.ioインスタンスを使う場合は、DRAWIO_BASE_URL環境変数でエンドポイントを指定します。

インストールを確認する

登録が終わったら、Claude Code側で接続状態を確認します。

claude mcp list

drawioの行が✔ Connectedと表示されていれば準備完了です。詳細なツール一覧を見たいときはclaude mcp get drawioを、Claude Codeのセッション内からは/mcpコマンドを使います。

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

MCP Tool Serverはdraw.ioのXMLを受け取り、エディタのタブを開く仕組みで動きます。Claude Codeへの指示は、生成したい図の内容を自然文で伝えるだけです。

Claude CodeはこのプロンプトからXMLを組み立て、MCP Tool Server経由でdraw.ioエディタを開きます。生成された図はエディタ上でそのまま編集でき、ローカルファイルとして保存することもできます。

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

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

シェイプ検索は事前生成されたインデックスを使っており、draw.ioの新リリースのたびに自動更新されます。一致するシェイプが見つからない場合は、draw.ioのアイコンサービスから補完的に検索する仕組みも備えています。

レイアウトを自動整形する

生成直後の図は、ノードの配置やエッジの経路が乱れていることがあります。MCP Tool Serverは、ノード配置とエッジ配線を別々に調整する2種類のレイアウトパスに対応しています。

両方を同時に指定しても効果は重複するだけなので、どちらか一方を選びます。配置そのものを整えたいならELK、自分で置いた配置を崩さずコネクタだけ直したいならlibavoidが向いています。

プラグイン版(Assistant Plugin)という代替手段

MCPサーバーを立てずに済ませたい場合は、Claude Code向けに配布されているAssistant Pluginが使えます。こちらはMCPの設定を必要とせず、.drawioファイルをローカルに生成する仕組みです。

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

インストール後は、出力形式を指示に含めることで挙動を変えられます。既定では.drawioファイルを書き出してdraw.ioで開きますが、「pngで出力して」のように伝えるとdraw.io Desktopのコマンドラインツールを使ってPNG・SVG・PDFへ書き出します。draw.io Desktopが入っていない環境では、.drawioファイルがローカルに残るだけで済みます。

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

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

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

なお、いずれの方式でも図を生成するのはLLM自身です。ホスト型のClaudeモデルを使っている限り、図の内容はAnthropicのクラウド側でも生成されます。完全にローカルで完結させたい場合は、ローカルホストのモデルと組み合わせる必要があります。

図データそのものがローカルに留まる方式でも、draw.ioのビューアーコード(app.diagrams.netなど)は既定で外部から読み込まれます。これを避けたい場合は、MCP Tool ServerならDRAWIO_BASE_URLで自己ホストのインスタンスを指定します。

よくあるつまずき

• MCP Tool ServerとAssistant Pluginの手順を混同してしまうケースがあります。前者はclaude mcp addで登録するMCPサーバーで、後者は/plugin installで入れるプラグインです。設定場所も挙動も別物です。
• ELKレイアウトとlibavoidルーティングを同時に指定しても、効果が重複するだけで意味がありません。配置ごと整えたいのか、コネクタだけ直したいのかで使い分けます。
• ネットワーク遮断環境で検証すると、ビューアーコードの読み込み先(app.diagrams.net・viewer.diagrams.net)がブロックされてエディタが表示されないことがあります。自己ホスト構成ではVIEWER_PATHでビューアーを埋め込みビルドに切り替えられます。
• Assistant Pluginでpng・svg・pdf出力を指示しても、draw.io Desktopが未インストールだとエクスポートは実行されず、.drawioファイルだけが残ります。

まとめ

draw.io MCPサーバーは、ER図や構成図をプロンプトだけで生成できるツールです。Claude Codeでは、claude mcp addで登録するMCP Tool Serverと、/plugin installで入れるAssistant Pluginの2つが用意されています。まずはMCP Tool Serverをnpx @drawio/mcpで試し、PNG・SVG・PDFへの書き出しが必要になった段階でAssistant Pluginへ切り替えるのが実用的な進め方です。厳格なデータ制限がある環境では、ホスト型のMCP App Serverを避け、この記事で扱った2つの方式かApp Serverの自己ホストを選びます。