リファレンス — aws-architecture-diagram

このページはスキルが内部で使うパターンを記載しています。スキルを使うだけなら読む必要はありません。出力を理解したい、スキルを拡張したい、または同じ規律で手作業で図を描きたいときに参照してください。

カテゴリカラー

すべての AWS サービスアイコンは、カテゴリに応じた fillColor で描画されます。スキルはこのマッピングを厳格に守り、カテゴリ間で色が混ざることはありません。

カテゴリ	fillColor
Compute & Containers	`#ED7100`
Storage	`#7AA116`
Database	`#C925D1`
Networking & CDN	`#8C4FFF`
Analytics	`#8C4FFF`
App Integration & Management	`#E7157B`
AI / Machine Learning	`#01A88D`
Security	`#DD344C`
General	`#232F3E`

アイコン参照ファイル

スキルには AWS カテゴリごとに 7 つのリファレンスファイルが同梱されています。各ファイルには Draw.io シェイプ名（mxgraph.aws4.*）とカテゴリカラーが記載されています。

aws-icons-compute — EC2、Lambda、ECS、EKS、Fargate、ELB
aws-icons-storage-database — S3、EBS、RDS、DynamoDB、Aurora、ElastiCache
aws-icons-networking — VPC、CloudFront、Route 53、API Gateway、Direct Connect
aws-icons-app-integration — SNS、SQS、EventBridge、Step Functions、CloudWatch、CloudFormation
aws-icons-analytics-ml — Athena、Glue、Kinesis、OpenSearch、Bedrock、SageMaker
aws-icons-security — IAM、Cognito、WAF、Shield、KMS、GuardDuty
aws-icons-common — ユーザー、サーバー、インターネット、グループ、矢印

XML パターン

サービスアイコン（色背景・白いグリフ）

サービスレベルの表示（Lambda、S3 など）に使用します。strokeColor=#ffffff は必須で、これによりグリフが白くなります。

<mxCell id="svc-lambda" value="Lambda"
  style="sketch=0;outlineConnect=0;fontColor=#232F3E;fillColor=#ED7100;strokeColor=#ffffff;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;fontSize=12;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.lambda;"
  vertex="1" parent="grp-subnet">
  <mxGeometry x="100" y="50" width="48" height="48" as="geometry" />
</mxCell>

専用シェイプ（濃色シルエット）

リソースレベルのアイコン（Lambda Function、S3 Bucket など）に使用します。strokeColor=none で枠線なし。

<mxCell id="res-lambda-fn" value="Lambda Function"
  style="sketch=0;outlineConnect=0;fontColor=#232F3E;gradientColor=none;fillColor=#ED7100;strokeColor=none;dashed=0;shape=mxgraph.aws4.lambda_function;"
  vertex="1" parent="grp-subnet">
  <mxGeometry x="100" y="50" width="48" height="48" as="geometry" />
</mxCell>

グループコンテナ

AWS Cloud、Region、VPC、Subnet などのグループに使用します。境界線にカテゴリカラーが適用されます。

<mxCell id="grp-vpc" value="VPC"
  style="sketch=0;container=1;collapsible=0;shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_vpc2;strokeColor=#8C4FFF;fillColor=none;verticalAlign=top;align=left;spacingLeft=30;"
  vertex="1" parent="grp-region">
  <mxGeometry x="30" y="40" width="800" height="400" as="geometry" />
</mxCell>

エッジ（矢印）

デフォルトの矢印スタイル。線とラベルには #545B64（AWS グレー）を使います。

<mxCell id="edge-1" value="HTTPS"
  style="edgeStyle=orthogonalEdgeStyle;endArrow=block;strokeColor=#545B64;fontSize=10;fontColor=#545B64;"
  edge="1" source="svc-cloudfront" target="svc-apigw" parent="1">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

レイアウトルール

AWS Cloud グループは 1 つ — 図全体を 1 つの AWS Cloud グループで包みます（複数作らない）
ネスト階層 — AWS Cloud → Region → VPC → Subnet
主フロー方向 — 通常は左から右
アイコンサイズ — サービス・リソースともに 48×48 px
フォントサイズ — アイコンラベル 12 px、エッジラベル 10 px
エッジ色 — デフォルトは #545B64（AWS グレー）
上限密度 — 可読性のため 1 図あたり 15〜20 アイコンまで
ラベル — プレーンテキストのみ、HTML 不可
全面カバー背景 — すべての要素の背後に #F5F5F5 の角丸矩形を敷くことで、PNG エクスポート時に黒背景ではなく明るい背景になります

非エンジニア向けモード

想定読者が非エンジニア（ステークホルダー、エンドユーザーなど）の場合、スキルは異なるビジュアル言語に切り替わります。

手順番号付きエッジ

「HTTPS」や「REST API」のような技術ラベルを丸囲みの手順番号に置き換えます。

フロー A — ① ② ③ ④（白丸）
フロー B — ❶ ❷ ❸ ❹（黒丸）

並行するフローは異なる丸スタイルで区別します。

平易なラベル

技術用語ではなく平易な説明を優先 — 「REST API call」ではなく「チケット取得」
技術修飾子を省略 — 「OpenSearch Serverless」ではなく「OpenSearch」
プロトコル名や API メソッド名は使わない

レーンレイアウト

フローサマリー付きのスイムレーンを使います。ヘッダーには "① チケット取得 → ② データ保存 → ③ AI変換 → ④ 索引化" のような要約を置きます。レーンは破線の縦線で区切ります。凡例は色付きレーンの外に置き、可読性を確保します。

マネージドサービス + VPC エンドポイントパターン

VPC 内から AWS マネージドサービス（S3、Bedrock、OpenSearch など）にアクセスする構成では、2 ボックスレイアウトを使います。

VPC ボックス（左） — ユーザーがデプロイするリソース（EC2、Lambda、NAT Gateway など）
マネージドサービスボックス（右） — VPC の外に存在するマネージドサービスを、プレーンな角丸矩形でグルーピング
VPC エンドポイントアイコン — 2 つのボックスの境界に配置。VPC とマネージドサービスを視覚的に「橋渡し」します

矢印は送信元から宛先へ直接引きます（Lambda → S3 など）。VPC エンドポイントアイコンを経由させることはしません。視覚的な境界分離ですでに意図は伝わっており、詳細は companion ガイドで説明します。

マネージドサービスグループのスタイル

rounded=1;whiteSpace=wrap;fillColor=none;strokeColor=#879196;strokeWidth=1;dashed=1;dashPattern=4 4;fontColor=#232F3E;fontSize=12;fontStyle=1;verticalAlign=top;align=left;spacingLeft=10;spacingTop=8;container=1;collapsible=0;