Create and edit draw.io diagram files (.drawio) for architecture diagrams, flowcharts, network diagrams, and technical illustrations. Use when the user asks to create diagrams, architecture visuals, flowcharts, wireframes, network topology, or any visual that should be editable in draw.io/diagrams.net. Outputs XML-based .drawio files that can be imported directly into draw.io desktop or web app.
Create professional, editable diagram files in draw.io's native XML format.
Draw.io files are XML with this structure:
<mxfile host="app.diagrams.net" modified="DATE" agent="Claude" version="21.0.0" type="device">
<diagram name="DIAGRAM_NAME" id="UNIQUE_ID">
<mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1100" pageHeight="850" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<!-- All diagram elements go here -->
</root>
</mxGraphModel>
</diagram>
</mxfile>
<!-- Rectangle -->
<mxCell id="unique-id" value="Label Text" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="120" height="60" as="geometry" />
</mxCell>
<!-- Rounded Rectangle -->
<mxCell id="unique-id" value="Label" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="120" height="60" as="geometry" />
</mxCell>
<!-- Cylinder (Database) -->
<mxCell id="unique-id" value="Database" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="80" height="80" as="geometry" />
</mxCell>
<!-- Ellipse -->
<mxCell id="unique-id" value="Node" style="ellipse;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="80" height="80" as="geometry" />
</mxCell>
<!-- Swimlane (Container with Header) -->
<mxCell id="unique-id" value="Section Title" style="swimlane;fontStyle=1;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=30;fillColor=#f5f5f5;strokeColor=#666666;fontColor=#333333;" vertex="1" parent="1">
<mxGeometry x="40" y="40" width="200" height="150" as="geometry" />
</mxCell>
<!-- Header Bar (using brand primary color) -->
<mxCell id="unique-id" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#0066CC;strokeColor=#0066CC;" vertex="1" parent="1">
<mxGeometry x="40" y="40" width="400" height="40" as="geometry" />
</mxCell>
<!-- Basic Arrow -->
<mxCell id="unique-id" value="" style="endArrow=classic;html=1;rounded=0;strokeWidth=2;strokeColor=#666666;" edge="1" parent="1" source="source-id" target="target-id">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<!-- Bidirectional Arrow -->
<mxCell id="unique-id" value="" style="endArrow=classic;startArrow=classic;html=1;rounded=0;strokeWidth=2;" edge="1" parent="1">
<mxGeometry relative="1" as="geometry">
<mxPoint x="200" y="200" as="sourcePoint" />
<mxPoint x="400" y="200" as="targetPoint" />
</mxGeometry>
</mxCell>
<!-- Flex Arrow (Block Arrow) -->
<mxCell id="unique-id" value="" style="shape=flexArrow;endArrow=classic;html=1;fillColor=#FFB800;strokeColor=#cc9400;width=20;endSize=8;" edge="1" parent="1">
<mxGeometry relative="1" as="geometry">
<mxPoint x="200" y="200" as="sourcePoint" />
<mxPoint x="400" y="200" as="targetPoint" />
</mxGeometry>
</mxCell>
<!-- Dashed Line -->
<mxCell id="unique-id" value="" style="endArrow=classic;html=1;dashed=1;dashPattern=8 8;strokeColor=#999999;" edge="1" parent="1">
<mxGeometry relative="1" as="geometry">
<mxPoint x="200" y="200" as="sourcePoint" />
<mxPoint x="400" y="200" as="targetPoint" />
</mxGeometry>
</mxCell>
<!-- Plain Text -->
<mxCell id="unique-id" value="Label Text" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=12;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="100" height="30" as="geometry" />
</mxCell>
<!-- Bold Title -->
<mxCell id="unique-id" value="Title" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=18;fontStyle=1;fontColor=#333333;" vertex="1" parent="1">
<mxGeometry x="100" y="20" width="300" height="40" as="geometry" />
</mxCell>
<!-- Multi-line Text (use 
 for newlines) -->
