Reference — aws-architecture-diagram

This page documents the patterns the skill uses internally. You don’t need to read it to use the skill — it’s here for when you want to understand the output, extend the skill, or craft a diagram by hand that follows the same conventions.

Category color reference

Every AWS service icon renders with the fill color for its category. The skill enforces this mapping — services never mix colors across categories.

Category	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

Icon lookup files

The skill ships 7 reference files — one per AWS category. Each lists the Draw.io shape names (mxgraph.aws4.*) and category color.

• 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 — users, servers, internet, groups, arrows

Note

The skill always reads the relevant reference before generating XML. Icon names are never guessed.

XML patterns

Service icon (colored background, white glyph)

Use for service-level callouts (Lambda, S3, etc.). strokeColor=#ffffff is mandatory — it makes the glyph white.

<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>

Dedicated shape (dark silhouette)

Use for resource-level icons (Lambda Function, S3 Bucket). strokeColor=none — no border.

<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>

Group container

Use for AWS Cloud, Region, VPC, and Subnet groups. Category colors apply to the border.

<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>

Edge

Default arrow style. Use #545B64 (AWS gray) for the line and label.

<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>

Layout rules

• Single AWS Cloud group — one AWS Cloud group spans the whole diagram, not multiple
• Nesting hierarchy — AWS Cloud → Region → VPC → Subnet
• Primary flow direction — usually left-to-right
• Icon size — 48×48 px for both service and resource icons
• Font sizes — 12px for icon labels, 10px for edge labels
• Edge color — #545B64 (AWS gray) by default
• Max density — 15–20 icons per diagram for readability
• Labels — plain text only, no HTML
• Full-coverage background — a light #F5F5F5 rounded rectangle behind everything ensures PNG exports have a clean background instead of black

Non-technical audience mode

When the audience is non-technical (stakeholders, end users), the skill switches to a different visual grammar.

Step-numbered edges

Replace labels like “HTTPS” or “REST API” with circled step numbers:

• Flow A — ① ② ③ ④ (white circled)
• Flow B — ❶ ❷ ❸ ❹ (black circled)

Different circle styles distinguish parallel flows.

Simplified labels

• Prefer plain descriptions over technical terms — “チケット取得” rather than “REST API call”
• Drop technical qualifiers — “OpenSearch” not “OpenSearch Serverless”
• No protocol names, no API method names

Lane layout

Use swim lanes with flow summaries in the header: "① チケット取得 → ② データ保存 → ③ AI変換 → ④ 索引化". Separate lanes with a dashed vertical line. Place the legend outside any colored lane so it stays readable.

Managed services + VPC endpoints pattern

When the diagram has AWS managed services (S3, Bedrock, OpenSearch) accessed from inside a VPC, the skill uses a two-box layout:

• VPC box (left) — user-deployed resources (EC2, Lambda, NAT Gateway)
• Managed Services box (right) — managed services outside the VPC, in a plain rounded rectangle
• VPC Endpoints icon — placed on the boundary between the two boxes, visually “bridging” VPC and managed services

Arrows go directly from source to target (Lambda → S3), not routed through the VPC Endpoints icon. The visual separation already communicates the boundary; the companion guide explains the endpoint detail.

Managed services group style

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;