draw.io MCPとは？公式MCPサーバーの導入手順とAI作図の活用法を徹底解説

MCPがもたらす作図ワークフローの変革

手作業で図を描く時代は過去のものになりつつあります。MCP（Model Context Protocol）は、LLM（大規模言語モデル）が外部ツールと直接やり取りするための標準プロトコルです。draw.ioの開発元であるdraw.io Ltdは、このMCPに公式対応したサーバー @drawio/mcp を公開しました。

従来はLLMにXMLを生成させ、手動でdraw.ioにインポートする必要がありました。MCPサーバーを使えば、Claude DesktopなどのMCPクライアントから「ネットワーク構成図を描いて」と指示するだけで、draw.ioエディタ上に図が直接表示されます。

draw.io公式MCPサーバーの概要

公式MCPサーバーのリポジトリは jgraph/drawio-mcp です。npmパッケージ名は @drawio/mcp で、以下の3つのツールを提供しています。

3つのツールに共通するオプションパラメータとして、lightbox（読み取り専用モード）と dark（ダークモード："auto" "true" "false"）があります。

内部的には「コンテンツを圧縮 → Base64エンコード → draw.io URLの #create ハッシュに埋め込み → ブラウザで展開」という仕組みで動作します。

インストールと設定手順

必要な環境

• Node.js（npxが使える環境）
• ブラウザまたはdraw.ioデスクトップアプリ

方法1：npxで直接実行（推奨）

追加インストール不要で即座に利用できます。

npx @drawio/mcp

方法2：グローバルインストール

頻繁に使う場合はグローバルインストールが便利です。

npm install -g @drawio/mcp
drawio-mcp

方法3：ソースからビルド

カスタマイズや開発目的の場合に選択します。

git clone https://github.com/jgraph/drawio-mcp.git
cd drawio-mcp
npm install
npm start

Claude Desktopへの接続設定

Claude Desktopの設定ファイルにMCPサーバーを登録します。

macOSの場合： ~/Library/Application Support/Claude/claude_desktop_config.json

Windowsの場合： %APPDATA%\Claude\claude_desktop_config.json

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

設定を保存したら、Claude Desktopを再起動してください。

VS Code（Claude Code拡張）での利用

VS Codeでdraw.io MCPを使う場合は、プロジェクトルートの .claude/settings.json または ~/.claude/settings.json にMCPサーバー設定を追加します。

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

3つのツールの使い分けガイド

open_drawio_xml：最も柔軟なXML直接指定

draw.ioのネイティブ形式であるmxGraph XMLを直接扱います。既存の.drawioファイルの編集や、LLMに自由度の高い図を生成させたい場合に適しています。

プロンプト例：

open_drawio_xmlを使って、Webアプリの3層アーキテクチャ図を作成してください。
フロントエンド（React）→ APIサーバー（Node.js）→ データベース（PostgreSQL）の構成です。

draw.ioのXMLは <mxGraphModel> を最上位要素とし、各図形が <mxCell> で定義されます。LLMはこの構造を理解しているため、複雑なレイアウトやスタイル指定も可能です。

open_drawio_csv：表データからの一括変換

CSVデータを図に自動変換します。組織図、ER図、階層構造の可視化に特に効果的です。スプレッドシートやデータベースからエクスポートしたデータをそのまま図にできる点が強みです。

プロンプト例：

以下の組織データをopen_drawio_csvで組織図にしてください。
名前,役職,上司
田中太郎,CEO,
佐藤花子,CTO,田中太郎
鈴木一郎,エンジニア,佐藤花子

open_drawio_mermaid：テキストベースの手軽な作図

Mermaid記法をdraw.ioの編集可能な図に変換します。Mermaid記法はMarkdownドキュメントとの親和性が高く、フローチャートやシーケンス図を素早く作成する用途に向いています。

プロンプト例：

open_drawio_mermaidで、ユーザー認証フローのシーケンス図を作成してください。
ブラウザ → APIサーバー → 認証サービス → データベースの流れです。

Mermaid入力の利点は、draw.ioに変換された後も要素の移動やスタイル変更が自由にできることです。画像出力のみのMermaidレンダラーとは異なり、編集可能な図として出力されます。

公式版とコミュニティ版MCPサーバーの違い

draw.io向けのMCPサーバーは、公式版以外にもコミュニティが開発した実装がいくつか存在します。

公式版はシンプルさが特徴です。LLMが生成したコンテンツをブラウザのdraw.ioエディタで開くことに特化しており、複雑なセットアップが不要です。

一方、コミュニティ版の lgazo/drawio-mcp-server は、既存の図を読み取ってセル情報を取得したり、プログラム的にセルを追加・削除したりする高度な操作が可能です。既存図の分析や自動修正といった用途にはこちらが適しています。

実用的なワークフロー3選

ワークフロー1：テキスト説明からシステム構成図を生成

