はじめに

AWSの構成図ってどうやって作ってますか？

「PowerPointで手描き」「Cacooを使っている」「そもそも作っていない」——そんな人に向けて、VSCode上でdraw.ioを使い、AWS構成図を効率よく作成・管理する方法を紹介します。

さらに、Claude Code（AIコーディングアシスタント）と組み合わせることで、構成を伝えるだけで構成図のXMLを自動生成できます。実際にRDS MySQL + EC2のハンズオン構成図を作成した体験をもとに、セットアップから応用テクニックまで丁ez解説します。

draw.io × VSCode を選ぶ理由

AWS構成図ツールはいくつかありますが、この組み合わせが特におすすめな理由はこちらです。

環境セットアップ

必要なもの（これだけ）

VSCodeに拡張機能を1つインストールするだけです。

VSCode拡張機能: Draw.io Integration

インストール手順

1. VSCodeの左サイドバーの拡張機能アイコン（四角が4つ並んだアイコン）をクリック
2. 検索欄に Draw.io Integration と入力
3. 「Draw.io Integration」（作者: Henning Dieterichs）をクリック
4. 「インストール」ボタンをクリック

これだけで準備完了です。ブラウザ版の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アイコンは表示されていません。以下の手順で有効化します。

1. draw.ioエディタ左サイドバー下部の 「+ More Shapes」 をクリック
2. 「Networking」カテゴリ内の 「AWS 19」または「AWS 21」 にチェック
3. 「Apply」をクリック

これでEC2・VPC・RDS・S3・Lambda などの公式AWSアイコンが使えるようになります。

基本操作

よく使うショートカット

オススメ機能・テクニック

① 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

スタイルの設定方法:

1. アイコンを右クリック → 「スタイルの編集」
2. 上記のスタイル文字列を追記

③ テンプレートの再利用

一度きれいな構成図を作成したら、それをテンプレートとしてコピーすることで次回以降も同じクオリティで作れます。

# 既存の構成図をコピーして新しいハンズオン用に使い回す
cp rds-mysql-ec2/architecture.drawio new-handson/architecture.drawio

XMLエディタで不要な要素を削除・変更するだけで新しい構成図が完成します。

④ PNG/SVGエクスポートで共有

構成図を画像として共有するには:

1. メニュー「File」→「Export As」→「PNG...」または「SVG...」
2. 解像度・サイズを設定してエクスポート

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構成図ツールです。

Claude Codeを使える環境であれば、構成を伝えるだけでXMLを自動生成できるので、さらに効率的です。

AWSのハンズオンや学習のたびに構成図を残す習慣をつけることで、後から見返したときの理解が格段に深まります。ぜひ試してみてください。

The post 【AWS構成図をVSCodeで作る】draw.io × Claude Code で一発生成する完全ガイド first appeared on CayTech Lab.