はじめに
AWSの構成図ってどうやって作ってますか？
「PowerPointで手描き」「Cacooを使っている」「そもそも作っていない」——そんな人に向けて、VSCode上でdraw.ioを使い、AWS構成図を効率よく作成・管理する方法を紹介します。
さらに、Claude Code（AIコーディングアシスタント）と組み合わせることで、構成を伝えるだけで構成図のXMLを自動生成できます。実際にRDS MySQL + EC2のハンズオン構成図を作成した体験をもとに、セットアップから応用テクニックまで丁ez解説します。
draw.io × VSCode を選ぶ理由
AWS構成図ツールはいくつかありますが、この組み合わせが特におすすめな理由はこちらです。
| 比較項目 | draw.io × VSCode | その他ツール（Cacoo等） |
|---|---|---|
| コスト | 無料 | 有料プランあり |
| ファイル管理 | .drawioファイルとしてGitで管理可能 | クラウド保存のみ |
| AWS公式アイコン | 標準搭載（AWS4ライブラリ） | 別途インポート必要な場合あり |
| オフライン対応 | 完全対応 | インターネット必須 |
| AI連携 | Claude CodeでXML自動生成 | 非対応 |
環境セットアップ
必要なもの（これだけ）
VSCodeに拡張機能を1つインストールするだけです。
VSCode拡張機能: Draw.io Integration
| 項目 | 内容 |
|---|---|
| 作者 | Henning Dieterichs |
| 拡張機能ID | hediet.vscode-drawio |
| 価格 | 無料 |
インストール手順
- VSCodeの左サイドバーの拡張機能アイコン（四角が4つ並んだアイコン）をクリック
- 検索欄に
Draw.io Integrationと入力 - 「Draw.io Integration」（作者: Henning Dieterichs）をクリック
- 「インストール」ボタンをクリック
これだけで準備完了です。ブラウザ版のdraw.ioは不要です。
基本的な使い方
.drawioファイルの作成と開き方
rds-mysql-ec2/
├── README.md
├── template.yaml
├── architecture.drawio ← ここに作成
└── docs/
├── 1_console.md
└── 2_cloudformation.md.drawioファイルをVSCode上でダブルクリックするだけで、draw.ioのエディタが自動的に起動します。
AWSアイコンライブラリの有効化
デフォルトではAWSアイコンは表示されていません。以下の手順で有効化します。
- draw.ioエディタ左サイドバー下部の 「+ More Shapes」 をクリック
- 「Networking」カテゴリ内の 「AWS 19」または「AWS 21」 にチェック
- 「Apply」をクリック
これでEC2・VPC・RDS・S3・Lambda などの公式AWSアイコンが使えるようになります。
基本操作
| 操作 | 方法 |
|---|---|
| 図形の追加 | 左サイドバーからドラッグ＆ドロップ |
| 図形の移動 | 図形をドラッグ |
| 図形の接続 | 図形にホバー → 青いハンドルをドラッグ |
| テキスト編集 | 図形をダブルクリック |
| スタイル変更 | 右クリック → 「スタイルの編集」 |
| コピー＆ペースト | Ctrl+C / Ctrl+V |
| 元に戻す | Ctrl+Z |
よく使うショートカット
| ショートカット | 動作 |
|---|---|
Ctrl + Shift + - | 縮小 |
Ctrl + Shift + + | 拡大 |
Ctrl + Shift + H | 水平方向に中央揃え |
Ctrl + Shift + V | 垂直方向に中央揃え |
Ctrl + G | グループ化 |
Ctrl + Shift + G | グループ解除 |
Ctrl + E | スタイル編集ダイアログを開く |
オススメ機能・テクニック
① XMLを直接編集してピクセル精度の調整
draw.ioのファイル（.drawio）の実体はXMLです。VSCodeでXMLを直接編集することで、GUIでは難しい精密な位置調整が可能です。
XMLエディタを開く方法:
- 右クリック → 「XMLを編集」
- またはメニュー「Extras」→「Edit Diagram」
重要: z-order（前後関係）の制御
draw.ioのXMLは後に書かれた要素が前面に描画されます。これを利用すると、背景・グループ枠・アイコン・矢印の重なり順を意図通りにコントロールできます。
<!-- 正しいXML要素の順序 -->
<!-- 1. VPC背景（最背面） -->
<!-- 2. DBサブネットグループ背景 -->
<!-- 3. サブネットグループ -->
<!-- 4. SGボックス枠 -->
<!-- 5. アイコン -->
<!-- 6. 矢印・接続線（最前面） ← 必ず末尾に -->矢印を最後に書くことで、どの背景の上にも矢印が表示されます。
② AWSアイコンのラベルをアイコン下部に表示する
デフォルトではラベル（テキスト）がアイコン内部に重なって読みにくくなります。以下のスタイルを設定することで、ラベルをアイコンの下に表示できます。
verticalLabelPosition=bottom;verticalAlign=top;aspect=fixedスタイルの設定方法:
- アイコンを右クリック → 「スタイルの編集」
- 上記のスタイル文字列を追記
③ テンプレートの再利用
一度きれいな構成図を作成したら、それをテンプレートとしてコピーすることで次回以降も同じクオリティで作れます。
# 既存の構成図をコピーして新しいハンズオン用に使い回す
cp rds-mysql-ec2/architecture.drawio new-handson/architecture.drawioXMLエディタで不要な要素を削除・変更するだけで新しい構成図が完成します。
④ PNG/SVGエクスポートで共有
構成図を画像として共有するには:
- メニュー「File」→「Export As」→「PNG...」または「SVG...」
- 解像度・サイズを設定してエクスポート
Gitに.drawioファイルを管理しておけば、履歴も残り複数人での編集も可能です。
実際のAWS構成図：RDS MySQL + EC2 接続
RDS MySQL（マネージドDB）とEC2（Webサーバ）を接続するハンズオン構成図です。
インターネット
↓ HTTP:80 / SSH:22
Internet Gateway
↓
┌── VPC (10.0.0.0/16) ──────────────────────────────────┐
│ ┌── パブリックサブネット 10.0.1.0/24 [AZ-a] ────────┐ │
│ │ ┌─ EC2 SG (SSH:22/HTTP:80) ─┐ │ │
│ │ │ EC2 (Apache + mysql) │ │ │
│ │ └───────────────────────────┘ │ │
│ └────────────────────────────────────────────────┘ │
│ ↓ MySQL:3306 SG-to-SG │
│ ┌── DBサブネットグループ ─────────────────────────────┐ │
│ │ ┌─ プライベート1 [AZ-a] ─┐ ┌─ プライベート2 [AZ-b]─┐│ │
│ │ │ ┌─ RDS SG ────────┐ │ │ (配置なし・2AZ要件) ││ │
│ │ │ │ RDS MySQL 8.0 │ │ │ ││ │
│ │ │ └─────────────────┘ │ └─────────────────────┘│ │
│ │ └─────────────────────┘ │ │
│ └──────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────┘
EC2 ----→ SSM Parameter Store
/n123456/rds/db-password
ポイント:
- DBサブネットグループ: RDSの可用性要件で2AZ以上のサブネットが必要
- SG-to-SG制御: RDSのセキュリティグループのソースにEC2のSGを指定（IPではなくSGで制御）
- SSM Parameter Store: DBパスワードをEC2から安全に取得
Claude Code との組み合わせ（上級者向け）
.drawioファイルの実体がXMLということを活用した、Claude Codeとの強力な組み合わせを紹介します。
Claude Code でXMLを自動生成
「この構成のAWS構成図を作って」とClaudeに依頼するだけで、.drawioファイルのXMLを直接生成してもらえます。
依頼の例:
RDS MySQL + EC2 の構成図を architecture.drawio として生成して。
VPC（10.0.0.0/16）、パブリックサブネット（EC2）、
DBサブネットグループ（プライベートサブネット2つ）、
SSM Parameter Store への接続も含めて。生成されたXMLをVSCodeで開くだけで構成図が完成します。手で描く手間がほぼありません。
/drawio スラッシュコマンドの設定
毎回指示を書くのが面倒な場合、.claude/commands/drawio.mdにスラッシュコマンドを設定することで、次のように簡単に呼び出せます。
/drawio rds-mysql-ec2これだけで、対象フォルダのREADME.mdとtemplate.yamlを読み込んで統一スタイルの構成図を生成してくれます。
よくあるトラブルと解決策
アイコンの画像が表示されない（ピンクの四角になる）
原因: 指定したシェイプ名が draw.io に存在しない。
例: resIcon=mxgraph.aws4.systems_manager_parameter_store は存在しない。
解決策: 近い名前の汎用アイコンを使う。
resIcon=mxgraph.aws4.systems_manager矢印が背景に隠れて見えない
原因: XMLで矢印が背景グループより先に定義されているため、背景が前面に描画されて矢印を隠している。
解決策: XMLエディタで矢印の要素をすべてXMLの末尾に移動する。
テキストとアイコンが重なる
原因: デフォルトではラベルがアイコンの内部に描画される。
解決策: 各アイコンに以下のスタイルを追加する。
verticalLabelPosition=bottom;verticalAlign=top;まとめ
draw.io × VSCode の組み合わせは、無料・Git管理可能・AWS公式アイコン対応という三拍子が揃った最強のAWS構成図ツールです。
| ステップ | 内容 |
|---|---|
| ① | VSCodeに Draw.io Integration をインストール |
| ② | .drawioファイルをハンズオンフォルダ配下に配置 |
| ③ | 左サイドバー「+ More Shapes」でAWSアイコンを有効化 |
| ④ | ドラッグ＆ドロップで構成図を作成 |
| ⑤ | XMLエディタでz-orderや位置を微調整 |
| ⑥ | Gitでバージョン管理 |
Claude Codeを使える環境であれば、構成を伝えるだけでXMLを自動生成できるので、さらに効率的です。
AWSのハンズオンや学習のたびに構成図を残す習慣をつけることで、後から見返したときの理解が格段に深まります。ぜひ試してみてください。
コメント