Claude CodeのAWS公式プラグインでdraw.io形式のAWS構成図を自動生成してみた（aws-architecture-diagramスキル）
Claude Codeのdeploy-on-awsプラグインは、アプリケーションをAWSにデプロイする機能で知られています。ただ、このプラグインにはデプロイ以外のスキルも含まれています。その一つがaws-architecture-diagramスキルです。
公式AWS4アイコンを使ったAWSリファレンスアーキテクチャ風のdraw.io構成図を自動生成してくれます。今回はこのスキルを実際に試してみました。
deploy-on-aws プラグインとは
deploy-on-awsは、AWSが公開しているClaude Code向けプラグインコレクション awslabs/agent-plugins に含まれるプラグインです。プラグインの概要やdeployスキルの使い方は、以下の記事にまとまっています。
このプラグインには、deployスキルのほかにAWS構成図を生成するaws-architecture-diagramスキルが含まれています。このスキルは2026年4月に awslabs/agent-plugins#103 で追加されました。本記事ではこちらを取り上げます。
インストール
/plugin marketplace add awslabs/agent-plugins
/plugin install deploy-on-aws@agent-plugins-for-aws
aws-architecture-diagram スキルの特徴
スキル定義（SKILL.md）から、主な特徴を紹介します。
2つのモード
このスキルには2つの動作モードがあります。
コードベース分析モード: 既存プロジェクトのCloudFormation、CDK、Terraformファイルをスキャンし、使用されているAWSサービスや構成を自動で抽出して構成図を生成します。AWSのIaCファイルがない場合でも、DockerfileやKafkaの設定ファイルなどの非AWSテクノロジーを検出して汎用アイコンで図に含めます。
ブレインストーミングモード: 設計したいアーキテクチャを自然言語で伝えると、スキルが3〜5個の質問（用途、使用サービス、スケール、セキュリティ、トラフィックパターンなど）をしてきます。回答をもとにアーキテクチャを提案し、構成図を生成します。コードベースがない状態ではこちらがデフォルトです。
公式AWS4アイコンとリファレンスアーキテクチャスタイル
生成される構成図は、AWSリファレンスアーキテクチャの見た目に合わせたスタイルとなっています。
mxgraph.aws4.*名前空間の公式AWSアイコンを使用- タイトル・サブタイトルブロック（オレンジのセパレーター付き）
- ティール色のステップ番号バッジとサイドバー凡例（7サービス以上で自動付与）
ダークモード対応
すべての構造要素にCSS light-dark() 関数が適用されています。draw.ioやSVGとして埋め込んだ先のテーマ（ライト/ダーク）に応じて、背景色や文字色が自動で切り替わります。ダーク背景のページに図を埋め込んだときに、図だけがライト背景のまま浮いて見える、といった事態を避けられます。
スケッチモード
SKILL.md上のトリガーワードはsketch/hand-drawn/sketchyですが、日本語で「手書き風で」と指示しても切り替わりました。Claudeが相当するキーワードと解釈してくれるようです。有効にするとフォントがComic Sans MSに変わり、手書き風の描画スタイルになります。ラフな検討や提案資料に使えそうです。デフォルトではオフです。
非AWSサービス対応
SKILL.mdによると、Docker、Kafka、Redis、GitHubなどの非AWSテクノロジーも汎用アイコンにマッピングして構成図に含められます。AWS + 非AWSの混合アーキテクチャにも対応しています（今回の記事では未検証）。
バリデーションパイプライン
.drawioファイルの書き込み後、PostToolUseフックが自動でXMLのバリデーションを実行します。構造チェック、AWSシェイプ名の検証、エッジの接続先IDの確認などが行われ、問題があれば修正して再書き込みするループが回ります。「生成して終わり」ではなく、検証・修正のパイプラインが組み込まれています。
エクスポート
デフォルトの出力は./docs/ディレクトリへの.drawioファイルです。draw.ioデスクトップアプリがインストールされていれば、PNG・SVG・PDFへのエクスポートもできます。エクスポートされたファイルにはdraw.ioのXMLが埋め込まれるため、draw.ioで開けば再編集も可能です。
実際に構成図を生成してみる
ブレインストーミングモードで生成
サーバーレスなWebアプリケーションのアーキテクチャ図を生成してみます。以下のプロンプトでスキルを呼び出しました。
/aws-architecture-diagram
サーバーレスなWebアプリケーションのアーキテクチャ図を作ってください。
以下のサービスを使います:
- CloudFront（CDN）
- S3（静的ファイルホスティング）
- API Gateway（REST API）
- Lambda（ビジネスロジック）
- DynamoDB（データストア）
- Cognito（認証）
スキルがいくつか質問をしてきます。アプリケーションの用途、想定ユーザー数、認証フロー、データフローの方向などです。回答すると、アーキテクチャの提案と合わせて構成図の生成が始まります。
生成が完了すると、./docs/ディレクトリに.drawioファイルが作成されます。PostToolUseフックによるバリデーションが自動で走り、問題がなければブラウザでプレビューできるURLが表示されます。
生成された構成図には、タイトルブロック、カテゴリ別に色分けされたサービスコンテナ、データフローを示すエッジ、ステップ番号バッジとサイドバー凡例が含まれていました。手動で配置する場合と比べて、プロンプトと数回の質問応答で構成図を生成できます。
同じ構成図をdraw.ioのライトモードで開くと以下のようになります。light-dark()で背景色や文字色がテーマに追従するので、ダーク・ライトどちらのページに貼り付けても違和感なく馴染みます。
手書き風を指定すると以下のように表示されます。
/aws-architecture-diagram
先ほどと同様の構成を手書き風の描画スタイルで書いて。
コードベース分析モード
既存のCloudFormation、CDK、Terraformプロジェクトがある場合は、コードベース分析モードが使えます。プロジェクト内のIaCファイルをスキャンしてサービス構成を抽出します。
今回は以下のブログで作成したIaCコードを使って、構成図を生成しました。
/aws-architecture-diagram
このプロジェクトのアーキテクチャ図を作ってください。
今回のプロジェクトではecspressoの設定ファイル（ecspresso.ymlやタスク定義JSON）も読み取られ、ECSの構成に反映されていました。スキルはCloudFormation・CDK・Terraformだけでなく、デプロイツールの設定ファイルも参考にしてくれるようです。
おわりに
deploy-on-awsプラグインのaws-architecture-diagramスキルを試してみました。公式AWS4アイコン、カテゴリ別の色分け、ダークモード対応、バリデーションパイプラインなど、手作業では面倒な部分が自動化されていて便利でした。
AWS構成図を作る機会がある方は試してみてください。
