Aws Drawio Architecture Diagrams

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:

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

Region:

VPC:

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:

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

1. Hierarchy: External → Internet → AWS Cloud → Region → VPC → Subnets → Services
2. Flow: Left-to-right for user traffic, top-to-bottom for tiers
3. Sizes: Service icons 60x60, grid-aligned coordinates
4. Spacing: 30-40px between icons, 20px padding inside containers
5. 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:

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:

1. Generate XML - Create complete .drawio file structure
2. Validate ID uniqueness - Ensure all IDs are unique integers (0, 1 reserved)
3. Check parent references - Verify all parent attributes reference existing cells
4. Verify XML well-formedness - Close all tags, escape special chars (&→&, `` 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

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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: giuseppe-trisciuoglio
• Source: giuseppe-trisciuoglio/developer-kit
• License: MIT

Install and usage instructions live in the source repository linked above.