aws-drawio-diagram

日本語 | English

AWS の構成図を draw.io の形式（.drawio）で描かせる Claude Code の Skill。構成を箇条書きで伝えるだけで、AWS 公式のアイコンを使い、タイトルや凡例のような飾りを足さない図を描く。

見た目の決まり（枠の入れ子、ラベルの位置、線の引き方、色）は Skill の側に書いてあるので、依頼には構成だけを書けばよい。

この決まりは、Claude Code に AWS 構成図を描かせる5つの方法を比べて作った。比較の内容は AI感のないAWS構成図をAIエージェントに描かせたい！ に書いた。

以下のAWS構成の構成図を作ってください。

- CloudFront の背後に ALB を置く
- ALB のターゲットは ECS Fargate のサービスで、2つのAZに分散する
- データベースは Aurora MySQL、Writer 1台と Reader 1台を2つのAZに分ける
- 静的ファイルは S3 に置き、CloudFront から配信する
- ログとメトリクスは CloudWatch に集約する
- VPC は 2AZ 構成で、各AZにパブリックサブネットとプライベートサブネットを持つ
- ALB はパブリックサブネット、ECS と Aurora はプライベートサブネットに置く
- 各AZのパブリックサブネットに NAT Gateway を置き、ECS からの外向き通信を通す
- 図は draw.io の XML 形式で、out/ 配下にファイルとして保存する

この依頼で描いた図。

VPC の無い構成も描ける。Amazon Bedrock AgentCore と Lambda Web Adapter の構成を頼むと、こうなる。

入れ方

plugin として入れる

Claude Code のセッションで次の2行を実行する。2行目を実行すると詳細の画面が開くので、入れる範囲（すべてのプロジェクトか、このプロジェクトだけか）を選ぶ。

/plugin marketplace add sagochiko/aws-drawio-diagram-skill
/plugin install aws-drawio-diagram@aws-drawio-diagram-skill

公式以外の marketplace から入れた plugin は、既定では自動で更新されない。新しい版にするときは、ターミナルで次の2行を実行してから Claude Code を起動し直す。

claude plugin marketplace update aws-drawio-diagram-skill
claude plugin update aws-drawio-diagram@aws-drawio-diagram-skill

フォルダをコピーして入れる

skills/aws-drawio-diagram/ のディレクトリを、Claude Code の Skill の置き場所にコピーする。コマンドはこのリポジトリの直下で叩く。

# すべてのプロジェクトで使う
cp -R skills/aws-drawio-diagram ~/.claude/skills/

# 1つのプロジェクトだけで使う
cp -R skills/aws-drawio-diagram <プロジェクト>/.claude/skills/

呼び方

どちらで入れても、「AWS の構成図を描いて」「draw.io で VPC の図を作って」のように頼むと使われる。既存の .drawio に「WAF を足して」のように頼むと、描き直さずにそのファイルを直す。

AWS 公式の aws-architecture-diagram スキルや、draw.io 公式の Claude Code プラグインを一緒に入れていると、どちらが使われるかは依頼の書き方で変わる。確実にこの Skill を使いたいときは、plugin として入れたなら /aws-drawio-diagram:aws-drawio-diagram、フォルダをコピーして入れたなら /aws-drawio-diagram で呼ぶ。

要るもの

Claude Code と Python 3 があれば描ける。Python は、描いた XML が壊れていないかを書き出す前に確かめるのに使い、標準ライブラリだけで足りる。

draw.io desktop は無くてもよいが、入れておくと、Claude が描いた図を PNG に書き出し、線の重なりやアイコンの抜けを自分の目で確かめてから渡す。無ければ確かめずに渡すことになる。画面の無い Linux では xvfb も要る。

描き方の決まり

主なものだけ挙げる。全部は skills/aws-drawio-diagram/SKILL.md にある。

• 枠は AWS Cloud、リージョン、VPC、アベイラビリティゾーン、サブネットの順に入れ子にする。サブネットだけ薄く塗る
• 利用者を上端に置き、リクエストが上から下へ流れる向きにそろえる。各 AZ の本流のアイコンは、サブネットの中央に縦一列に並べる
• アイコンはサービス単位にそろえる。ALB と NLB も Elastic Load Balancing のアイコンで描き、1つだけ置く。AZ が2つなら AZ の境目、3つ以上なら AZ の上の段に置く
• ラベルは常にアイコンの下。線はアイコンの辺の中央から出し、下向きの線はラベルの下から出す。線の角は丸めない
• CloudFront のようなグローバルなサービスはリージョンの枠の外、S3 のようなリージョンのサービスは VPC の右に置く
• タイトル、凡例、番号付きのバッジは置かない

動作環境と費用の目安

動作を確かめたのは macOS、draw.io desktop、Claude Code の組み合わせで、依頼は日本語と英語。英語は2種類の依頼を計4回描かせ、日本語と同じくらい決まりを守った。Windows、Linux、WSL2 では確かめていない。ラベルと枠の名前は依頼の言語で書き、サービス名は英語のままにする。

モデルは Claude Opus 5.5 を想定している。上の Web の構成の例で、1枚あたり3分から4分、費用は1ドル弱かかった。Claude Sonnet 5 でも描けるが、図を直す往復が多くなり、費用は2倍近く、時間は3倍ほどかかる。

費用を抑えたいときは、フォルダをコピーして入れたうえで、コピーした先の aws-drawio-diagram/SKILL.md の先頭の frontmatter に effort: low を1行足す。plugin として入れた場合は、更新すると書き足した行が消える。この Skill を使うあいだだけ思考の深さが下がり、Web の構成の例では費用が3割近く、所要時間が1分半ほど下がった。図の構成や決まりの守り方は変わらなかったが、枠の名前に線が重なる箇所が増えることがある。

苦手なこと

• マルチリージョン、マルチアカウント、オンプレミスとのハイブリッド、ノードが30を超える大きな構成には、まだ決まりが無い
• 同じ依頼でも、細かいところ（線の経路、線をつなぐ辺の位置、CloudWatch の置き場所）は描くたびに変わる

方針

色と枠は AWS 公式の AWS Architecture Icons に合わせている。ただし次の3つは公式と違う描き方にしている。

• サブネットだけ薄く塗る。面の色でパブリックとプライベートを見分けられる
• ECS on Fargate は Fargate のアイコン1つで描く。各サブネットにアイコンが2つずつ並ぶと図が横に広がる
• ALB と NLB もサービスのアイコンで描く。描くたびに見た目が割れにくい

アイコンの絵は draw.io に入っている AWS のシェイプを使う。Skill 本体はアイコンの画像を同梱していない。assets/ にある例の図には、このシェイプで描いた AWS のアイコンが入っている。描いた図を公開するときは、AWS Architecture Icons の利用条件に従う。

この Skill は AWS と draw.io の公式のものではない。

ライセンス

Apache License 2.0。draw.io 公式の Claude Code プラグイン（jgraph/drawio-mcp）の drawio スキルと、AWS の awslabs/agent-plugins の aws-architecture-diagram スキルを元にしている。詳しくは NOTICE にある。