Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

AWS Architecture Diagram Creation with Draw.io · giuseppe-trisciuoglio | DecimalAI

giuseppe-trisciuoglio/aws-drawio-architecture-diagrams

SkillScore100Maintained

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 involving Lambda, EC2, RDS, or other AWS services.

DevOpsby giuseppe-trisciuoglio

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

DevOps & SRE pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/giuseppe-trisciuoglio-aws-drawio-architecture-diagrams/SKILL.md

decimalai skills pull giuseppe-trisciuoglio-aws-drawio-architecture-diagrams --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/giuseppe-trisciuoglio-aws-drawio-architecture-diagrams/SKILL.md https://app.decimal.ai/s/giuseppe-trisciuoglio-aws-drawio-architecture-diagrams/SKILL.md

Raw file: /s/giuseppe-trisciuoglio-aws-drawio-architecture-diagrams/SKILL.md ↗ · machine-readable summary at /s/giuseppe-trisciuoglio-aws-drawio-architecture-diagrams.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

23 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 8d ago

Yes — +70% lift · at higher cost+129% tokens0% turns100% of whole cases pass with skill (23/23)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-05	✗→✓	▲ Improved	147%	0%
case-06	✗→✓	▲ Improved	151%	0%
case-07	✗→✓	▲ Improved	194%	0%
case-13	✗→✓	▲ Improved	161%	0%
case-14	✗→✓	▲ Improved	191%	0%

Showing 5 of 23 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

giuseppe-trisciuoglio / developer-kit

plugins/developer-kit-aws/skills/aws/aws-drawio-architecture-diagrams/SKILL.md

View on GitHub ↗

License MITImported 8/3/2026Version v1Bundled 2 files

Skill contents

references/

SKILL.md

AWS Architecture Diagram Creation with Draw.io

Overview

Creates pixel-perfect AWS architecture diagrams in draw.io XML format using official AWS4 shape library. Generates production-ready .drawio files for diagrams.net.

When to Use

AWS cloud architecture diagrams (VPC, subnets, services)
Multi-tier application architectures on AWS
Serverless designs (Lambda, API Gateway, DynamoDB)
Network topology diagrams with security groups
Infrastructure documentation for Well-Architected reviews

Instructions

File Structure

Every .drawio file follows this XML structure:

xml
<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
  <diagram id="aws-arch-1" name="AWS Architecture">
    <mxGraphModel dx="1434" dy="759" grid="1" gridSize="10" guides="1"
      tooltips="1" connect="1" arrows="1" fold="1" page="1"
      pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <!-- AWS shapes and connectors -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Key rules:

IDs "0" and "1" are reserved for root cells
Use sequential integer IDs starting from "2"
Landscape orientation (pageWidth="1169" pageHeight="827")
All coordinates positive and aligned to grid (multiples of 10)

AWS4 Group Containers

Groups use container=1 with child shapes referencing via parent="groupId".

AWS Cloud (top-level boundary):

xml
<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">
  <mxGeometry x="100" y="40" width="1000" height="700" as="geometry" />
</mxCell>

Region:

xml
<mxCell id="3" value="us-east-1" style="...grIcon=mxgraph.aws4.group_region;strokeColor=#00A4A6;fontColor=#147EBA;dashed=1;..." vertex="1" parent="2">
  <mxGeometry x="20" y="40" width="960" height="640" as="geometry" />
</mxCell>

VPC:

xml
<mxCell id="4" value="VPC (10.0.0.0/16)" style="...grIcon=mxgraph.aws4.group_vpc;strokeColor=#8C4FFF;fontColor=#AAB7B8;..." vertex="1" parent="3">
  <mxGeometry x="20" y="40" width="920" height="580" as="geometry" />
</mxCell>

Subnet styles:

Public: strokeColor=#7AA116;fillColor=#E9F3D2;fontColor=#248814
Private: strokeColor=#00A4A6;fillColor=#E6F6F7;fontColor=#147EBA

AWS4 Service Icons

Service icons use shape=mxgraph.aws4.resourceIcon with resIcon property.

CRITICAL: strokeColor=#ffffff is required for resourceIcon shapes to render white icon glyphs on colored backgrounds.

Standard service icon:

xml
<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">
  <mxGeometry x="100" y="100" width="60" height="60" as="geometry" />
</mxCell>

Dedicated shapes (Lambda, ALB, Users) use strokeColor=none. See references/aws-shape-reference.md for complete shape catalog.

Service Color Codes

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.

Quick reference: | Category | fillColor | gradientColor | Services | |----------|-----------|---------------|----------| | Compute | #D05C17 | #F78E04 | EC2, ECS, EKS, Fargate | | Storage | #277116 | #60A337 | S3, EBS, EFS, Glacier | | Database | #3334B9 | #4D72F3 | RDS, DynamoDB, Aurora, Redshift | | Networking | #5A30B5 | #945DF2 | CloudFront, Route 53, API GW | | Security | #C7131F | #F54749 | IAM, Cognito, KMS, WAF | | App Integration | #BC1356 | #F54749 | SQS, SNS, EventBridge |

Connector Styles

Standard data flow:

edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=open;endFill=0;strokeColor=#545B64;strokeWidth=2;

Encrypted connection:

edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=classic;endFill=1;strokeColor=#DD344C;strokeWidth=2;dashed=1;dashPattern=5 5;

Async/event flow:

edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=open;endFill=0;strokeColor=#E7157B;strokeWidth=2;dashed=1;

Layout Best Practices

Hierarchy: External → Internet → AWS Cloud → Region → VPC → Subnets → Services
Flow: Left-to-right for user traffic, top-to-bottom for tiers
Sizes: Service icons 60x60, grid-aligned coordinates
Spacing: 30-40px between icons, 20px padding inside containers
Labels: Place below icons (verticalLabelPosition=bottom)

Examples

Three-Tier Architecture

User Request: "Create AWS three-tier architecture with VPC, public ALB, private EC2, RDS across 2 AZs."

Generated Output:

xml
<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
  <diagram id="three-tier-1" name="Three-Tier Web App">
    <mxGraphModel dx="1434" dy="759" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="2" value="Users" style="...shape=mxgraph.aws4.users;fillColor=#232F3E;..." vertex="1" parent="1">
          <mxGeometry x="40" y="340" width="60" height="60" as="geometry" />
        </mxCell>
        <mxCell id="3" value="AWS Cloud" style="...shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_aws_cloud_alt;..." vertex="1" parent="1">
          <mxGeometry x="160" y="40" width="960" height="720" as="geometry" />
        </mxCell>
        <mxCell id="4" value="us-east-1" style="...grIcon=mxgraph.aws4.group_region;strokeColor=#00A4A6;dashed=1;..." vertex="1" parent="3">
          <mxGeometry x="20" y="40" width="920" height="660" as="geometry" />
        </mxCell>
        <mxCell id="5" value="VPC (10.0.0.0/16)" style="...grIcon=mxgraph.aws4.group_vpc;strokeColor=#8C4FFF;..." vertex="1" parent="4">
          <mxGeometry x="20" y="40" width="880" height="600" as="geometry" />
        </mxCell>
        <mxCell id="6" value="Public Subnet" style="...grIcon=mxgraph.aws4.group_security_group;strokeColor=#7AA116;fillColor=#E9F3D2;..." vertex="1" parent="5">
          <mxGeometry x="20" y="40" width="400" height="160" as="geometry" />
        </mxCell>
        <mxCell id="7" value="Private Subnet" style="...grIcon=mxgraph.aws4.group_security_group;strokeColor=#00A4A6;fillColor=#E6F6F7;..." vertex="1" parent="5">
          <mxGeometry x="20" y="230" width="400" height="160" as="geometry" />
        </mxCell>
        <mxCell id="8" value="Data Subnet" style="...grIcon=mxgraph.aws4.group_security_group;strokeColor=#00A4A6;fillColor=#E6F6F7;..." vertex="1" parent="5">
          <mxGeometry x="20" y="420" width="400" height="160" as="geometry" />
        </mxCell>
        <mxCell id="12" value="Application&lt;br&gt;Load Balancer" style="...fillColor=#8C4FFF;shape=mxgraph.aws4.applicationLoadBalancer;" vertex="1" parent="6">
          <mxGeometry x="170" y="50" width="60" height="60" as="geometry" />
        </mxCell>
        <mxCell id="13" value="EC2 Instance" style="...gradientColor=#F78E04;fillColor=#D05C17;strokeColor=#ffffff;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.ec2;" vertex="1" parent="7">
          <mxGeometry x="170" y="50" width="60" height="60" as="geometry" />
        </mxCell>
        <mxCell id="15" value="RDS Primary" style="...gradientColor=#4D72F3;fillColor=#3334B9;strokeColor=#ffffff;shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.rds;" vertex="1" parent="8">
          <mxGeometry x="170" y="50" width="60" height="60" as="geometry" />
        </mxCell>
        <mxCell id="20" style="...endArrow=open;strokeColor=#545B64;strokeWidth=2;" edge="1" parent="1" source="2" target="12">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="21" value="HTTPS" style="...endArrow=open;strokeColor=#545B64;strokeWidth=2;fontSize=11;labelBackgroundColor=#FFFFFF;" edge="1" parent="1" source="12" target="13">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="23" value="TCP 5432" style="...endArrow=open;strokeColor=#545B64;strokeWidth=2;fontSize=11;labelBackgroundColor=#FFFFFF;" edge="1" parent="1" source="13" target="15">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Opening Instructions:

