はじめに

「VSCodeのdraw.io拡張機能でAWS構成図を作れることは知っている。でもKiroでも同じことができるの？Claude Codeと何が違うの？」

前回の記事では、VSCodeのDraw.io Integration拡張機能とClaude Codeを組み合わせてAWS構成図を自動生成する方法を紹介しました。

本記事では、同じことをAWS Kiroでやるとどう変わるかを徹底比較します。どちらのツールも「/drawio ec2-apache-web のようなコマンド一発で構成図を生成できる」という点は同じですが、設定方法・機能・使い勝手に明確な違いがあります。

前提：draw.io × VSCodeの設定は共通

まず、Draw.io Integration VSCode拡張機能のインストールはどちらのツールを使う場合も同じです。

インストール手順・AWSアイコンライブラリの有効化方法は以下の記事を参照してください。

• 【AWS構成図をVSCodeで作る】draw.io × Claude Code で一発生成する完全ガイド

【AWS構成図をVSCodeで作る】draw.io × Claude Code で一発生成する完全ガイド

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

caymezon.com

2026.04.11

コマンド定義ファイルの比較

Claude Codeの場合：.claude/commands/drawio.md

Claude Codeでは .claude/commands/ フォルダにMarkdownファイルを置くだけです。ファイル名がそのままコマンド名になります。

ファイル構造：

プロジェクト/
└── .claude/
    └── commands/
        └── drawio.md   ← このファイル名が /drawio コマンドになる

drawio.md の内容（抜粋）：

# AWS 構成図生成スキル

対象ハンズオンの draw.io 構成図を生成する。

## 使い方
/drawio {ハンズオンのディレクトリ名}

## 実行手順
1. 指定されたディレクトリのREADME.mdとtemplate.yamlを読み込む
2. architecture.drawioを生成して保存する

## draw.io 生成ルール
（スタイル定義・アイコン対応表など）

実行：

/drawio ec2-apache-web

Kiroの場合：.kiro/skills/drawio/SKILL.md

Kiroでは .kiro/skills/ 配下にフォルダを作り、その中に SKILL.md を置きます。YAML frontmatterでnameとdescriptionを定義する点が違います。

ファイル構造：

プロジェクト/
└── .kiro/
    └── skills/
        └── drawio/         ← フォルダ名はなんでもよい
            └── SKILL.md    ← 必ずこのファイル名

SKILL.md の内容：

---
name: drawio
description: AWS構成図をdraw.io形式で生成する。ハンズオンのディレクトリ名を指定してarchitecture.drawioを作成する。
---

# AWS 構成図生成スキル

対象ハンズオンの draw.io 構成図を生成する。

## 使い方
/drawio {ハンズオンのディレクトリ名}

## 実行手順
1. 指定されたディレクトリのREADME.mdとtemplate.yamlを読み込む
2. architecture.drawioを生成して保存する

## draw.io 生成ルール
（スタイル定義・アイコン対応表など ← Claude Codeのものをそのままコピー可）

実行：

/drawio ec2-apache-web

実行方法は全く同じです。 コマンド名も使い方もClaude Codeと変わりません。

設定の違いを一覧で比較

Kiroの「description」フィールドが生む追加メリット

Claude CodeのSlash Commandは「明示的に呼ばないと起動しない」ですが、Kiroのdescriptionフィールドにより自然言語からも自動起動されます。

例：

---
name: drawio
description: AWS構成図をdraw.io形式で生成する。ハンズオンのディレクトリ名を指定してarchitecture.drawioを作成する。
---

この設定があると：

# スラッシュコマンドで明示実行（従来通り）
/drawio ec2-apache-web

# 自然言語でも自動起動
> ec2-apache-webの構成図をdraw.ioで作って
→ Kiroがdescriptionを見て自動的にdrawioスキルを起動

Steeringでdraw.ioのスタイルを一元管理

Claude CodeのCLAUDE.mdアプローチ

Claude Codeでは drawio.md の中にスタイル定義を全部書きます。複数のコマンドがあっても共通スタイルをどこかに一元管理する仕組みはありません。

KiroのSteeringアプローチ

Kiroでは共通ルールをSteeringファイルに分離できます。

.kiro/
├── steering/
│   └── drawio-style.md     ← draw.ioの共通スタイル定義
└── skills/
    ├── drawio/
    │   └── SKILL.md        ← 「drawio-style.mdを参照すること」とだけ書けばOK
    └── drawio-sequence/
        └── SKILL.md        ← こちらも同じスタイル定義を参照

drawio-style.md（Steeringファイル）：

---
inclusion: auto
description: draw.ioでAWS構成図を生成する際のスタイル定義
---

# draw.io AWS構成図 共通スタイルガイド

## キャンバス設定
- A4横（1169×827）で統一

## XML要素の順序
1. VPC背景 → 2. サブネット → 3. SGボックス → 4. アイコン → 5. 矢印

## サービスカラー・アイコン名
| サービス | fillColor | resIcon |
|---------|-----------|---------|
| EC2 | #ED7100 | mxgraph.aws4.ec2 |
（以下省略）

SKILL.md（スキルファイル）：

---
name: drawio
description: AWS構成図をdraw.io形式で生成する
---

# AWS構成図生成スキル

drawio-style.mdのスタイルガイドに従って構成図を生成してください。

