🌟

【draw.io MCP】AIで ER 図が一瞬で生成できるようになった話 — 実際に使って検証してみた

に公開
AI
ER 図
効率化
draw.io
Model Context Protocol
tech

はじめに

draw.ioの開発元であるJGraphから公式MCPサーバーがリリースされました。
https://github.com/jgraph/drawio-mcp

プロンプトで指示するだけでdraw.ioのダイアグラムを自動生成できます。しかも生成後はそのままdraw.io上で手動編集できるので、ちょっとした修正も簡単です。

本記事では、Claude Desktop・Cursorへの導入手順と、実際に使ってみた所感を紹介します。

MCP とは？

MCP（Model Context Protocol）とは、外部のツールやデータベースと安全かつ効率的に連携するための共通の通信規格（プロトコル)です。

MCP を通して、

  • ファイル操作
  • コマンド実行
  • ER図やフローチャートの作成（draw.io MCP）

などを AI が直接実行できます。

draw.io MCP でできること

  • AIが draw.io を直接操作し、図を自動生成できる
  • 文章やスキーマから ER図を瞬時に作成できる
  • 既存ER図の カラム追加・削除・リレーション変更もプロンプトで更新できる
  • システム構成をもとに アーキテクチャ図を自動生成できる
  • VPC・ALB・ECS・RDS などを含む AWS構成図を整形レイアウトで作成できる
  • 業務フローやロジックを整理する フローチャートを自動生成できる
  • API通信やログイン処理などの シーケンス図を作成できる

導入方法

Claude Desktopへの導入方法

前提条件

  • Node.js がインストール済み
  • Claude Desktop がインストール済み

1. 設定ファイルを開く

macOS:

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

Claudeディレクトリを探す

ls ~/Library/Application\ Support/Claude/

Claudeディレクトリの中にjsonファイルを作成する

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

2. 設定ファイルを編集

ファイルが存在しない場合は新規作成して、以下を記述：

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

3. Claude Desktop を再起動

  1. Claude Desktop を完全に終了
  2. 再度起動

Cursorへの導入方法

事前準備

※ Node.jsが未インストールの場合は公式サイトからインストールしてください。
(インストールされているかは下記のコマンドで確認できます。)

node --version
npm --version

【公式ドキュメント】
https://nodejs.org/ja

1. Cursor Settings を開く

2. サイドバーのTools&MCPを選択して、Add Custom MCPを選択

cursorの画面
CursorのSettings画面

3. mcp.jsonファイルに以下の記載を追加

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

4. 左側のドットが緑色になれば成功

draw.io mcpの導入
MCPサーバーが緑色になった状態

https://cursor.com/ja

使い方

実践例1：ER図を作成

プロンプト例
draw.io MCPを使って添付するDBスキーマ（schema.rb）を読み取り、ER図をdraw.io形式で作成してください。

以下の条件を必ず守ってください：
- 表示形式は「Database ER Diagram」
- PK / FK を明示する
- テーブル名を上部ヘッダーに表示
- カラムは縦並び
- deleted_at があるテーブルは「論理削除」と注記
- 図のレイアウトは見やすさ優先（関連が近いテーブル同士を近くに配置）

ER図

ER図の拡大
一部分だけ拡大した画像

実践例2：AWSアーキテクチャ図を作成

プロンプト例
draw.io MCPでAWS公式アーキテクチャ図スタイルで生成してください。

- AWS Cloudコンテナを作成
- VPC枠を作成
- Public Subnet / Private Subnetを分ける
- CloudFront → ALB → ECS → RDS
- ECS → ElastiCache
- サービス名＋日本語補足
- 整列レイアウトで美しく配置
- 余白を広めに

AWSアーキテクチャ図

実践例3：ログイン機能のシーケンス図を作成

プロンプト例
draw.io MCPでシーケンス図を生成してください。

登場人物：
User
Frontend
Backend
Database

フロー：
1. Userがログイン
2. FrontendがAPIへリクエスト
3. BackendがDBを検索
4. 認証成功レスポンス

以下の条件は必ず守ってください：
縦方向レイアウト
ライフラインを表示
メッセージは水平矢印

ログイン機能のシーケンス図

実践例4：業務フロー図を作成

プロンプト例
draw.io MCPで業務フロー図を生成してください。
- 開始イベント
- ユーザー登録
- メール確認
- 本登録完了
- 条件分岐（確認成功/失敗）
- 終了イベント

以下の条件は必ず守ってください：
ダイヤモンドで分岐
縦レイアウト
整列配置

業務フロー図

実践例5：Gitフロー図を作成

プロンプト例
draw.io MCPでGitブランチ戦略図を生成してください。

- main
- develop
- feature/*
- release/*
- hotfix/*

以下の条件は必ず守ってください：
横方向タイムライン
ブランチは色分け
mergeポイントを明示
直線コネクタ使用

Gitフロー図

実践例6：C4モデルの作成

プロンプト例
draw.io MCPでC4モデル（Container Diagram）を生成してください。

- System境界を作成
- Web App（React）
- API（Rails）
- Database（PostgreSQL）
- External API（Google Books API）
- 境界ボックスを使用
- コンポーネントは整列配置
- 説明テキストを各ボックス下に追加

C4モデル

実用Tips

プロンプトのコツ

draw.io MCPの力を最大限引き出すには、プロンプトの書き方が重要です。

悪い例：

ネットワーク図を作って

良い例：

draw.io MCPの open_drawio_mermaid を使ってネットワーク図を生成してください。

要件：
- 左から右の横レイアウト
- 直角コネクタ（orthogonal）
- グリッド整列
- 同じレイヤーは同一サイズ
- 均等間隔で配置

構成：
- Internet
- Firewall
- Load Balancer
- Web Server x3（横並び）
- DB Server（Primary + Replica）

プロンプトを良くするポイント

  1. レイアウトを明示する（左→右／上→下、直角コネクタ、整列方法、自動レイアウトの有無まで指定する）
  2. 構造を階層で書く（VPC→サブネット→リソースのように所属関係を明確にする）
  3. 表示ルールを指定する（色分け、枠線、冗長構成の囲み、ラベル有無などを明記する）

生成後の編集

draw.ioで開かれた図はそのまま編集できます。ありがちな微修正のパターンとして、以下のようなものがあります。

  • テキストの重なり → セルをドラッグしてずらす
  • 矢印の向き → 矢印を選択して変更
  • 色やスタイル → 右パネルの「スタイル」タブで変更

編集後は、PNG / SVG / PDF など各種形式に書き出すことが出来ます。

まとめ

ER図を手で書くのは地味に時間がかかります。
draw.io MCPを使えば、それが数十秒で完成します。
しかも修正もプロンプトを書き直すだけ。設計の試行錯誤が圧倒的に早くなります。

プロンプトを書き直すだけで図も更新できるため、以下の作業が圧倒的に効率化されます。

  • 設計レビュー前のたたき台作成
  • 既存プロジェクトの可視化
  • スキーマ変更時の影響確認
  • ドキュメント整備の自動化

とても便利ですね。
情報共有や自分の中での情報整理など、開発効率を一段引き上げてくれるツールだと感じました。

Discussion