はじめに
「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 で一発生成する完全ガイド
コマンド定義ファイルの比較
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-webKiroの場合：.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/drawioSTEP 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更新時に自動生成 |
| 既存設定の移行 | — | 内容をそのままコピー可能 |
結論： 構成図作成だけなら両ツールでほぼ同じことができます。Hookによる自動化とSteeringによる共通スタイル管理が必要ならKiroが優位、シンプルに今すぐ始めたいならClaude Codeが手軽です。
関連記事：
- 【AWS構成図をVSCodeで作る】draw.io × Claude Code で一発生成する完全ガイド
- AWS Kiro完全ガイド｜Agentic IDEの全貌とは【セットアップ・料金・機能まで】
- AWS Kiro vs Claude Code vs Codex CLI｜IDE・CLI徹底比較
- Claude Code完全ガイド｜ターミナルで動くAIコーディングアシスタントの全貌
タグ: #Kiro #AWSKiro #ClaudeCode #drawio #VSCode #AWS構成図 #比較 #Skills #Hook #アーキテクチャ図
コメント