【2026年最新】draw.io公式MCPサーバーで"AIに図を描かせる"完全ガイド

Posted at 2026-02-14

はじめに

「設計図やフローチャートを手で描くのが面倒...」そんな悩みを解決する draw.io公式MCPサーバー が2026年2月にリリースされました。

MCP（Model Context Protocol） を使うことで、Claude などのAIに自然言語で指示するだけでdraw.ioの図を自動生成できます。

あなた：「3層構成のWebアプリのアーキテクチャ図を作って」
Claude：（draw.ioで図を自動生成）

この記事では、公式MCPサーバーのセットアップから実践的な使い方まで解説します。

MCP とは？

MCP（Model Context Protocol） は、AIモデルが外部ツールと連携するための標準プロトコルです。

┌───────────┐       MCP        ┌──────────────┐
│   Claude   │ ──────────────→ │  MCPサーバー   │
│  (AIモデル) │ ←────────────── │  (draw.io等)  │
└───────────┘                  └──────────────┘

MCPに対応したサーバーを設定すれば、AIが直接 draw.io や GitHub、データベースなどの外部ツールを操作できるようになります。

draw.io MCPサーバーの種類

公式サーバー（推奨）

サーバー	パッケージ	開発元
draw.io公式 MCP	`@drawio/mcp`	JGraph（draw.io開発元）

コミュニティ製サーバー

サーバー	パッケージ	特徴
drawio-mcp	`drawio-mcp`	`.drawio.svg` ファイル生成、VSCode連携
drawio-mcp-server	`drawio-mcp-server`	ブラウザ拡張経由でdraw.ioを操作

本記事では 公式サーバー（@drawio/mcp） を中心に解説します。

公式サーバーの3つのアプローチ

draw.io公式MCPサーバーには 3つの利用方法 があります。

アプローチ	インストール	出力形式	対応フォーマット	おすすめ環境
MCP App Server	不要	チャット内に表示	XML	Claude.ai
MCP Tool Server	npm	ブラウザで表示	XML, CSV, Mermaid	Claude Desktop, VS Code
Project Instructions	不要	クリックで開く	XML, CSV, Mermaid	Claude.ai Projects

セットアップ手順

前提条件

Node.js v18 以上
Claude Desktop または Claude Code または VS Code（Copilot / Cline等）

方法①：Claude Desktop で使う

claude_desktop_config.json に以下を追加します。

設定ファイルの場所：

macOS：~/Library/Application Support/Claude/claude_desktop_config.json
Windows：%APPDATA%\Claude\claude_desktop_config.json

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

設定後、Claude Desktop を再起動してください。

方法②：Claude Code で使う

プロジェクトローカル（.mcp.json）：

プロジェクトルートに .mcp.json を作成します。

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

グローバル登録（CLIコマンド）：

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

方法③：VS Code で使う

VS Code の settings.json にMCPサーバー設定を追加します。

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

動作確認

セットアップ後、Claude に以下のように聞いて3つのツールが認識されていれば成功です。

draw.ioで使えるツールを教えて

確認できるツール：

open_drawio_mermaid
open_drawio_csv
open_drawio_xml

3つのツールの使い分け

1. open_drawio_mermaid（おすすめ）

Mermaid.js記法 でダイアグラムを生成します。最もシンプルで始めやすい方法です。

得意な図：

フローチャート
シーケンス図
状態遷移図
ER図
ガントチャート

プロンプト例：

draw.ioのMermaidツールを使って、ユーザー登録のフローチャートを作成して。

フロー：
1. ユーザーがフォームに入力
2. バリデーションチェック
3. NGなら入力画面に戻る
4. OKならDBに保存
5. 確認メールを送信
6. 完了画面を表示

生成されるMermaid記法（例）：

2. open_drawio_csv

CSV形式 のデータからダイアグラムを生成します。組織図やネットワーク構成図に便利です。

得意な図：

組織図
ネットワークトポロジー
ツリー構造

プロンプト例：

draw.ioのCSVツールを使って、以下の組織図を作成して。

社長: 山田太郎
  ├── 開発部長: 田中一郎
  │   ├── フロントチーム: 鈴木花子
  │   └── バックエンドチーム: 佐藤次郎
  └── 営業部長: 高橋美咲
      ├── 国内営業: 伊藤健太
      └── 海外営業: 渡辺優子

3. open_drawio_xml

draw.ioネイティブのXML形式 で図を生成します。最も細かい制御ができますが、記法が複雑です。

得意な図：

AWSアーキテクチャ図
システム構成図
インフラ構成図
細かいスタイル指定が必要な図

プロンプト例：

draw.ioのXMLツールを使って、3層構成のWebアプリケーションアーキテクチャ図を作成して。