Open in draw.io with AWS libraries enabled:
https://app.diagrams.net/?libs=aws4

Serverless API Architecture

User Request: "Create serverless architecture with API Gateway, Lambda, DynamoDB, S3 for REST API."

Generated Output: XML with API Gateway (violet), Lambda (orange), DynamoDB (blue), S3 (green). See references/aws-architecture-templates.md for complete template.

Reference Files

See references/ directory:

aws-shape-reference.md - Complete AWS4 shape catalog with styles for 50+ services
aws-architecture-templates.md - Ready-to-use templates (3-tier, serverless, data pipeline)

Constraints and Warnings

Validation Workflow

Always follow this validation checklist before saving:

Generate XML - Create complete .drawio file structure
Validate ID uniqueness - Ensure all IDs are unique integers (0, 1 reserved)
Check parent references - Verify all parent attributes reference existing cells
Verify XML well-formedness - Close all tags, escape special chars (&→&, <→<)
Test in draw.io - Open at https://app.diagrams.net/?libs=aws4
Fix rendering issues - Adjust positions if elements overlap or render incorrectly

Critical Constraints

XML well-formed: Invalid XML fails to open. Close all tags, escape special characters, use <br> for line breaks.

ID uniqueness mandatory: IDs "0" and "1" reserved. All others must be unique integers from "2". Duplicates cause loading failures.

Coordinate system: All coordinates positive integers, multiples of 10 for grid alignment.

AWS4 library only: Use official mxgraph.aws4.* shapes. Legacy mxgraph.aws3.* not supported.

Valid parent references: Parent must reference existing cell ID. Invalid refs cause elements to disappear.

Limitations

No dynamic layouts - Manual adjustment may be needed for complex diagrams
Single page only - Multi-page requires multiple <diagram> elements
No auto-routing - Rearranging elements requires manual edge adjustment

Security Considerations

No sensitive data - Avoid real IPs, ARNs, or resource IDs in labels
Review before sharing - XML exposes architecture details
Validate templates - Review XML before production documentation

Best Practices

Use official AWS4 shapes (mxgraph.aws4.*)
Follow AWS service category colors
Nest properly: AWS Cloud → Region → VPC → Subnet → Services
Label services, CIDR blocks, ports, protocols
Show data flow direction with labeled arrows
Include external actors (users, corporate DC)
Keep diagrams focused (15-20 icons max)
Add annotations for important notes ("Multi-AZ", "Auto Scaling")
Validate all IDs unique and parent references exist

Want to see if giuseppe-trisciuoglio/aws-drawio-architecture-diagrams would activate on your phrasing? Try it before you install — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/21/2026, 20:10 UTC · 23 cases

Lift

+70%

100% vs 30%

Agent turns

1.0 vs 1.0

Tokens

+129%

5,990.35 vs 2,612

fail → pass · 16pass → pass · 7

