aws-drawio-architecture-diagrams

Name: aws-drawio-architecture-diagrams
Author: giuseppe-trisciuoglio

310stars36forks

How to install aws-drawio-architecture-diagrams?

giuseppe-trisciuoglio/developer-kit/aws-drawio-architecture-diagrams

$npx -y skills add giuseppe-trisciuoglio/developer-kit --skill aws-drawio-architecture-diagrams

Installs into the current project.

Summary

Creates professional AWS architecture diagrams in draw.io XML format (.drawio files) using official AWS Architecture Icons (aws4 library). Use when the user asks for AWS diagrams, VPC layouts, multi-tier architectures, serverless designs, network topology, or draw.io exports invo

Files · 1

View on GitHub

SKILL.md

1	# AWS Architecture Diagram Creation with Draw.io
2
3	## Overview
4
5	Creates pixel-perfect AWS architecture diagrams in draw.io XML format using official AWS4 shape library. Generates production-ready `.drawio` files for [diagrams.net](https://app.diagrams.net/?libs=aws4).
6
7	## When to Use
8
9	- AWS cloud architecture diagrams (VPC, subnets, services)
10	- Multi-tier application architectures on AWS
11	- Serverless designs (Lambda, API Gateway, DynamoDB)
12	- Network topology diagrams with security groups
13	- Infrastructure documentation for Well-Architected reviews
14
15	## Instructions
16
17	### File Structure
18
19	Every `.drawio` file follows this XML structure:
20
21	```xml
22	<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
23	<diagram id="aws-arch-1" name="AWS Architecture">
24	<mxGraphModel dx="1434" dy="759" grid="1" gridSize="10" guides="1"
25	tooltips="1" connect="1" arrows="1" fold="1" page="1"
26	pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
27	<root>
28	<mxCell id="0" />
29	<mxCell id="1" parent="0" />
30	<!-- AWS shapes and connectors -->
31	</root>
32	</mxGraphModel>
33	</diagram>
34	</mxfile>
35	```
36
37	Key rules:
38	- IDs "0" and "1" are reserved for root cells
39	- Use sequential integer IDs starting from "2"
40	- Landscape orientation (`pageWidth="1169" pageHeight="827"`)
41	- All coordinates positive and aligned to grid (multiples of 10)
42
43	### AWS4 Group Containers
44
45	Groups use `container=1` with child shapes referencing via `parent="groupId"`.
46
47	AWS Cloud (top-level boundary):
48	```xml
49	<mxCell id="2" value="AWS Cloud" style="points=[[0,0],[0.25,0],[0.5,0],[0.75,0],[1,0],[1,0.25],[1,0.5],[1,0.75],[1,1],[0.75,1],[0.5,1],[0.25,1],[0,1],[0,0.75],[0,0.5],[0,0.25]];outlineConnect=0;gradientColor=none;html=1;whiteSpace=wrap;fontSize=12;fontStyle=0;shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_aws_cloud_alt;strokeColor=#232F3E;fillColor=none;verticalAlign=top;align=left;spacingLeft=30;fontColor=#232F3E;dashed=0;labelBackgroundColor=none;container=1;pointerEvents=0;collapsible=0;recursiveResize=0;" vertex="1" parent="1">
50	<mxGeometry x="100" y="40" width="1000" height="700" as="geometry" />
51	</mxCell>
52	```
53
54	Region:
55	```xml
56	<mxCell id="3" value="us-east-1" style="...grIcon=mxgraph.aws4.group_region;strokeColor=#00A4A6;fontColor=#147EBA;dashed=1;..." vertex="1" parent="2">
57	<mxGeometry x="20" y="40" width="960" height="640" as="geometry" />
58	</mxCell>
59	```
60
61	VPC:
62	```xml
63	<mxCell id="4" value="VPC (10.0.0.0/16)" style="...grIcon=mxgraph.aws4.group_vpc;strokeColor=#8C4FFF;fontColor=#AAB7B8;..." vertex="1" parent="3">
64	<mxGeometry x="20" y="40" width="920" height="580" as="geometry" />
65	</mxCell>
66	```
67
68	Subnet styles:
69	- Public: `strokeColor=#7AA116;fillColor=#E9F3D2;fontColor=#248814`
70	- Private: `strokeColor=#00A4A6;fillColor=#E6F6F7;fontColor=#147EBA`
71
72	### AWS4 Service Icons
73
74	Service icons use `shape=mxgraph.aws4.resourceIcon` with `resIcon` property.
75
76	CRITICAL: `strokeColor=#ffffff` is required for `resourceIcon` shapes to render white icon glyphs on colored backgrounds.
77
78	Standard service icon:
79	```xml
80	<mxCell id="10" value="Amazon S3" style="...gradientColor=#60A337;gradientDirection=north;fillColor=#277116;strokeColor=#ffffff;...shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.s3;" vertex="1" parent="1">
81	<mxGeometry x="100" y="100" width="60" height="60" as="geometry" />
82	</mxCell>
83	```
84
85	Dedicated shapes (Lambda, ALB, Users) use `strokeColor=none`. See `references/aws-shape-reference.md` for complete shape catalog.
86
87	### Service Color Codes
88
89	Each AWS service category uses official colors. All `resourceIcon` shapes must use `strokeColor=#ffffff` and `gradientDirection=north`. See `references/aws-shape-reference.md` for full color table.
90
91	Quick reference:
92	\| Category \| fillColor \| gradientColor \| Services \|
93	\|----------\|-----------\|---------------\|----------\|
94	\| Compute \| `#D05C17` \| `#F78E04` \| EC2, ECS, EKS, Fargate \|
95	\| Storage \| `#277116` \| `#60A337` \| S3, EBS, EFS, Glacier \|
96	\| Database \| `#3334B9` \| `#4D72F3` \| RDS, DynamoDB, Aurora, Redshift \|
97	\| Networking \| `#5A30B5` \| `#945DF2` \| CloudFront, Route 53, API GW \|
98	\| Security \| `#C7131F` \| `#F54749` \| IAM, Cognito, KMS, WAF \|
99	\| App Integration \| `#BC1356` \| `#F54749` \| SQS, SNS, EventBridge \|
100
101	### Connector Styles
102
103	Standard data flow:
104	```
105	edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=open;endFill=0;strokeColor=#545B64;strokeWidth=2;
106	```
107
108	Encrypted connection:
109	```
110	edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=classic;

People who liked this also viewed

6 picks

Type

aws-drawio-architecture-diagrams

310stars36forks

View on GitHub

How to install aws-drawio-architecture-diagrams?

giuseppe-trisciuoglio/developer-kit/aws-drawio-architecture-diagrams

$npx -y skills add giuseppe-trisciuoglio/developer-kit --skill aws-drawio-architecture-diagrams

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# AWS Architecture Diagram Creation with Draw.io
2
3	## Overview
4
5	Creates pixel-perfect AWS architecture diagrams in draw.io XML format using official AWS4 shape library. Generates production-ready `.drawio` files for [diagrams.net](https://app.diagrams.net/?libs=aws4).
6
7	## When to Use
8
9	- AWS cloud architecture diagrams (VPC, subnets, services)
10	- Multi-tier application architectures on AWS
11	- Serverless designs (Lambda, API Gateway, DynamoDB)
12	- Network topology diagrams with security groups
13	- Infrastructure documentation for Well-Architected reviews
14
15	## Instructions
16
17	### File Structure
18
19	Every `.drawio` file follows this XML structure:
20
21	```xml
22	<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
23	<diagram id="aws-arch-1" name="AWS Architecture">
24	<mxGraphModel dx="1434" dy="759" grid="1" gridSize="10" guides="1"
25	tooltips="1" connect="1" arrows="1" fold="1" page="1"
26	pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
27	<root>
28	<mxCell id="0" />
29	<mxCell id="1" parent="0" />
30	<!-- AWS shapes and connectors -->
31	</root>
32	</mxGraphModel>
33	</diagram>
34	</mxfile>
35	```
36
37	Key rules:
38	- IDs "0" and "1" are reserved for root cells
39	- Use sequential integer IDs starting from "2"
40	- Landscape orientation (`pageWidth="1169" pageHeight="827"`)
41	- All coordinates positive and aligned to grid (multiples of 10)
42
43	### AWS4 Group Containers
44
45	Groups use `container=1` with child shapes referencing via `parent="groupId"`.
46
47	AWS Cloud (top-level boundary):
48	```xml
49	<mxCell id="2" value="AWS Cloud" style="points=[[0,0],[0.25,0],[0.5,0],[0.75,0],[1,0],[1,0.25],[1,0.5],[1,0.75],[1,1],[0.75,1],[0.5,1],[0.25,1],[0,1],[0,0.75],[0,0.5],[0,0.25]];outlineConnect=0;gradientColor=none;html=1;whiteSpace=wrap;fontSize=12;fontStyle=0;shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_aws_cloud_alt;strokeColor=#232F3E;fillColor=none;verticalAlign=top;align=left;spacingLeft=30;fontColor=#232F3E;dashed=0;labelBackgroundColor=none;container=1;pointerEvents=0;collapsible=0;recursiveResize=0;" vertex="1" parent="1">
50	<mxGeometry x="100" y="40" width="1000" height="700" as="geometry" />
51	</mxCell>
52	```
53
54	Region:
55	```xml
56	<mxCell id="3" value="us-east-1" style="...grIcon=mxgraph.aws4.group_region;strokeColor=#00A4A6;fontColor=#147EBA;dashed=1;..." vertex="1" parent="2">
57	<mxGeometry x="20" y="40" width="960" height="640" as="geometry" />
58	</mxCell>
59	```
60
61	VPC:
62	```xml
63	<mxCell id="4" value="VPC (10.0.0.0/16)" style="...grIcon=mxgraph.aws4.group_vpc;strokeColor=#8C4FFF;fontColor=#AAB7B8;..." vertex="1" parent="3">
64	<mxGeometry x="20" y="40" width="920" height="580" as="geometry" />
65	</mxCell>
66	```
67
68	Subnet styles:
69	- Public: `strokeColor=#7AA116;fillColor=#E9F3D2;fontColor=#248814`
70	- Private: `strokeColor=#00A4A6;fillColor=#E6F6F7;fontColor=#147EBA`
71
72	### AWS4 Service Icons
73
74	Service icons use `shape=mxgraph.aws4.resourceIcon` with `resIcon` property.
75
76	CRITICAL: `strokeColor=#ffffff` is required for `resourceIcon` shapes to render white icon glyphs on colored backgrounds.
77
78	Standard service icon:
79	```xml
80	<mxCell id="10" value="Amazon S3" style="...gradientColor=#60A337;gradientDirection=north;fillColor=#277116;strokeColor=#ffffff;...shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.s3;" vertex="1" parent="1">
81	<mxGeometry x="100" y="100" width="60" height="60" as="geometry" />
82	</mxCell>
83	```
84
85	Dedicated shapes (Lambda, ALB, Users) use `strokeColor=none`. See `references/aws-shape-reference.md` for complete shape catalog.
86
87	### Service Color Codes
88
89	Each AWS service category uses official colors. All `resourceIcon` shapes must use `strokeColor=#ffffff` and `gradientDirection=north`. See `references/aws-shape-reference.md` for full color table.
90
91	Quick reference:
92	\| Category \| fillColor \| gradientColor \| Services \|
93	\|----------\|-----------\|---------------\|----------\|
94	\| Compute \| `#D05C17` \| `#F78E04` \| EC2, ECS, EKS, Fargate \|
95	\| Storage \| `#277116` \| `#60A337` \| S3, EBS, EFS, Glacier \|
96	\| Database \| `#3334B9` \| `#4D72F3` \| RDS, DynamoDB, Aurora, Redshift \|
97	\| Networking \| `#5A30B5` \| `#945DF2` \| CloudFront, Route 53, API GW \|
98	\| Security \| `#C7131F` \| `#F54749` \| IAM, Cognito, KMS, WAF \|
99	\| App Integration \| `#BC1356` \| `#F54749` \| SQS, SNS, EventBridge \|
100
101	### Connector Styles
102
103	Standard data flow:
104	```
105	edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=open;endFill=0;strokeColor=#545B64;strokeWidth=2;
106	```
107
108	Encrypted connection:
109	```
110	edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=classic;

People who liked this also viewed

6 picks

Type