Draw.io Diagram Skill for Claude

A Claude skill that enables AI-assisted creation of professional, editable draw.io diagrams. This skill teaches Claude how to generate valid .drawio XML files for architecture diagrams, flowcharts, network topologies, and technical illustrations.

What is a Claude Skill?

Claude skills are structured prompts and reference materials that extend Claude’s capabilities in specific domains. When this skill is loaded into Claude’s context, it gains the ability to produce valid draw.io XML that can be opened directly in draw.io or diagrams.net.

Features

• Native draw.io XML output — Files open directly in draw.io desktop or web app
• Cloud provider icons — AWS, Azure, and GCP official icon libraries
• Architecture patterns — Pre-built layouts for common diagram types
• Customisable branding — Easily adapt colours to match your organisation
• Comprehensive reference — Shapes, styles, arrows, and containers

Quick Start

For Claude.ai Users

1. Add the skill files to a zip file:
   • SKILL.md (main skill file)
   • references/ folder (all reference files)
2. Goto users > settings > capabilities, scroll to skills and click Add
3. Select upload a skill passing in the .zip file created earlier.
4. Ensure the radio button is selected on that skill
5. Ask Claude to create diagrams from with a chat. :

Create an AWS architecture diagram using the drawio-skill showing a 3-tier web application 
with ALB, ECS, and RDS across two availability zones.

For Claude Code Users

1. Add the skill to the ./claude/skills/drawio-skill directory (in either your root or project directory.
2. Create a new session on claude code (2.1.7 does support auto reload, i beleive?)
3. either prompt claude to create a diagram, or use the slash (/) commands followed by prompt.

Create an AWS architecture diagram using the drawio-skill showing a 3-tier web application 
with ALB, ECS, and RDS across two availability zones.

/drawio-skill Create an AWS architecture diagram showing a 3-tier web application 
with ALB, ECS, and RDS across two availability zones.

Hints & Tips

Provide the claude chat context, i’ve had good results disucssing the architecture requirments and asking for a wireframe or mermaid diagram of the architecture first, then calling for the skill to convert into a drawio file.

Repository Structure

drawio-skill/
├── SKILL.md                           # Main skill file (required)
├── README.md                          # This file
└── references/
    ├── architecture-patterns.md       # Common diagram layouts
    ├── branding.md                    # Company colour customisation
    ├── cloud-icons.md                 # AWS/Azure/GCP icon reference
    └── style-guide.md                 # Shapes, effects, and styling

Example Outputs

The skill can generate diagrams for: