システム構成図の作成に、もう何時間も費やす必要はありません。 2026年2月10日、**「draw.io公式MCPサーバ」**がリリースされました。
これを使えば、Claude Code にプロンプトを投げるだけで、ブラウザが立ち上がり、綺麗な構成図が瞬時に完成します。 今回は、Windows環境でのセットアップから、実際のAWS構成図生成までの流れを徹底解説します。
1. わずか3分！draw.io MCPサーバの準備
導入は非常にシンプルです。
■ MCP定義ファイルを用意する
[cite_start]まず、以下のJSON内容で設定ファイル（例：.mcp.drawio.json）を作成します。
JSON
{
"mcpServers": {
"drawio": {
"command": "cmd",
"args": ["/c", "npx", "-y", "@jgraph/drawio-mcp"]
}
}
}
POINT: Windows環境では
cmdと/cを組み合わせてnpxを呼び出すのがコツです。
■ Claude Codeを起動して疎通確認
作成したファイルを指定して Claude Code を立ち上げます。
Bash
claude --mcp-config .mcp.drawio.json
起動後、/mcp コマンドを入力し、drawio connected と表示されれば準備完了です！
2. 実践：IaC（AWS SAM）から構成図を生成する
このツールの真骨頂は、既存のコードを読み取って図解してくれる点にあります。
テキトーな指示でも「プロ級」の仕上がり
例えば、AWS SAMの template.yaml を読み込ませ、「drawio MCPを使って構成図を作って」と指示してみます。
- 自動ブラウザ起動: 指示後、すぐにブラウザでdraw.ioが開き、図が表示されます。
- 高い理解度: リソースだけでなく、ユーザーからのリクエストフローまで丁寧に図示してくれます。
- アイコン対応: 指示次第で、AWSサービスの公式アイコンを付与することも可能です。
3. 実際に使ってわかった「メリット」と「活用のコツ」
実際に試してみて感じた、現場で役立つポイントをまとめました。
| メリット | 補足・活用アドバイス |
| ブラウザ上で即編集可能 | AIが描いた図で文字が被っていても、手動でサクッと微調整できます。 |
| エクスポートが容易 | 完成した図はそのまま画像やPDFとして出力し、ドキュメントに添付できます。 |
| IaCとの親和性が抜群 | template.yaml などのリソース定義を正確に可視化してくれます。 |
注意点: 完璧なレイアウトが一発で出るわけではありません。 [cite_start]「8割をAIに描かせて、残りの2割を人間が整える」というスタンスが、最も生産性を最大化できます。
4. まとめ：AIに「描かせる」時代へ
draw.io MCPの登場により、エンジニアは「図を描く作業」から解放され、「設計を考える作業」に集中できるようになります。 最新のMCP技術を使いこなし、周りのエンジニアと一歩差をつけましょう。
やさしいMCP入門（AMAZONで書籍をチェック）
AIエージェント時代の標準規格MCP（モデル コンテキスト プロトコル）の入門書。
大バズりしたスライド「やさしいMCP入門」の著者が新技術の基礎をやさしく解説。