構成：
- フロントエンド層：React + CloudFront
- アプリケーション層：Spring Boot + ECS Fargate（2台）
- データ層：RDS (PostgreSQL) + ElastiCache (Redis)

ロードバランサーで負荷分散し、各層を色分けして表示して。

ツールの選び方まとめ

シンプルな図 → Mermaid（まずはこれから）
         ↓
階層・ツリー構造 → CSV
         ↓
細かいレイアウト制御 → XML

実践例

例1：フローチャート（Mermaid）

プロンプト：

draw.ioのMermaidツールを使って、ECサイトの注文処理フローチャートを作成して。

フロー：
1. カートの内容を確認
2. 在庫チェック（在庫なし→エラー表示→終了）
3. 配送先入力
4. 支払い方法選択（クレジットカード/コンビニ払い/銀行振込）
5. 注文確認画面
6. 決済処理（失敗→エラー→支払い方法選択に戻る）
7. 注文完了
8. 確認メール送信

例2：シーケンス図（Mermaid）

プロンプト：

draw.ioのMermaidツールで、ログイン処理のシーケンス図を作成して。

登場人物：ブラウザ、APIサーバー、認証サーバー、データベース

フロー：
1. ブラウザがログインフォームを送信
2. APIサーバーが認証サーバーにトークン発行を依頼
3. 認証サーバーがDBでユーザー情報を照合
4. 認証成功ならJWTトークンを返す
5. APIサーバーがトークンをブラウザに返す
6. 認証失敗なら401エラーを返す

例3：システム構成図（XML）

プロンプト：

draw.ioのXMLツールを使って、以下のマイクロサービス構成図を作成して。

サービス：
- API Gateway（入り口）
- User Service（ユーザー管理）
- Order Service（注文管理）
- Payment Service（決済）
- Notification Service（通知）
- Message Queue（RabbitMQ）

API Gatewayから各サービスへルーティング。
Order ServiceはPayment ServiceとNotification Serviceを呼び出す。
非同期通信はMessage Queue経由。
各サービスの色を分けて、通信方式（同期/非同期）がわかるようにして。

例4：ER図（Mermaid）

プロンプト：

draw.ioのMermaidツールで、ブログシステムのER図を作成して。

テーブル：
- users: id, name, email, password, created_at
- posts: id, title, body, user_id(FK), category_id(FK), published_at
- categories: id, name, slug
- comments: id, body, user_id(FK), post_id(FK), created_at
- tags: id, name
- post_tags: post_id(FK), tag_id(FK)

リレーション：
- users 1 : N posts
- users 1 : N comments
- categories 1 : N posts
- posts 1 : N comments
- posts N : N tags (中間テーブル: post_tags)

効果的なプロンプトのコツ

1. ツール名を明示する

❌ 「フローチャートを描いて」
✅ 「draw.ioのMermaidツールを使って、フローチャートを描いて」

ツール名を明示しないと、AIがテキストで図を説明するだけで終わることがあります。

2. 構成要素を箇条書きで伝える

❌ 「Webアプリの構成図を作って」
✅ 「以下の構成でWebアプリのアーキテクチャ図を作って
   - フロント：React（CloudFront経由）
   - API：Spring Boot on ECS
   - DB：RDS PostgreSQL
   - キャッシュ：ElastiCache Redis」

3. レイアウトや色の指示を加える

「各層を色分けして表示して（フロント：青系、API：緑系、DB：オレンジ系）」
「左から右のフローで描いて」
「上下の階層構造で表示して」

4. AIが生成した図を手動で仕上げる

AIが生成した図は 80%の完成度 と考え、最終的な微調整はdraw.ioエディタで手動で行うのがおすすめです。

ノードの位置の微調整
フォントサイズや色の統一
矢印のルーティング
アイコンの追加（AWSアイコン等）

コミュニティ製サーバーの紹介

公式サーバー以外にも、用途に応じて便利なコミュニティ製サーバーがあります。

drawio-mcp（Sujimoshi 版）

.drawio.svg ファイルを直接生成するMCPサーバーです。VS Code の draw.io 拡張機能との相性が良く、ファイルとして保存したい場合に便利です。

セットアップ：

{
  "mcpServers": {
    "drawio-diagrams": {
      "command": "npx",
      "args": ["drawio-mcp"]
    }
  }
}

提供ツール：

ツール	機能
`new_diagram`	新しいダイアグラムファイルを作成
`add_nodes`	ノードを追加（バッチ対応）
`link_nodes`	ノード間を接続
`edit_nodes`	ノードのプロパティを変更
`remove_nodes`	ノードを削除
`get_diagram_info`	ダイアグラムの構造を取得

特徴：

