draw.io MCP連携——Claude CodeでER図・シーケンス図をテキストから自動生成する

はじめに

「設計図を描くのが面倒で、結局コードだけ先に書いてしまう」——エンジニアなら誰しも経験があるのではないでしょうか。

ER図やシーケンス図は、チーム開発でもソロ開発でも重要なコミュニケーションツールです。しかし、draw.ioやFigmaを開いて1つずつボックスを配置し、矢印を繋いで……という作業は地味に時間がかかります。仕様変更のたびに図を更新するのも億劫で、気づけばコードと設計図が乖離しているということも珍しくありません。

2026年2月、draw.ioの開発元であるJGraphが公式MCPサーバーをリリースしました。これにより、Claude Codeに「このデータモデルのER図を作って」と伝えるだけで、編集可能なdraw.io図が自動生成されるようになりました。

本記事では、セットアップから実践的な図の自動生成まで、ハンズオン形式で解説します。

この記事を読み終わったらできるようになること：

• Claude Codeにdraw.io MCPサーバーを設定できる
• テキスト指示からER図を自動生成できる
• シーケンス図やフローチャートもワンコマンドで作成できる
• Firestoreのコレクション設計を可視化できる

draw.io MCPサーバーとは

draw.io MCPサーバーは、JGraphが公式に提供するModel Context Protocol（MCP）サーバーです。Claude CodeなどのAIエージェントに、draw.io図の作成・編集能力を与えます。

3つのアプローチ

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

本記事では、最も汎用的で実践向きなMCP Tool Serverを使います。

提供される3つのツール

MCP Tool Serverは以下のツールを提供します。

セットアップ

前提条件

• Node.js 18以上
• Claude Codeがインストール済み

Step 1: draw.io MCPをClaude Codeに登録

ターミナルで以下のコマンドを実行します。

claude mcp add drawio npx @drawio/mcp

これだけで設定完了です。プロジェクトの .mcp.json に以下が追加されます。

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

Step 2: 動作確認

Claude Codeを起動し、簡単な図を生成してみましょう。

> draw.io MCPで「Hello World」と書かれた四角形を1つ作成して

ブラウザが起動し、draw.ioエディタに四角形が表示されれば成功です。

ハンズオン1：Firestoreのデータモデルをer図に変換する

ここからは、架空のタスク管理アプリ「TaskFlow」を題材に実践します。

TaskFlowのFirestoreコレクション設計

TaskFlowには以下のコレクションがあるとします。

// Firestoreコレクション構成

// users コレクション
interface User {
  uid: string;
  displayName: string;
  email: string;
  role: "admin" | "member" | "viewer";
  createdAt: Timestamp;
}

// projects コレクション
interface Project {
  projectId: string;
  name: string;
  description: string;
  ownerId: string; // users.uid への参照
  memberIds: string[]; // users.uid[] への参照
  status: "active" | "archived";
  createdAt: Timestamp;
}

// tasks サブコレクション (projects/{projectId}/tasks)
interface Task {
  taskId: string;
  title: string;
  description: string;
  assigneeId: string; // users.uid への参照
  status: "todo" | "in_progress" | "review" | "done";
  priority: "low" | "medium" | "high";
  dueDate: Timestamp;
  createdAt: Timestamp;
}

// comments サブコレクション (projects/{projectId}/tasks/{taskId}/comments)
interface Comment {
  commentId: string;
  authorId: string; // users.uid への参照
  body: string;
  createdAt: Timestamp;
}

Claude Codeに指示する

このデータモデルを元に、ER図の生成を依頼します。

> 以下のFirestoreコレクション設計をdraw.ioのER図にして。
> リレーション（参照関係）も矢印で表現して。
>
> - users: uid, displayName, email, role, createdAt
> - projects: projectId, name, description, ownerId(→users), memberIds(→users[]), status, createdAt
> - tasks(projects配下サブコレクション): taskId, title, description, assigneeId(→users), status, priority, dueDate, createdAt
> - comments(tasks配下サブコレクション): commentId, authorId(→users), body, createdAt

Claude Codeは open_drawio_xml ツールを使い、以下のようなER図を自動生成します。

ブラウザでdraw.ioエディタが開き、上記のようなER図が表示されます。ボックスの位置やスタイルは、エディタ上でドラッグ&ドロップで自由に調整できます。

ポイント：Firestoreのサブコレクション関係を表現する

Firestoreはリレーショナルデータベースではないため、一般的なER図とは少し異なります。Claude Codeに以下のように補足すると、より正確な図になります。

> サブコレクションの階層関係は太い矢印で、
> ドキュメント参照（ownerId, assigneeIdなど）は点線矢印で表現して。
> Firestoreのコレクション階層がわかるようにして。

ハンズオン2：シーケンス図でAPIフローを可視化する

次に、TaskFlowの「タスク作成フロー」をシーケンス図にしてみましょう。

Claude Codeに指示する

> TaskFlowのタスク作成フローをdraw.ioのシーケンス図にして。
> Mermaid形式で渡して。
>
> 1. ユーザーがフォームからタスクを作成
> 2. Next.js Server Actionでバリデーション
> 3. Firestoreにタスクドキュメントを作成
> 4. プロジェクトメンバーに通知
> 5. UIを更新

Claude Codeは open_drawio_mermaid ツールを使い、Mermaid記法をdraw.ioに渡します。

生成されたシーケンス図はdraw.ioエディタで開かれ、各ボックスやメッセージのテキストを手動で微調整できます。

Mermaid形式を使うメリット

