🖍️

draw.io MCPを使ってClaude Codeで持続可能なシステム構成図を書いてみる

に公開
AWS
draw.io
Model Context Protocol
Claude
tech

はじめに

https://zenn.dev/is0383kk/articles/b39bccc8264b47

こちらを記事を見てとても参考になったので私も試してみました。

draw.io × AI連携の3つのアプローチ

公式では、AIアシスタントとdraw.ioを連携させる方法として3つのアプローチが提供されています。

比較表

Tool Server App Server Project Instructions
動作 ブラウザの新タブでdraw.ioエディタを開く チャット内にiframeで図を埋め込み表示 Claude ProjectsでPython実行によりURL生成
対応フォーマット XML・CSV・Mermaid XMLのみ XML
インストール npmパッケージが必要 不要（mcp.draw.ioでホスト済み） 不要（Projectに指示文を追加するだけ）
利用環境 Claude Code / Claude Desktop / 任意のMCPクライアント Claude.ai / VS Code / MCP Apps対応ホスト Claude.ai（Projects機能）
向いている用途 ローカル開発のワークフロー チャット内でのクイックプレビュー MCP導入なしで手軽に試したい場合

Tool Server

ローカルにMCPサーバーを起動し、Claude CodeやClaude Desktopから利用する方式です。XML・CSV・Mermaidの3形式に対応しており、最も多機能です。生成された図はブラウザの新しいタブでdraw.ioエディタとして開かれるため、そのまま編集・エクスポートができます。

本記事ではこのTool Serverを使います。

App Server

draw.ioが mcp.draw.io でホストしているサーバーです。インストール不要で、チャットUI内にiframeとして図が埋め込まれます。Claude.aiのチャット上で直接プレビューできるため手軽ですが、XMLのみの対応で、ローカルファイルとの連携は限定的です。

Project Instructions

MCP自体を使わないアプローチです。Claude.aiのProjects機能で指示文を追加し、Python実行を通じてdraw.ioのURLを生成します。MCPの設定が不要なため導入障壁は最も低いですが、対話的な図の生成には向いていません。

セットアップ

1. draw.io MCPサーバー（Tool Server）の導入

Claude Codeの設定ファイルに、draw.ioのMCPサーバーを追加します。

~/.claude/mcp_servers.json
{
  "drawio": {
    "command": "npx",
    "args": ["-y", "@anthropic/draw.io-mcp"]
  }
}

2. MCPサーバーが提供するツール

draw.io MCPサーバーは3つのツールを提供します。

ツール 入力形式 用途
open_drawio_xml draw.io XML 最も自由度が高い。AWS/GCPアイコンなど高度なスタイルが使える
open_drawio_mermaid Mermaid記法 シンプルなフロー図に向いている
open_drawio_csv CSV 組織図やツリー構造の一括生成に便利

実践：自然言語から構成図を生成する

実際にアーキテクチャの構成図を生成してみます。

プロンプト例

Claude Codeに以下のようなテキストを入力します。

〇〇の構成でarchitecture図を書いて
（もう少し詳しくは伝えてますが）

これだけで、上記ような構成図が自動生成されます。

生成結果として

Claude Codeは open_drawio_xml ツールを選択し、以下を自動で処理しています。

  • AWSサービスアイコンの適用 — Lambda、S3、CloudFrontに公式スタイルのアイコンを使用
  • フローの分離 — STG（青枠）とPROD（赤枠）をエリアで色分け
  • Lambda内部処理の詳細化 — 4ステップの処理を内部ボックスとして展開
  • 承認フローのモデリング — PROD側のレビュー申請→承認→公開の人的プロセスを表現
  • 矢印ラベル — 「発火」「JSON配置」「DB反映」など各接続にラベルを付与

ポイントは、箇条書きレベルの要件から、レイアウト・色分け・AWSアイコンまで含めた構成図が一度に生成されることです。

git管理のすすめ

生成された図は .drawio ファイルとして保存すれば、gitでRepository内で管理できます。

sample

docs/
├── adr/  # Architecture Decision Records
└── architecture/
     └── microcms-content-delivery.drawio  # ← 構成図

.drawio ファイルの実体はXMLテキストなので、通常のソースコードと同様にdiffが取れます。

VSCodeでの編集

VS Codeの拡張機能 Draw.io Integration をインストールすれば、.drawio ファイルをエディタ上でGUI編集できます。

Claude Codeで雛形を生成 → VS Codeで微調整、というワークフローが効率的です。

プロンプトのコツ

より良い構成図を生成するためのポイントです。

1. フローの方向を明示する

左から右に流れる構成図を書いて

2. グルーピングを指示する

STGとPRODを別のエリアに分けて色分けして

3. 内部処理の粒度を指定する

Lambdaの内部処理を4ステップで展開して

4. 参照用の既存ファイルを渡す

リポジトリ内に既存の .drawio ファイルがあれば、そのスタイルを踏襲するよう指示できます。

docs/architecture/existing.drawio のスタイルに合わせて新しい構成図を作って

更新作業について

git管理できることで「対象のdrawio（構成図やデータフロー図）などを参照しながらhooksやrulesでコード内でのarchitectureに変更があった場合には更新作業をおこなって」と指示しておけば（SubAgent化してClaude codeのライフサイクルに入れておくのもあり）自動的に変更が走るのでドキュメントが形骸化しないと思います。

※ここについては今後の運用次第ですが
ここについても記事を各予定です。

まとめ

構成図は「作って終わり」ではなく、アーキテクチャの変更に応じて更新が必要となるのでコレは革新的だなと思いました。

参考

https://zenn.dev/is0383kk/articles/b39bccc8264b47

Discussion