ファイルとして .drawio.svg を生成（Git管理しやすい）
自動レイアウトアルゴリズム搭載（階層、放射、円形など）
VS Code 上でそのまま図を編集可能
バッチ操作でまとめてノードを追加・編集可能

プロンプト例：

drawio-mcpを使って、以下のクラス図を /docs/class-diagram.drawio.svg に作成して。

クラス：
- User（id, name, email）
- Order（id, userId, total, status）
- Product（id, name, price）
- OrderItem（orderId, productId, quantity）

Userは複数のOrderを持つ。OrderはOrderItemのリストを持つ。
OrderItemはProductへの参照を持つ。

drawio-mcp-server（lgazo 版）

ブラウザ拡張機能経由でdraw.ioデスクトップアプリを直接操作するサーバーです。既存のdraw.ioファイルの編集や情報取得に向いています。

公式 vs コミュニティ版の選び方

用途	おすすめサーバー
手軽に図を生成したい	公式（`@drawio/mcp`）
Claude.ai のチャット内で図を見たい	公式 MCP App Server
`.drawio.svg` ファイルとして保存したい	drawio-mcp（Sujimoshi版）
VS Code 内で完結させたい	drawio-mcp（Sujimoshi版）
既存のdraw.ioファイルを編集したい	drawio-mcp-server（lgazo版）
Git管理してチームで共有したい	drawio-mcp（Sujimoshi版）

よくある質問（FAQ）

Q. 生成された図のデータはサーバーに送信される？

公式サーバーの場合、図のデータはURLのフラグメント（# 以降）に含まれるため、サーバーには送信されません。 ブラウザ内でローカルに処理されます。

Q. 図の編集はできる？

はい。生成された図はdraw.ioエディタで開かれるので、自由に編集・保存できます。

Q. オフラインで使える？

MCP Tool Server（@drawio/mcp）は npx でローカル実行されますが、図の表示にはブラウザでdraw.ioを開く必要があります。完全オフラインの場合はdraw.ioデスクトップ版と組み合わせてください。

Q. AWS / Azure / GCP のアイコンは使える？

XMLツールを使えば、draw.ioのアイコンライブラリを指定できます。ただし、AIが自動でアイコンを選ぶ精度はまだ完璧ではないため、手動で差し替えるのが確実です。

Q. Mermaid / CSV / XML どれを使うべき？

迷ったらMermaidから始めてください。 8割以上のユースケースはMermaidで対応できます。CSV形式のデータを可視化したい場合はCSV、細かいレイアウト制御が必要な場合はXMLを使います。

まとめ

項目	内容
公式サーバー	`@drawio/mcp`（JGraph製）
セットアップ	`npx -y @drawio/mcp` を MCP設定に追加
3つのツール	Mermaid（簡単）/ CSV（表データ）/ XML（高精度）
おすすめ	まずはMermaidツールから始める
仕上げ	AIで80%生成 → draw.ioで手動仕上げ
プロンプトのコツ	ツール名を明示、構成要素を箇条書き

draw.io MCP を活用すれば、設計図やアーキテクチャ図の作成時間を 70〜80%削減 できます。まずは簡単なフローチャートから試してみてください！

参考リンク

著者: @kotaro_ai_lab
AI駆動開発やテック情報を毎日発信しています。フォローお気軽にどうぞ！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

【2026年最新】draw.io公式MCPサーバーで"AIに図を描かせる"完全ガイド

はじめに

MCP とは？

draw.io MCPサーバーの種類

公式サーバー（推奨）

コミュニティ製サーバー

公式サーバーの3つのアプローチ

おすすめの選び方

セットアップ手順

前提条件

方法①：Claude Desktop で使う

方法②：Claude Code で使う

方法③：VS Code で使う

動作確認

3つのツールの使い分け

1. open_drawio_mermaid（おすすめ）

2. open_drawio_csv

3. open_drawio_xml

ツールの選び方まとめ

実践例

例1：フローチャート（Mermaid）

例2：シーケンス図（Mermaid）

例3：システム構成図（XML）

例4：ER図（Mermaid）

効果的なプロンプトのコツ

1. ツール名を明示する

2. 構成要素を箇条書きで伝える

3. レイアウトや色の指示を加える

4. AIが生成した図を手動で仕上げる

コミュニティ製サーバーの紹介

drawio-mcp（Sujimoshi 版）

drawio-mcp-server（lgazo 版）

公式 vs コミュニティ版の選び方

よくある質問（FAQ）

Q. 生成された図のデータはサーバーに送信される？

Q. 図の編集はできる？

Q. オフラインで使える？

Q. AWS / Azure / GCP のアイコンは使える？

Q. Mermaid / CSV / XML どれを使うべき？

まとめ

参考リンク