Claude Code × draw.io Official Skill: Automating AWS Architecture Diagram Generation
This page has been translated by machine translation. View original
Claude Code × draw.io Official Skill: Automating AWS Architecture Diagram Generation
Introduction
When creating flowcharts or architecture diagrams on the web, most people likely create them manually. As of April 2026, while the trend toward delegating work to AI Agents is accelerating, web apps for creating diagrams still have many limitations in AI integration (such as MCP).
In this context, I discovered that draw.io (jgraph) has officially published a Skill for Claude Code and decided to try it out.
- draw.io skill-cli: https://github.com/jgraph/drawio-mcp/tree/main/skill-cli
I already have the Draw.IO plugin in my VSCode/Cursor, so until now, when I instructed Claude Code to "draw a diagram with drawio," it would research how to write a .drawio file and generate one. However, when asking for complex diagrams, the quality would often decrease. With the official Skill, Claude Code gets built-in knowledge of draw.io's XML format and styling, which should result in higher quality diagrams.
This article summarizes the official Skill setup, AWS architecture diagram generation, problems encountered, and solutions in a hands-on format.
Test Environment
- macOS
- Cursor
- Claude Code (Opus 4.6)
- Draw.io Desktop
What is the draw.io Skill?
Claude Code Skills are a mechanism for defining specialized knowledge for specific tasks as Markdown files that can be loaded into Claude Code. They work as an extension to prompts rather than as external processes like MCP servers.
The official draw.io Skill includes knowledge such as:
- The correct structure of
.drawiofiles (mxGraphModel XML) - Export commands (PNG/SVG/PDF, embedding XML for re-editing)
- Style property details (connection points, fonts, layouts, etc.)
- 2-layer rendering (a technique for drawing edges behind icons)
In other words, without the Skill, Claude Code would research draw.io XML knowledge each time, but with the Skill, it can accurately use this knowledge from the start.
Additionally, if Draw.io Desktop is installed, Draw.io Desktop app will automatically open after generating a diagram, allowing you to immediately preview and edit the generated diagram. The smooth cycle of generation → confirmation → modification instructions is subtly convenient.
Installing the Skill
Prerequisites
- Claude Code is already installed
- Draw.io Desktop is already installed (for using the export feature)
Steps
- Create a
.claude/skills/folder in your project directory - Download the
drawiofolder from the draw.io official repository and place it in the.claude/skills/directory
your-project/
└── .claude/
└── skills/
└── drawio/
└── SKILL.md
If you want to apply the Skill globally, place it in
~/.claude/skills/.
Once placed, Claude Code will recognize the /drawio command.
Test: Generating AWS Architecture Diagrams
Trying a simple instruction
First, let's try with a simple prompt.
Can you create a sample AWS serverless web application architecture diagram?
As a result, a diagram was generated, but it used monochrome icons rather than the colorful AWS icons we're familiar with.
Requesting color icons
The icons are monochrome. Could you replace them with AWS 2026 colored icons?
The icons were updated to colored versions, but upon closer inspection, there were still issues such as black lines in the icons and color mismatches. When trying larger architecture diagrams, multiple problems emerged: labels overlapping with icons, connection lines drawn on top of icons, missing VPC and subnet boundaries, etc.
Summary of Problems Encountered
| Problem | Cause | Solution |
|---|---|---|
| Black lines in icons | strokeColor not specified, defaulting to black |
Explicitly set strokeColor=#ffffff |
| Category color mismatches | Using outdated color codes | Get correct values from draw.io source code (Sidebar-AWS4.js) |
| Labels overlapping icons | By default, labels are placed inside the icons | Use verticalLabelPosition=bottom to place them below |
| Connection lines drawn on top of icons | mxGraph specification: in the same layer, edges are always drawn on top of vertices | Use a two-layer structure with edge_layer and shape_layer |
| Missing VPC boundaries | No grouping defined | Define AWS group containers using the mxgraph.aws4.group shape |
I solved these issues one by one, and finally added AWS architecture diagram guidelines to SKILL.md.
Example of category color solution
AWS Guidelines Added to SKILL.md
The official Skill covers general draw.io knowledge, but doesn't include style rules specific to AWS icons. Therefore, I added the following guidelines to SKILL.md.
Copy these to your own SKILL.md and customize as needed.
Full AWS icon styling added to SKILL.md (click to expand)
## AWS icon styling (AWS 2026)
When generating AWS architecture diagrams, always use the **AWS 2026** icon style from draw.io's `mxgraph.aws4` namespace.
### Base style template
Every AWS icon must use this base style:
```
sketch=0;points=[[0,0,0],[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0,0],[0,1,0],[0.25,1,0],[0.5,1,0],[0.75,1,0],[1,1,0],[0,0.25,0],[0,0.5,0],[0,0.75,0],[1,0.25,0],[1,0.5,0],[1,0.75,0]];outlineConnect=0;fontColor=#232F3E;fillColor=<CATEGORY_COLOR>;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.<service_name>;
```
Critical properties:
- **`strokeColor=#ffffff`** — draws the icon graphic lines in white. Never use `none` or other values.
- **`fillColor`** — set per service category (see table below)
- **`verticalLabelPosition=bottom;verticalAlign=top`** — places the label below the icon to avoid overlap
- **`sketch=0`** — disables hand-drawn style
- **`points=[[...]]`** — connection points for edges
### AWS group containers
For enterprise-scale diagrams, use AWS group shapes to visually separate environments (e.g., inside AWS vs external, VPC boundaries, regions). Icons inside a group must use `parent="<group_id>"` and positions are relative to the group's origin.
| Group | grIcon | strokeColor | Usage |
|-------|--------|-------------|-------|
| AWS Cloud | `mxgraph.aws4.group_aws_cloud_alt` | `#232F3E` | Top-level AWS boundary |
| Region | `mxgraph.aws4.group_region` | `#00A4A6` | AWS region |
| VPC | `mxgraph.aws4.group_vpc2` | `#8C4FFF` | Virtual private cloud |
| Public Subnet | `mxgraph.aws4.group_security_group` | `#7AA116` | Public subnet |
| Private Subnet | `mxgraph.aws4.group_security_group` | `#147EBA` | Private subnet |
| Availability Zone | `mxgraph.aws4.group_availability_zone` | `#232F3E` | AZ boundary |
**Base group style template:**
```
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;container=1;pointerEvents=0;collapsible=0;recursiveResize=0;shape=mxgraph.aws4.group;grIcon=<GROUP_ICON>;strokeColor=<STROKE_COLOR>;fillColor=none;verticalAlign=top;align=left;spacingLeft=30;fontColor=#232F3E;dashed=0;
```
**Example — AWS Cloud group with children:**
```xml
<mxCell id="aws_cloud" 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;container=1;pointerEvents=0;collapsible=0;recursiveResize=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;" vertex="1" parent="1">
<mxGeometry x="150" y="50" width="900" height="600" as="geometry" />
</mxCell>
<mxCell id="lambda" style="...resIcon=mxgraph.aws4.lambda;..." value="Lambda" vertex="1" parent="aws_cloud">
<mxGeometry x="100" y="200" width="60" height="60" as="geometry" />
</mxCell>
```
Key rules:
- Child cells use `parent="<group_id>"` — their x/y coordinates are relative to the group's top-left corner
- Place external elements (users, third-party services) **outside** the AWS Cloud group with `parent="1"`
- Size the group container large enough to fit all children with padding (at least 40px on each side)
### Category color table
| Category | fillColor | Example services |
|----------|-----------|-----------------|
| Compute | `#ED7100` | Lambda, EC2, ECS, Fargate, Batch |
| Containers | `#ED7100` | ECS, EKS, ECR |
| Network & Content Delivery | `#8C4FFF` | CloudFront, VPC, Route 53, ELB, API Gateway (NW) |
| Analytics | `#8C4FFF` | Athena, Kinesis, Redshift, EMR, QuickSight |
| Storage | `#7AA116` | S3, EBS, EFS, Glacier, Storage Gateway |
| IoT | `#7AA116` | IoT Core, Greengrass |
| Database | `#C925D1` | DynamoDB, RDS, Aurora, ElastiCache, Neptune |
| Developer Tools | `#C925D1` | CodeBuild, CodePipeline, CodeDeploy |
| Security, Identity & Compliance | `#DD344C` | Cognito, IAM, WAF, Shield, KMS |
| Front-End Web & Mobile | `#DD344C` | Amplify |
| Application Integration | `#E7157B` | API Gateway, SQS, SNS, Step Functions, EventBridge |
| Management & Governance | `#E7157B` | CloudWatch, CloudFormation, CloudTrail, Systems Manager |
| AI/ML | `#01A88D` | SageMaker, Bedrock, Rekognition, Comprehend |
| Migration & Modernization | `#01A88D` | DMS, Migration Hub |
| General Resources | `#1E262E` | Users, AWS Cloud, Internet, Generic resource |
### Example
```xml
<mxCell id="10" style="sketch=0;points=[[0,0,0],[0.25,0,0],[0.5,0,0],[0.75,0,0],[1,0,0],[0,1,0],[0.25,1,0],[0.5,1,0],[0.75,1,0],[1,1,0],[0,0.25,0],[0,0.5,0],[0,0.75,0],[1,0.25,0],[1,0.5,0],[1,0.75,0]];outlineConnect=0;fontColor=#232F3E;fillColor=#7AA116;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.s3;" value="Amazon S3" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="60" height="60" as="geometry" />
</mxCell>
```
Known Limitations
Since Claude Code cannot see the rendered results of the diagrams it generates, edge label coordinates are calculated based on source/target positions. This works fine for simple diagrams, but manual adjustment of label positions may be needed for complex diagrams.
That said, compared to drawing everything manually from scratch, having AI generate the framework and then making minor adjustments is a significant time-saver.
Conclusion
Using the draw.io official Skill significantly improved the quality of diagrams generated by Claude Code.
However, the AWS icon style rules are not fully covered by the official Skill alone, so guidelines need to be added to SKILL.md.
SKILL.md is a Markdown file, so customization is easy. Feel free to use the guidelines in this article as a base and adjust them to suit your project's needs.