## 実行手順
1. 指定ディレクトリのREADME.mdとtemplate.yamlを読み込む
2. architecture.drawioを生成して保存する

スタイル定義の変更が必要なときは drawio-style.md だけ修正すれば、すべてのdrawio関連スキルに反映されます。

Hookとの組み合わせ：Kiroならではの活用法

Claude CodeにはないHookとの組み合わせで、構成図管理をさらに効率化できます。

活用例1: CloudFormationが更新されたら構成図を自動更新

Hookトリガー: template.yaml の保存時
実行内容: drawioスキルを使って architecture.drawio を自動更新してください

template.yaml を編集して保存するたびに、構成図が自動で最新の状態に更新されます。手動で構成図を更新し忘れる問題がなくなります。

活用例2: 構成図の変更を検知してレビューコメントを追加

Hookトリガー: architecture.drawio の保存時
実行内容: 変更された構成についてセキュリティ観点でのコメントをdocs/review.mdに追記してください

draw.ioスタイルの移行手順

既にClaude Codeで使っている drawio.md をKiroに移行する手順です。

STEP 1: フォルダを作成

mkdir -p .kiro/skills/drawio

STEP 2: SKILL.md を作成

---
name: drawio
description: AWS構成図をdraw.io形式で生成する。ハンズオンのディレクトリ名を指定してarchitecture.drawioを作成する。
---

（.claude/commands/drawio.md の内容をそのままコピー）

STEP 3: 動作確認

KiroのチャットパネルでSkilsセクションに drawio が表示されることを確認し、/drawio rds-mysql-ec2 で実行。

注意： draw.ioの生成ルール（スタイル定義・アイコン対応表）はそのままコピーして使えます。フォーマット変換は不要です。

生成される構成図の品質比較

両ツールとも同じClaudeモデルを使うため、生成される構成図のXMLクオリティに本質的な差はありません。

ただし実際の品質は「スキル定義の精度」に依存します。

品質 ≒ スキル定義の精緻さ

精緻なスタイルガイド → 一貫したレイアウト・アイコン・配色
曖昧なスタイルガイド → セッションによってバラつく

どちらのツールでも、前回の記事で紹介したような詳細なスタイルガイドを定義することが品質の鍵です。

どちらを使うべきか

Claude Codeが向いているケース

✅ 今すぐ始められる（設定ファイルが.mdだけ）
✅ ターミナル操作に慣れている
✅ 構成図作成以外の作業もターミナルで行う
✅ プロジェクト外のファイルも参照したい

Kiroが向いているケース

✅ GUIで作業したい
✅ 構成図作成をHookで自動化したい（template.yaml更新で自動再生成）
✅ 複数のdraw.ioコマンドで共通スタイルをSteeringで一元管理したい
✅ 構成図作成からAWSハンズオンの実装まで一気に進めたい

まとめ

AWS構成図の自動生成という観点での両ツールの違いをまとめます。

結論： 構成図作成だけなら両ツールでほぼ同じことができます。Hookによる自動化とSteeringによる共通スタイル管理が必要ならKiroが優位、シンプルに今すぐ始めたいならClaude Codeが手軽です。

関連記事：

• 【AWS構成図をVSCodeで作る】draw.io × Claude Code で一発生成する完全ガイド

【AWS構成図をVSCodeで作る】draw.io × Claude Code で一発生成する完全ガイド

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

caymezon.com

2026.04.11

• AWS Kiro完全ガイド｜Agentic IDEの全貌とは【セットアップ・料金・機能まで】

AWS Kiro完全ガイド｜Agentic IDEの全貌とは【セットアップ・料金・機能まで】【2026年4月版】

はじめに「Claude CodeやCodex CLIのようなAI開発ツールはターミナル操作が必要で難しい…」「AWSを使った開発をもっとスマートにしたい。IDEでAIに設計から実装まで任せたい…」そんな悩みに応えるのがAWS Kiroです。...

caymezon.com

2026.04.12

• AWS Kiro vs Claude Code vs Codex CLI｜IDE・CLI徹底比較

AWS Kiro vs Claude Code vs Codex CLI｜IDE・CLI徹底比較【Kiroだけができること一覧】【2026年4月版】

はじめに「Claude Code、Codex CLI、そしてAWS Kiro——どれを選べばいいのか分からない…」AIを使った開発ツールが乱立する2026年、三者の違いを正確に理解している人は意外と少ないです。特に「Kiroだけにできて、C...

caymezon.com

2026.04.12

• Claude Code完全ガイド｜ターミナルで動くAIコーディングアシスタントの全貌

Claude Code完全ガイド｜ターミナルで動くAIコーディングアシスタントの全貌【2026年4月版】

はじめに「AIにコードを書かせたいけど、ブラウザとエディタを行き来するのが面倒…」そんな悩みを解決するのがClaude Codeです。2026年4月時点で、Anthropicが提供するターミナル型AIエージェントとして、開発者の間で急速に注...

caymezon.com

2026.02.14

タグ: #Kiro #AWSKiro #ClaudeCode #drawio #VSCode #AWS構成図 #比較 #Skills #Hook #アーキテクチャ図

The post AWS構成図をKiroで自動生成｜Claude CodeとVSCode draw.io活用を徹底比較【2026年4月版】 first appeared on CayTech Lab.

はじめに

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.