[Claude] draw.io MCPを使用してAIで図を描く

draw.io からMCPツールが提供されております。
MCPツールを使用することで、AIを活用して図を描くことができます。
今回はdraw.ioをAIに指示して出力してもらうようにします。

https://www.npmjs.com/package/@drawio/mcp

0. 環境

MacOS 15.2
Claude Desktop 1.1.2321

1. draw.io MCPとは

公式のdraw.io MCPサーバー（@drawio/mcp）は、AIが図のデータを生成し、それをdraw.ioエディタで開くためのツールです。

特徴

3つの入力形式に対応: XML、CSV、Mermaid.js
ブラウザで編集可能: 生成されたURLをクリックするとdraw.ioエディタが開く
プライバシー配慮: データはURLのハッシュフラグメント（#以降）に含まれ、サーバーに送信されない
事前インストール不要: npxが自動的にパッケージをダウンロード・実行

2. MCPツールの設定手順

2.1 Claude Desktop設定ファイルの編集

Claude Desktop の設定ファイルを開きます。

~/Library/Application Support/Claude/claude_desktop_config.json

以下の内容を追加します:

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

注意: 既に他のMCPサーバーが設定されている場合は、mcpServersオブジェクト内に"drawio"セクションを追加してください。

2.2 Claude Desktopの再起動

設定ファイルを保存後、Claude Desktopを完全に終了（メニューバーからもQuit）して再起動します。

2.3 動作確認

Claude Desktopで以下のように質問して、MCPツールが認識されているか確認します:

利用可能なMCPツールを教えてください

以下の3つのツールが表示されれば成功です。

open_drawio_xml
open_drawio_csv
open_drawio_mermaid

3. 使用例: AWSアーキテクチャ図の作成

3.1 プロンプト例

open_drawio_mermaidツールを使用して、以下のコンポーネントを含むAWSのアーキテクチャ図を作成してください。不明な点があれば質問してください。

- VPC
- Internet Gateway
- NAT Gateway
- Application Load Balancer
- EC2インスタンス
- RDS
- パブリックサブネットとプライベートサブネット
- マルチAZ構成

ポイント:

ツール名（open_drawio_mermaidなど）を明示することで、Artifactsではなく確実にMCPツールが使用されます
不明点を質問するよう促すことで、より詳細な構成図を作成できます

3.2 出力結果

実行後、以下の形式のURLが返されます:

https://app.diagrams.net/#create=...

このURLをクリックすると、draw.ioエディタでAWS構成図が開き、さらに編集が可能です。

4. その他の使用方法

4.1 Mermaid形式で作成

open_drawio_mermaidツールを使って、ユーザー登録フローチャートを作成してください

4.2 CSV形式で組織図を作成

open_drawio_csvツールを使って、以下の組織構造の組織図を作成してください
- CEO
  - CTO
    - 開発チーム
  - CFO
    - 経理チーム

4.3 XML形式で詳細な図を作成

open_drawio_xmlツールを使って、データベースER図を作成してください

5. トラブルシューティング

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

Claude Desktopを完全に終了（Cmd+Q / Alt+F4）
設定ファイルのJSON構文が正しいか確認（カンマ、括弧など）
再起動後、数秒待ってから確認

初回実行が遅い場合

npxが初回実行時にパッケージをダウンロードするため、少し時間がかかる場合があります
2回目以降はキャッシュが使用され高速化されます