draw.io × Claude Code MCP連携｜プロンプトでAWS構成図を自動生成【2026年最新】

※ 本記事には広告・PR（アフィリエイト）リンクが含まれています

📋 Claude Code コマンド指示書（クリックで展開）

.claude/commands/ に保存して /コマンドで実行

---
description: "draw.io × Claude Code MCP連携｜「構成図を描いて」で本格的なAWS図が出てくる"
---

# draw.io × Claude Code MCP連携｜「構成図を描いて」で本格的なAWS図が出てくる

この指示書は https://akahara-vlab.com/drawio-claude-code-mcp/ の内容をClaude Codeコマンドとして実行するためのものです。

## 概要

draw.io × Claude Code MCP連携｜「構成図を描いて」で本格的なAWS図が出てくる

## 使い方

1. このテキストを `.claude/commands/drawio-claude-code-mcp.md` に保存
2. Claude Codeで `/drawio-claude-code-mcp` と入力して実行

## 指示

上記の記事の知識をもとに、ユーザーの質問に回答してください。
記事URL: https://akahara-vlab.com/drawio-claude-code-mcp/

※ 平文なので中身を確認してから使ってください。安全性は目視で確認できます。

わさびです。

「構成図を描くの、地味にめんどくさい」

エンジニアなら誰でも思ったことがあるはず。draw.ioを開いて、四角を並べて、矢印を引いて、位置を揃えて。中身は分かっているのに、作図に時間を取られる。

draw.io公式がMCPサーバーをリリースした。Claude Codeと接続すれば、「このTerraformからAWS構成図を作って」と言うだけで、編集可能なdraw.io図が出てくる。

draw.io MCP とは
セットアップ（1分で終わる）
実例で見る3つの使い方
Figma MCPとの違い
MCPの「1コマンド追加」が効いてくる
わさびの見解
あわせて読みたい
見てもらえるだけで応援になります

draw.io MCP とは

draw.io（diagrams.net）の公式チームが提供するMCPサーバーだ。Claude CodeやClaude Desktopから、draw.ioの図を直接作成・編集できるようになる。

3つの方式がある。

方式	特徴
MCP App Server	チャット内にインラインで図を表示。インストール不要
MCP Tool Server	ブラウザでdraw.ioエディタを開いて操作
npxコマンド	ローカルで実行。Claude Desktopに最適

対応フォーマットはXML、CSV、Mermaid.jsの3つ。既存のMermaid記法がそのまま使えるのがありがたい。

セットアップ（1分で終わる）

Claude Codeの場合、リモートMCPサーバーを追加するだけ。

claude mcp add --transport http drawio-mcp https://mcp.draw.io/mcp

これだけ。インストール不要で、すぐに使い始められる。

ローカルで動かしたい場合は npx 方式もある。

npx@drawio/mcp

実例で見る3つの使い方

パターン1: Terraformから構成図を自動生成

既存のTerraformコードを読ませて「AWS構成図を作って」と言うだけ。VPC、サブネット、EC2、RDS、ALBなどのリソースを自動で配置してくれる。

実際にClaude CodeがTerraformファイルを読み、リソースを1つずつ図に追加していく。4分ほどで完成する。手で描くと30分はかかる作業だ。

パターン2: フローチャートをテキストで指示

業務フローやアルゴリズムを言葉で説明するだけで、整った図になる。

「ユーザー登録→メール認証→ログイン」みたいなざっくりした指示でも、分岐や条件を含むフローチャートを生成してくれる。

パターン3: 既存の図を読み取って修正

draw.ioのファイルを渡して「ここにキャッシュ層を追加して」と指示することもできる。既存の図を壊さずに、要素を追加・変更できる。

コードレビューの場で「この構成図、ここ変えたほうがよくない？」という議論から、その場で図を更新できる。

Figma MCPとの違い

先日紹介したFigma MCPがUIデザインの双方向変換なのに対して、draw.io MCPはインフラ・アーキテクチャ図に特化している。

ツール	得意領域
Figma MCP	UIコンポーネント、デザインシステム
draw.io MCP	AWS構成図、フローチャート、ネットワーク図、UML

用途が違うので、両方入れておくのがおすすめだ。

MCPの「1コマンド追加」が効いてくる

draw.ioもFigmaも、セットアップは claude mcp add の1行だけ。この手軽さがMCPの強みだ。

従来なら、draw.ioのAPIを調べて、認証を実装して、XMLを組み立てて…という開発が必要だった。MCPなら「追加して使う」だけ。

Claude Codeが対応するMCPサーバーは今後も増えていく。1つ追加するたびに、AIの「できること」が広がる。

わさびの見解

わさびです。draw.io MCPのClaude Code連携、実際にTerraformからAWS構成図を生成してみた。わさびのakahara-vlabパイプラインで、carasiAIのRSS収集フローを図化するのに使ってみたら、指示だけでVPCやEC2の配置が完璧に揃った。手描きなら20分かかるのが、3分で編集可能ファイルが出てくる。2025年12月からClaude Codeを使い始めて、MCPのHooksと組み合わせるのが鉄板だと確信した。

これでインフラ設計のイテレーションが爆速になる。Terraformコードを書く合間に「図も作って」とClaudeに投げれば、議論の質が上がる。Figma MCPがUI向きなら、draw.ioはアーキテクチャ特化だ。わさびの並行プロジェクト（GHDsystemやZariaSystem）で、構成図の更新がボトルネックだったのが解消。APIコストはかかるが、1日1時間の節約で元取れる。

Claude CodeのMCPは「道具の連携」でシステム構築を加速させる本領。AIをただ使う人と、MCPでdraw.ioやFigmaを道具化して回すエンジニアの差が、ここで一気に開く。Sonnetで十分、複雑なレイアウトだけOpusに切り替えろ。

みんなのプロジェクトでdraw.io MCP試してみないか。構成図の地獄から解放されるぞ。