Google Cloud の構成図を Cursor で draw.io に書いてみた
はじめに
こんにちは、クラウドエース株式会社 第一開発部の喜村です。
Google Cloud のアーキテクチャ設計では draw.io で構成図を書くことが多いですが、コンポーネントの配置や矢印の調整に思いのほか時間がかかります。
そこで、draw.io の MCP サーバーを Cursor に接続し、プロンプトだけで構成図を生成できるか試してみました。
draw.io と MCP について
draw.io とは
draw.io はフローチャートやネットワーク図など、さまざまな図を作成できる Web ベースの作図ツールです。ユーザー登録不要で利用でき、デスクトップアプリ版もあります。
Google Cloud をはじめとした各クラウドの公式アイコンセットが用意されているため、アーキテクチャ図の作成によく使われています。生成した図は画像や PDF への書き出しのほか、.drawio 形式のファイルとして保存・編集できるのも特徴です。
MCP（Model Context Protocol）とは
MCP は Anthropic が策定した、AI と外部ツールをつなぐためのオープンプロトコルです。MCP サーバーを介することで、AI エディタから外部サービスやツールを直接操作できるようになります。
draw.io にも公式の MCP サーバー（@drawio/mcp）が公開されており、対応した AI ツールからプロンプトで draw.io を操作できます。
事前準備
必要な環境
- Cursor がインストールされている
- Node.js がインストールされており
npxコマンドを実行できる
MCP サーバーの設定
Cursor では、~/.cursor/mcp.json に MCP サーバーの設定を記述します。ファイルが存在しない場合は新規作成してください。
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["@drawio/mcp"]
}
}
}
設定後に Cursor を再起動すると、draw.io MCP サーバーが有効になります。Cursor の設定画面（Settings > MCP）から接続状態を確認できます。
やってみた
シンプルな構成図を生成する
まず、以下のプロンプトで構成図の生成を依頼しました。
Google Cloud の Web アプリケーション構成図を draw.io で作成してください。
構成は以下の通りです：
- インターネットから Cloud Load Balancing でトラフィックを受け付ける
- Cloud Armor で保護する
- Cloud Run でアプリケーションを動かす
- データベースは Cloud SQL（PostgreSQL）を使用
- 静的ファイルは Cloud Storage に配置
- 認証情報は Secret Manager で管理
矢印で通信の流れを示してください。
draw.io が自動で立ち上がり、角丸ボックスとテキストラベルで構成図が生成されました。通信フローも矢印で表現されており、たたき台として使える内容です。
公式アイコン版に改善する
続けて、Google Cloud の公式アイコンを使うよう追加で依頼しました。
Google Cloud の公式アイコンを使って構成図を書き直してください。
mxgraph.gcp2 系のスタイルで公式アイコンに近い構成図が生成されました。見た目がぐっと資料らしくなります。
※ SecretManager のアイコンは正常に表示されませんでしたが、動作確認の結果をそのまま掲載しています。
生成された図は draw.io 上でそのまま編集できるため、後から配置やラベルを自由に調整できます。
プロンプトのコツ
実際に試してみて、安定した結果を得やすいと感じたポイントをまとめます。
構成を箇条書きで渡す
コンポーネントと役割を箇条書きで整理して渡すと、抜け漏れなく反映されやすいです。自然文で長々と説明するより、構造化して渡す方が安定します。
# 構成要素
- Cloud Load Balancing：外部トラフィックの受け口
- Cloud Armor：WAF・DDoS 対策
- Cloud Run：アプリケーション実行
# 要件
- 矢印でトラフィックの流れを表現する
- 左から右へのレイアウトにする
段階的に改善する
一度のプロンプトで完成形を目指すより、「まずシンプルに作る → アイコンを追加する → レイアウトを整える」のように段階的に依頼する方が結果が安定します。
修正は差分で指示する
全体を作り直すより、「〇〇の矢印を双方向に変えてください」のように変更点だけを伝える方が意図通りになりやすいです。
やってみての感想
よかった点
- たたき台が素早くできる：ゼロから手で引くよりも、議論の出発点を早く用意できます。
- 自然言語で修正できる：「矢印の向きを変えて」「コンポーネントを追加して」など、チャットで気軽に修正を依頼できます。
- 設計の漏れに気づきやすい：監視やロギングの追加を提案されることもあり、レビューのきっかけになりました。
気をつけたい点
- レイアウトの細かい調整は、最終的に draw.io 上で手作業になることがほとんどです。
- 一度のプロンプトで完成を狙うより、段階的に依頼する方が安定します。
さいごに
生成結果は編集可能な draw.io 形式であるため、実務における構成図のたたき台として活用しやすいと感じています。ただし、求めるクオリティ通りの出力は難しいため、最終的な調整は必要となるでしょう。
Google Cloud の構成図作成の効率化を検討している方の参考になれば幸いです。
Discussion