開発ドキュメントやチャットのやり取りをもとに、MCPサーバーを経由してdraw.ioで構成図を自動生成するワークフローです。

1. Claude Desktopでシステム構成を自然言語で説明する
2. LLMがXML形式でmxGraph構造を生成する
3. open_drawio_xml ツールがブラウザでdraw.ioエディタを開く
4. 生成された図を手動で微調整し、.drawio 形式で保存する

ワークフロー2：IaCコードからアーキテクチャ図を逆生成

Terraform、AWS CDK、CloudFormationなどのIaCコードをLLMに読み込ませ、そこからインフラ構成図を生成します。

1. IaCコードファイルをLLMに読み込ませる
2. LLMがリソース間の関係性を解析する
3. draw.io XMLに変換してMCPサーバー経由で表示する
4. AWSアイコン（shape=mxgraph.aws4.*）を使った本格的な構成図が完成する

このワークフローの利点は、IaCツールがPDFやPNG形式で出力する静的な図と異なり、draw.io上で自由に編集できることです。

ワークフロー3：スプレッドシートデータの可視化

ExcelやGoogleスプレッドシートからエクスポートしたCSVデータを、組織図やプロセスフローに変換します。

1. CSVデータを準備する（親子関係やフロー順序のカラムを含める）
2. open_drawio_csv ツールに渡す
3. draw.ioが自動的にレイアウトを計算して図を生成する

LLMに良い図を作らせるためのプロンプト設計

LLMにdraw.io MCPを使わせる際、プロンプトの書き方で生成される図の品質が大きく変わります。

ツール名を明示的に指定する

Claude Desktopには図を作成する手段が複数あります（Artifacts、ブラウザ制御、MCPツール）。draw.io MCPツールを確実に使わせるには、プロンプト内でツール名を明示します。

open_drawio_mermaidを使って、以下のフローチャートを作成してください。

構成要素を箇条書きで列挙する

「いい感じに構成図を作って」のような曖昧な指示では、LLMが存在しないコンポーネントを追加してしまうことがあります（ハルシネーション）。構成要素を具体的に列挙すると精度が上がります。

以下のコンポーネントのみで構成図を作成してください：
- CloudFront
- ALB
- EC2（2台、マルチAZ）
- RDS Aurora（リーダー1台）
- S3（静的アセット用）

レイアウトのルールを指示に含める

LLMは図のレイアウトを自動で決定しますが、意図と異なる配置になることがあります。レイアウト方針を明示すると改善します。

メインのデータフローは左から右に配置してください。
矢印の交差を避け、サブネットはグループ化してください。

対応クライアントの一覧

draw.io MCPサーバーは、MCPプロトコルに準拠したクライアントであれば接続できます。現在動作が確認されている主なクライアントは以下のとおりです。

トラブルシューティング

「ツールが認識されない」場合

MCPサーバーの設定ファイルのJSONに構文エラーがないか確認してください。npx @drawio/mcp を直接ターミナルで実行して、エラーが出ないかテストできます。

「ブラウザで図が開かない」場合

デフォルトブラウザが設定されているか確認してください。MCPサーバーはシステムのデフォルトブラウザでdraw.ioのURLを開きます。

「生成されたXMLが壊れている」場合

LLMが生成するXMLは完璧ではないことがあります。以下のポイントを確認してください。

• <mxGraphModel> が最上位要素であること
• 各 <mxCell> に一意の id が設定されていること
• parent 属性が既存のセルIDを参照していること
• vertex="1" または edge="1" が適切に設定されていること

MCP非対応環境での代替手法

MCPサーバーをインストールできない環境でも、draw.ioとLLMを組み合わせることは可能です。

公式リポジトリに含まれる src/claude-project-instructions.txt の内容をClaudeのプロジェクト設定に追加すれば、Pythonコードを実行してdraw.io URLを生成する方式で同等の機能を実現できます。この方法ではMCPサーバーのインストールが不要です。

また、最もシンプルな方法として、LLMにdraw.io XML形式のテキストを直接生成させ、draw.ioの「ファイル → URLからインポート」や「Extras → Edit Diagram」からXMLを貼り付ける方法もあります。

まとめ

draw.io公式MCPサーバー @drawio/mcp は、npx @drawio/mcp の1コマンドで導入できるシンプルな設計です。XML・CSV・Mermaidの3形式に対応しており、LLMの出力を直接draw.ioエディタで開けます。

用途に応じて公式版とコミュニティ版を使い分けることで、新規の図の生成から既存図の分析・自動修正まで幅広いワークフローを構築できます。

参考リンク:

• draw.io公式MCPサーバー（GitHub）
• draw.io公式サイト
• lgazo/drawio-mcp-server（コミュニティ版）
• Sujimoshi/drawio-mcp（コミュニティ版）
• MCP公式仕様