open_drawio_mermaid はMermaid記法を受け取り、draw.ioが編集可能なネイティブ形式に変換します。

Mermaid形式で大枠を作り、draw.ioエディタで仕上げるのが効率的なワークフローです。

ハンズオン3：CSV形式でモジュール構成図を生成する

3つ目のツール open_drawio_csv は、CSVデータから階層構造の図を自動生成します。TaskFlowのモジュール構成を可視化してみましょう。

Claude Codeに指示する

> TaskFlowのNext.jsプロジェクトのモジュール構成をdraw.ioの図にして。
> CSV形式で渡して。ツリー構造で表現して。
>
> src/
>   app/
>     (auth)/login, (auth)/signup
>     projects/[id]/page, projects/[id]/tasks/[taskId]/page
>     api/webhooks/route
>   components/
>     ui/(Button, Input, Modal)
>     projects/(ProjectCard, ProjectList)
>     tasks/(TaskCard, TaskBoard, TaskForm)
>   lib/
>     firebase, auth, validations
>   actions/
>     project-actions, task-actions, comment-actions

Claude Codeは以下のようなCSVを open_drawio_csv に渡します。

## draw.io CSV import
## label: %name%
## style: shape=%shape%;fillColor=%fill%;strokeColor=%stroke%;fontColor=#333333;
## namespace: csvimport-
## connect: {"from": "parent", "to": "id", "style": "curved=1;endArrow=none;"}
## layout: tree
id,name,parent,shape,fill,stroke
src,src,,mxgraph.aws3.rounded_rectangle,#f5f5f5,#999999
app,app,src,mxgraph.aws3.rounded_rectangle,#dae8fc,#6c8ebf
components,components,src,mxgraph.aws3.rounded_rectangle,#d5e8d4,#82b366
lib,lib,src,mxgraph.aws3.rounded_rectangle,#fff2cc,#d6b656
actions,actions,src,mxgraph.aws3.rounded_rectangle,#f8cecc,#b85450
auth,(auth),app,rectangle,#dae8fc,#6c8ebf
projects,projects/[id],app,rectangle,#dae8fc,#6c8ebf
api,api/webhooks,app,rectangle,#dae8fc,#6c8ebf
ui,ui,components,rectangle,#d5e8d4,#82b366
proj-comp,projects,components,rectangle,#d5e8d4,#82b366
task-comp,tasks,components,rectangle,#d5e8d4,#82b366

ツリー構造のレイアウトが自動適用され、モジュール間の階層関係が一目で分かる図が生成されます。

実践ワークフロー：コードから図を自動生成するパターン

ここまでの手法を組み合わせると、以下のようなワークフローが構築できます。

効率的な使い方のコツ

AGENTS.mdに図の生成ルールを書く

プロジェクトの AGENTS.md（または CLAUDE.md）に図の生成ルールを記述しておくと、チームメンバーが同じ品質の図を生成できます。

## 設計図の生成ルール

### ER図
- Firestoreのコレクション階層を反映すること
- サブコレクション関係は太線、ドキュメント参照は点線
- 各フィールドの型を明記する

### シーケンス図
- Server Actionsの呼び出しフローを必ず含める
- エラーケースはaltブロックで表現する
- 外部サービス呼び出しは色分けする

### 出力先
- PNG: docs/diagrams/ に保存
- SVG: GitHub PR/Issueに添付

よくある質問とTips

Q: 既存のdraw.ioファイルを更新できる？

はい。draw.ioエディタで図を開き、XMLをコピーしてClaude Codeに渡せます。

> このER図のXMLに「notifications」テーブルを追加して。
> フィールドは notificationId, userId, message, isRead, createdAt。
> [XMLをペースト]

Q: 日本語のラベルは正しく表示される？

draw.ioは日本語に完全対応しています。MCP経由で生成した図でも、日本語ラベルは問題なく表示されます。

Q: 大規模なデータモデル（20テーブル以上）でも使える？

XML形式であれば問題なく動作します。ただし、レイアウトの自動配置は完璧ではないため、draw.ioエディタの「Format → Layout」機能で再配置するのがおすすめです。

Q: 生成した図をGitで管理するには？

以下の2つの方法があります。

1. XMLファイルとして保存: .drawio ファイルは実質XMLなので、テキストとして差分管理が可能
2. Mermaid記法をMarkdownに埋め込む: ドキュメント内にMermaid記法で記述し、draw.ioは清書用に使う

docs/
  diagrams/
    er-diagram.drawio    ← XMLで差分管理
    er-diagram.png       ← エクスポート画像（.gitignoreに入れてもOK）
  architecture.md        ← Mermaid記法を埋め込み

まとめ

draw.io MCPサーバーにより、設計図の作成が「描く作業」から「伝える作業」に変わります。

• セットアップはコマンド1つ: claude mcp add drawio npx @drawio/mcp
• 3つの入力形式: XML（精密）、Mermaid（手軽）、CSV（階層構造）
• Firestoreのデータモデルも可視化: TypeScript型定義からER図を自動生成
• 編集可能な図が得られる: draw.ioエディタで微調整してエクスポート
• コードと図の乖離を防ぐ: 型定義を更新したら図も再生成するワークフロー

まずは claude mcp add drawio npx @drawio/mcp を実行して、自分のプロジェクトのデータモデルをER図にしてみてください。「図を描く時間がない」という悩みが解消されるはずです。

---

参考リンク：

• draw.io MCP Server（GitHub）
• @drawio/mcp（npm）
• Vibe Diagramming with draw.io's MCP Server