AWS構成図を生成するためにAgent Skillsで試行錯誤してみた
クラスメソッドでは AI 駆動開発を推進するための取り組みを行っており、クラスメソッド社員も実際に日常的に AI を使って開発を行っています。
今回、弊社メンバーが日常的に実践する AI 駆動開発のナレッジや Tips を共有するために、AI駆動開発 Advent Calendar 2025 を開催しています。
本ブログは、本企画の 12 日目の記事になります。
もし AI 駆動開発の最先端を知りたい方は、この 1 ヶ月間、ぜひ本アドベントカレンダーをチェックしてみてください。
はじめに
最近AWS構成図を書く機会が増え、生成AIでドラフト版を作成して多少楽をしたいと思うようになりました。
「〇〇のAWS構成図を描いて」と指示するだけでdraw.ioで編集可能な構成図が生成できたら便利ですよね。
今回はClaudeの一機能であるAgent Skillsを活用して、AWS構成図を生成するためのSkillを作成しました。
正直なところ、最後まで満足のいく品質には到達できませんでしたが、試行錯誤を重ねる中でAWSアイコンの誤用は大幅に減り、構成図としての体裁は整うようになりました。
本記事では、その試行錯誤の過程を紹介します。
最終的に生成できた構成図
試行錯誤の結果、以下のような構成図を生成できるようになりました。
まだ改善の余地はありますが、AWSアイコンが正しく表示され、グループ化やデータフローも整理された構成図が生成できるようになりました。
Agent Skillsとは
Agent Skillsは、Claudeに特定のドメイン知識や専門的なタスク実行能力を追加できる拡張機能です。
~/.claude/skills/ ディレクトリに SKILL.md ファイルを配置することで、Claudeに新しい能力を付与できます。
詳細は公式ドキュメントを参照してください。
今回出来上がったSkillの構成は以下のとおりです。
.claude/skills/aws-architecture-diagram/
├── SKILL.md # Skillの定義・ルール
├── references/
│ ├── aws-icons-analytics-ml.md # AI/ML・分析系アイコン定義
│ ├── aws-icons-common.md # 共通アイコン定義
│ ├── aws-icons-compute.md # コンピューティング系アイコン定義
│ ├── aws-icons-networking.md # ネットワーク系アイコン定義
│ ├── aws-icons-others.md # その他アイコン定義
│ ├── aws-icons-storage-database.md # ストレージ・DB系アイコン定義
│ └── layout-guidelines.md # レイアウトガイドライン
└── scripts/
└── find_aws_icon.py # アイコン検索スクリプト
SKILL.md には、AWS構成図を描画する際のルールやレイアウトの指針を記述しています。
references/ 配下には、カテゴリ別に分割したAWSアイコンのスタイル定義とレイアウトガイドラインを配置しています。
Skillsプラグインの導入
Skillを作成するにあたり、Anthropicが公開しているSkillsリポジトリをClaude Codeのプラグインとして導入しました。
以下のコマンドでマーケットプレイスを登録します。
/plugin marketplace add anthropics/skills
その後、example-skills をインストールします。
/plugin install example-skills@anthropic-agent-skills
このプラグインに含まれる skill-creator を使うことで、Skill作成のガイダンスやテンプレート生成が利用できます。
試行錯誤の過程
本記事を執筆するにあたり、Claude Code自身にログを遡って確認してもらい、試行錯誤の流れを整理してもらいました。
計画的に進めたわけではなく、生成結果を見て「ここが違うな」と思ったら都度Skillを修正する、という繰り返しでした。
1回目: まずは生成してみる
まずは簡単なプロンプトで構成図の生成を試みる。
Amazon Bedrock Knowledge Bases + Amazon OpenSearch Serverless + Amazon S3 で構成されたRAGシステムの構成図をdraw.ioで作成して。
生成された構成図がこちらです。
一見それらしく見えますが、以下の問題がありました。
- Amazon OpenSearch Serverlessが紫の四角形になっていて正しいアイコンが使われていない
- 複数のテキストが被っておりまともに識別できない
- 矢印が縦横に交差していてデータの流れが追いづらい
2回目: アイコン参照の改善
draw.ioで使用できるAWSアイコンの正確なスタイル定義を references/ 配下にカテゴリ別のMarkdownファイルとしてまとめました。
## Storage (#7AA116)
### Service Icons (resourceIcon)
| Icon Name | resIcon Value |
| ------------------- | ---------------------------------- |
| S3 | `mxgraph.aws4.s3` |
| Elastic Block Store | `mxgraph.aws4.elastic_block_store` |
| Glacier | `mxgraph.aws4.glacier` |
また、必要なアイコンを最小限のトークン消費で検索できるスクリプト find_aws_icon.py を作成しました。
これによりコンテキストを圧迫せずに、Claudeが正確なアイコンスタイルを取得できるようになり、不正なアイコンを使用する頻度が減りました。
3回目: レイアウトルールの追加
2回目の改善により、アイコンは正しく表示されるようになりました。
ただ、まだレイアウトに課題が残っていたので SKILL.md にレイアウトルールを追加しました。
## レイアウトルール
### グループ化の原則
- AWS Cloudグループを最外層とする
- 機能単位でサブグループを作成（Data Source、Knowledge Base、Vector Store など）
- グループは横並びを基本とし、データフローに沿って配置
### 接続線のルール
- Ingestion Flow: 破線（dashed）で表現
- Query Flow: 実線で表現
- 矢印の向きはデータの流れに合わせる
4回目: 色々な構成への対応
最終的には別パターンのアーキテクチャ構成にも対応できるようになりました。
微修正は必要なもののドラフト版としては十分です。
この図では以下の要素が適切に表現されています。
- 適切なグループ表現(VPC/Subnet/AZ/AutoScale)
- Application Load Balancer、Amazon ECS、Amazon RDSの3層構造
改善のポイント
試行錯誤を通じて得た主な知見をまとめます。
1. アイコンの正確な参照が重要
draw.ioのAWSアイコンは独自のスタイル定義が必要です。
事前に正確なスタイル情報をSkillに組み込んでおくことで、アイコンの描画ミスを防げます。
また、draw.ioではAmazon OpenSearch ServiceがElasticsearch Serviceという旧名称のままになっており、生成AIが正しいアイコンを見つけられないケースがありました。
2. レイアウトルールは具体的に
「見やすく配置して」という曖昧な指示では品質が安定しません。
グループ化の階層、配置方向、接続線の種類など、具体的なルールを明文化することが重要です。
3. 同じプロンプトで検証を繰り返す
Skillを修正するたびに同じプロンプトで生成結果を比較することで、改善の効果を正確に測定できます。
生成AIアプリケーションと同様にInput/Outputのズレを見て修正を繰り返す必要があります。
まとめ
今回はAgent Skillsを活用してAWS構成図を生成するSkillを作成しました。
残念ながらワンショットで完璧な構成図が生成できたわけではなく、以下のサイクルを繰り返すことで多少品質を向上させることができました。
1. Skill作成
↓
2. テスト実行
↓
3. 問題発見
↓
4. SKILL.md修正
↓
5. 再テスト
↓
(繰り返し)
今後もSkillの改善を続けて、より高品質な構成図を生成できるようにしていきたいと思います。
今回作成したSkillはもう少し使い物になるレベルまで改善できたら公開するかもしれません...
どなたかの参考になれば幸いです。
