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

caymezon — Sun, 12 Apr 2026 03:54:32 +0000

はじめに
前提：draw.io × VSCodeの設定は共通
コマンド定義ファイルの比較
1. Claude Codeの場合：.claude/commands/drawio.md
2. Kiroの場合：.kiro/skills/drawio/SKILL.md
設定の違いを一覧で比較
Kiroの「description」フィールドが生む追加メリット
Steeringでdraw.ioのスタイルを一元管理
1. Claude CodeのCLAUDE.mdアプローチ
2. KiroのSteeringアプローチ
Hookとの組み合わせ：Kiroならではの活用法
1. 活用例1: CloudFormationが更新されたら構成図を自動更新
2. 活用例2: 構成図の変更を検知してレビューコメントを追加
draw.ioスタイルの移行手順
生成される構成図の品質比較
どちらを使うべきか
1. Claude Codeが向いているケース
2. Kiroが向いているケース
まとめ

はじめに

「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拡張機能のインストールはどちらのツールを使う場合も同じです。

項目	内容
拡張機能名	Draw.io Integration
作者	Henning Dieterichs
拡張機能ID	`hediet.vscode-drawio`
価格	無料

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

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

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

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

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

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と変わりません。

設定の違いを一覧で比較

比較項目	Claude Code	Kiro
ファイルパス	`.claude/commands/drawio.md`	`.kiro/skills/drawio/SKILL.md`
コマンド名の決まり方	ファイル名（`drawio.md` → `/drawio`）	YAMLの`name`フィールド
必要なヘッダー	なし（Markdownのみ）	YAML frontmatter（name + description）
descriptionの役割	なし	AIが自動マッチング判定に使う
実行方法	`/drawio ec2-apache-web`	`/drawio ec2-apache-web`（同じ）
グローバル配置	`~/.claude/commands/`	`~/.kiro/skills/`
参考資料フォルダ	なし（1ファイルに記述）	`references/` サブフォルダに分離可

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構成図の自動生成という観点での両ツールの違いをまとめます。

観点	Claude Code	Kiro
設定の手軽さ	ファイル1つでOK	フォルダ + YAML frontmatter必要
コマンド実行	`/drawio {dir}`	`/drawio {dir}`（同じ）
自動起動	スラッシュのみ	自然言語からも起動
スタイル管理	コマンドファイル内に記述	Steeringで一元管理可能
自動化	手動トリガーのみ	Hookでtemplate.yaml更新時に自動生成
既存設定の移行	—	内容をそのままコピー可能