<mxCell id="unique-id" value="Line 1
Line 2
Line 3" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=top;whiteSpace=wrap;rounded=0;fontSize=10;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="150" height="60" as="geometry" />
</mxCell>
| Property | Purpose | Example |
|----------|---------|---------|
| fillColor | Background | fillColor=#dae8fc |
| strokeColor | Border | strokeColor=#6c8ebf |
| fontColor | Text | fontColor=#333333 |
Blue: fillColor=#dae8fc;strokeColor=#6c8ebf
Green: fillColor=#d5e8d4;strokeColor=#82b366
Yellow: fillColor=#fff2cc;strokeColor=#d6b656
Orange: fillColor=#ffe6cc;strokeColor=#d79b00
Red: fillColor=#f8cecc;strokeColor=#b85450
Purple: fillColor=#e1d5e7;strokeColor=#9673a6
Grey: fillColor=#f5f5f5;strokeColor=#666666
| Property | Values | Example |
|----------|--------|---------|
| fontSize | Number | fontSize=12 |
| fontStyle | 0=normal, 1=bold, 2=italic, 3=bold+italic | fontStyle=1 |
| align | left, center, right | align=center |
| verticalAlign | top, middle, bottom | verticalAlign=middle |
| Property | Values | Example |
|----------|--------|---------|
| rounded | 0 or 1 | rounded=1 |
| strokeWidth | Number | strokeWidth=2 |
| dashed | 0 or 1 | dashed=1 |
| dashPattern | Pattern | dashPattern=8 8 |
| shadow | 0 or 1 | shadow=1 |
This skill supports company-specific branding. Edit references/branding.md to set your organisation's colours and styles.
Default brand placeholders (replace with your own):
Primary: fillColor=#0066CC;strokeColor=#0052a3;fontColor=#FFFFFF
Secondary: fillColor=#FFB800;strokeColor=#cc9400;fontColor=#333333
Dark: fillColor=#1a1a2e;strokeColor=#1a1a2e;fontColor=#FFFFFF
Light BG: fillColor=#f0f4f8;strokeColor=#0066CC
See references/branding.md for full customisation instructions.
┌─────────────────────────────────────┐
│ Users / Clients │ ← Top layer
├─────────────────────────────────────┤
│ API / Interface │
├─────────────────────────────────────┤
│ Business Logic │
├─────────────────────────────────────┤
│ Data / Storage │ ← Bottom layer
└─────────────────────────────────────┘
┌──────┐ ┌──────────┐ ┌──────────┐
│Source│ ──► │ Process │ ──► │ Target │
└──────┘ └──────────┘ └──────────┘
id attributeparent="1" for top-level elementsmxGeometry with x, y, width, heightmxGraphModel (pageWidth, pageHeight).drawio file/mnt/user-data/outputs/ and present to userDraw.io includes built-in shape libraries for major cloud providers. Use official icons for professional architecture diagrams.
AWS uses shape=mxgraph.aws4.resourceIcon with resIcon=mxgraph.aws4.SERVICE:
<mxCell id="lambda-1" value="Lambda" style="sketch=0;outlineConnect=0;fontColor=#232F3E;fillColor=#ED7100;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.lambda;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="78" height="78" as="geometry" />
</mxCell>
Common AWS resIcon values:
ec2, lambda, ecs, eks, fargates3, elastic_block_store, elastic_file_systemrds, dynamodb, aurora, elasticache, redshiftvpc, cloudfront, route_53, api_gateway, elastic_load_balancingiam, cognito, secrets_manager, kms, wafAWS Category Colors:
#ED7100#7AA116#C925D1#8C4FFF#DD344CAzure uses image=img/lib/azure2/CATEGORY/SERVICE.svg:
<mxCell id="vm-1" value="VM" style="aspect=fixed;html=1;points=[];align=center;image;fontSize=12;image=img/lib/azure2/compute/Virtual_Machine.svg;verticalLabelPosition=bottom;verticalAlign=top;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="68" height="68" as="geometry" />
</mxCell>
Common Azure image paths:
compute/Virtual_Machine.svg, compute/Function_Apps.svgcontainers/Kubernetes_Services.svgstorage/Storage_Accounts.svg, storage/Blob_Storage.svgdatabases/SQL_Database.svg, databases/Azure_Cosmos_DB.svgnetworking/Virtual_Networks.svg, networking/Load_Balancers.svgsecurity/Key_Vaults.svg, identity/Azure_Active_Directory.svg<!-- VPC -->
<mxCell id="vpc" value="VPC" style="sketch=0;outlineConnect=0;gradientColor=none;html=1;whiteSpace=wrap;fontSize=12;fontStyle=0;shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_vpc;strokeColor=#8C4FFF;fillColor=none;verticalAlign=top;align=left;spacingLeft=30;dashed=0;" vertex="1" parent="1">
<mxGeometry x="40" y="40" width="400" height="300" as="geometry" />
</mxCell>
<!-- Public Subnet -->
grIcon=mxgraph.aws4.group_public_subnet;strokeColor=#7AA116;fillColor=#E9F3E6
<!-- Private Subnet -->
grIcon=mxgraph.aws4.group_private_subnet;strokeColor=#00A4A6;fillColor=#E6F6F7
For advanced patterns and complete icon lists, see:
references/architecture-patterns.md - Common architecture diagram layoutsreferences/style-guide.md - Extended styling options and icon placementreferences/cloud-icons.md - Complete AWS, Azure, GCP icon referencereferences/branding.md - Company branding customisation guideEdit PDFs with natural-language instructions using the nano-pdf CLI.
Control Sonos speakers (discover/status/play/volume/group).
Terminal Spotify playback/search via spogo (preferred) or spotify_player.
Capture frames or clips from RTSP/ONVIF cameras.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Monitor blogs and RSS/Atom feeds for updates using the blogwatcher CLI.
Category:tools