Per-case results (23)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-05 Provide the draw.io XML mxCell element styling properties for an Amazon EC2 compute instance node in an AWS architecture diagram.	fail→pass	11,151	4,877	-56%	1	1	0%	1,979	4,893	+147%	0	0	—
case-06 Provide the draw.io XML mxCell element styling properties for an Amazon S3 storage bucket icon in an AWS diagram.	fail→pass	10,927	6,234	-43%	1	1	0%	2,047	5,134	+151%	0	0	—
case-07 Provide the draw.io XML mxCell element styling properties for an Amazon CloudFront networking distribution icon in an AWS architecture diagram.	fail→pass	9,764	6,827	-30%	1	1	0%	1,780	5,227	+194%	0	0	—
case-13 Generate the draw.io XML mxCell style for a Private Subnet container inside an AWS VPC diagram.	fail→pass	11,998	8,534	-29%	1	1	0%	2,135	5,575	+161%	0	0	—
case-14 Provide the draw.io XML mxCell style properties for the outer AWS Cloud group container boundary.	fail→pass	10,465	5,363	-49%	1	1	0%	1,753	5,093	+191%	0	0	—
case-03 Could you generate the draw.io XML code for a real-time data ingestion pipeline on AWS? The pipeline needs Amazon Kinesis Data Streams pulling incoming telemetry, triggering a Lambda function, writing raw logs to an S3 bucket, and pushing analytics records into Redshift. Return the complete diagram file in raw XML format so I can upload it.	fail→pass	23,748	24,085	+1%	1	1	0%	5,082	9,525	+87%	0	0	—
case-04 Create a draw.io XML snippet for an Amazon RDS database node in an architecture diagram. What color styles should be applied to the database resource icon?	fail→pass	18,689	7,887	-58%	1	1	0%	3,485	5,596	+61%	0	0	—
case-01 Can you build a draw.io diagram file for an AWS serverless architecture? I need a REST API setup where traffic comes through CloudFront into API Gateway, gets processed by AWS Lambda, and persists data to a DynamoDB table with S3 for static assets. Please provide the complete raw XML code that I can directly paste or import into diagrams.net.	fail→pass	27,137	47,163	+74%	1	1	0%	6,213	10,144	+63%	0	0	—
case-02 I need a production-ready draw.io XML document representing a multi-AZ AWS infrastructure for our e-commerce platform. It should show an AWS Cloud boundary containing a single Region (us-west-2) and a VPC split into public subnets with Application Load Balancers, private subnets holding EC2 application instances, and isolated database subnets with PostgreSQL RDS. Deliver the full structured XML schema ready for diagrams.net.	fail→pass	28,645	27,086	-5%	1	1	0%	6,228	10,159	+63%	0	0	—
case-08 Provide the draw.io XML mxCell element styling properties for an Amazon SQS application integration queue icon in an AWS architecture diagram.	fail→pass	10,513	6,397	-39%	1	1	0%	1,931	5,201	+169%	0	0	—
case-09 Provide the draw.io XML mxCell element styling properties for an AWS KMS security key icon in an AWS architecture diagram.	fail→pass	11,529	6,278	-46%	1	1	0%	2,018	5,135	+154%	0	0	—
case-10 I need the draw.io XML connector definition for an encrypted TLS connection between services in an AWS architecture diagram. What stroke color and pattern properties should be used?	fail→pass	12,744	4,163	-67%	1	1	0%	2,178	4,713	+116%	0	0	—
case-11 What is the draw.io XML connector style for an asynchronous event-driven connection between EventBridge and SQS in an AWS architecture diagram?	fail→pass	10,246	4,512	-56%	1	1	0%	1,796	4,708	+162%	0	0	—
case-12 Generate the draw.io XML mxCell style for a Public Subnet container inside an AWS VPC diagram.	fail→pass	13,284	7,956	-40%	1	1	0%	2,305	5,570	+142%	0	0	—
case-15 Provide the draw.io XML mxCell group style properties for a VPC container (10.0.0.0/16) in an AWS diagram.	fail→pass	11,818	7,340	-38%	1	1	0%	2,262	5,402	+139%	0	0	—
case-16 Provide the draw.io XML mxCell group style properties for an AWS Region container (us-east-1).	fail→pass	9,798	6,344	-35%	1	1	0%	1,842	5,249	+185%	0	0	—
case-17 Show the empty outer XML wrapper schema (including file, diagram, mxGraphModel, and root elements) used for generating AWS diagrams for diagrams.net.	pass→pass	6,632	4,164	-37%	1	1	0%	1,147	4,739	+313%	0	0	—
case-18 Provide the draw.io XML connector style properties for a standard synchronous HTTP data flow edge between AWS services.	pass→pass	10,049	4,436	-56%	1	1	0%	1,699	4,710	+177%	0	0	—
case-19 When defining standard AWS resource icons in draw.io XML using shape=mxgraph.aws4.resourceIcon, what specific stroke color attribute must be included to render white glyphs properly on colored fills?	pass→pass	8,464	3,639	-57%	1	1	0%	1,448	4,590	+217%	0	0	—
case-20 When styling standard AWS resource icons in draw.io XML, what gradient direction value is required across all service categories?	pass→pass	7,102	1,793	-75%	1	1	0%	1,114	4,152	+273%	0	0	—
case-21 Write an AWS CloudFormation YAML template that deploys a VPC with two public subnets, an Internet Gateway, and a route table.	pass→pass	13,220	14,080	+7%	1	1	0%	2,921	6,990	+139%	0	0	—
case-22 Write Terraform HCL code to declare an AWS S3 bucket with server-side encryption enabled and a DynamoDB table with a pay-per-request billing mode.	pass→pass	7,097	6,450	-9%	1	1	0%	1,520	5,173	+240%	0	0	—
case-23 Draft a technical architecture specification document in Markdown detailing the network topology, security controls, and backup policy for a multi-region AWS database deployment.	pass→pass	29,190	31,519	+8%	1	1	0%	5,193	10,100	+94%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 23 cases were attempted. The headline lift of +70 percentage points is the difference between those two pass rates over the 23 comparable cases.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 30.4%
Pass rate with the skill: 100%
Cases attempted: 23
Cases counted toward lift: 23
Cases that regressed: 0
Skill version measured: v1
Run completed: 8/21/2026, 20:10 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-05

Prompt

Provide the draw.io XML mxCell element styling properties for an Amazon EC2 compute instance node in an AWS architecture diagram.

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run100

Live evalNeeds ≥20 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+169% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 7 days ago

Other measured skills in the registry, with their headline benchmark lift.