AWS Architecture Diagram Skill
MIT Kiro CLI Claude Code
prompt
AI
Agent
+ skill
Kiro / Claude Code
generates
Serverless API
.drawio
Serverless API diagram
AWS Architecture Diagram Skill
Prompt → production-ready .drawio · 270+ verified icons · zero dependencies
270+ AWS icons Kiro + Claude Code Zero deps Editable .drawio
Claude Code: /plugin marketplace add vidanov/aws-architecture-diagram-skill /plugin install aws-architecture-diagram@vidanov-skills
Kiro CLI: cp kiro/SKILL.md ~/.kiro/skills/aws-architecture-diagram/SKILL.md

Why I built this

I see architecture diagrams as a craft. A good diagram communicates structure at a glance, guides the eye through the flow, and respects the visual language of the platform it describes. I can spot a generic AI-generated diagram instantly: random placement, wrong colors, broken icons, no visual hierarchy.

But speed matters. When I'm iterating on an architecture, I need a solid draft in seconds, not hours. Something I can open in draw.io, adjust, and hand to a client the same day. The output has to be editable, not a static PNG I'd need to recreate from scratch.

I looked at existing tools. MCP servers that require Python and GraphViz. SaaS products that output non-editable PNGs. Generic diagram generators that don't know the difference between a service icon and a resource icon. None of them matched how I actually work: AWS-focused, draw.io as the editor, specific layout conventions, correct icon styling.

So I built a skill that teaches the AI my rules. Left-to-right flow. Official AWS color palette. Verified icon names extracted from draw.io's source code. The two-pattern rule that nobody documents. The result is a draft that's 80% there, in my style, ready for the 20% of human refinement that makes it good.

The discovery that makes it work draw.io's AWS library has two icon patterns with opposite strokeColor rules. Service-level icons need #ffffff. Resource-level icons need none. Every AI tool I tested mixed these up, producing empty colored squares. Documenting which pattern each of the 270+ icons uses is what makes this skill produce correct output.

Where this is going

The current output is good. It's not perfect. I still believe I can push it further.

The next step is multiple diagram styles for the same architecture. A technical diagram for the engineering team. A simplified view for business stakeholders. A version that follows a specific company's visual identity. Same architecture, different audiences, different visual languages.

Architecture diagrams serve communication. The technical truth stays the same, but how you present it depends on who's reading. That's the extension I'm working toward.

Generated examples

Event-Driven Order Processing diagram
"Create an event-driven order processing architecture with SQS, Lambda, DynamoDB, and EventBridge" Download .drawio
Real-Time IoT Analytics Pipeline diagram
"Create a real-time IoT analytics pipeline with Kinesis, Lambda, S3 data lake, and DynamoDB" Download .drawio
3-Tier Web Application diagram
"Create a 3-tier web application with CloudFront, ALB, ECS Fargate, Aurora, and ElastiCache" Download .drawio

270+ verified icons

Extracted from draw.io source code. Each one tested. Correct fillColor and strokeColor documented.

Editable output

Native .drawio XML. Open it, move things around, add details. Not a locked PNG.

Zero dependencies

A markdown file. No MCP server, no Python, no GraphViz, no Go binary. Drop it in and it works.

Opinionated layout

Left-to-right flow. Frontend on left, data on right. Consistent spacing. AWS color palette.

Audience modes

Technical labels for engineers. Numbered flow (① ② ③) for presentations and non-technical stakeholders.

Dual platform

Works in both Kiro CLI and Claude Code. Same skill, same output quality.

Comparison with alternatives

SolutionTypeOutputEditableZero-depsVerified Icons
aws-architecture-diagram-skill Agent Skill.drawio
Claude Code / Kiro (no skill) Raw LLM generation.drawio
jgraph/drawio-mcp MCP Server + Skill.drawio❌ (MCP)
awslabs/aws-diagram-mcp-server MCP Server (Python)PNG❌ (Python+GraphViz)N/A
awslabs/diagram-as-code CLI (Go)PNG/SVG❌ (Go binary)N/A
carlosmgv02/diagram-ai-generator MCP ServerMulti-cloud❌ (MCP)
clouda.ai SaaSPNGN/AN/A
Why "raw generation" without a skill fails Without the skill, Claude Code and Kiro can still produce .drawio XML, but they hallucinate icon names, mix up the two strokeColor patterns, use random placement, and produce 30-50% broken icons. You spend more time fixing the output than you saved generating it. The skill eliminates these issues by constraining the AI to verified icon names, correct patterns, and opinionated layout rules.

Roadmap