From drawio
This skill should be used when the user asks to "create a diagram", "make a flowchart", "generate a .drawio file", "draw.io diagram", "diagrams.net", "architecture diagram", "sequence diagram", "ER diagram", "class diagram", "network diagram", "org chart", "workflow diagram", "UML diagram", "ArchiMate diagram", "C4 diagram", "C4 model", "enterprise architecture", or mentions "drawio", "mxGraph", or diagram visualization. Provides comprehensive knowledge for creating production-ready DrawIO XML files.
How this skill is triggered — by the user, by Claude, or both
Slash command
/drawio:drawio-creationThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Create production-ready `.drawio` files with proper XML structure, styling, and layout. DrawIO (diagrams.net) uses an XML-based format built on mxGraph library.
examples/archimate.drawioexamples/architecture.drawioexamples/c4-diagram.drawioexamples/class-diagram.drawioexamples/er-diagram.drawioexamples/flowchart.drawioexamples/network-diagram.drawioexamples/org-chart.drawioexamples/sequence-diagram.drawioreferences/shape-library.mdreferences/styling-guide.mdreferences/xml-structure.mdCreate production-ready .drawio files with proper XML structure, styling, and layout. DrawIO (diagrams.net) uses an XML-based format built on mxGraph library.
DrawIO files are XML documents with .drawio extension (also .drawio.xml or .drawio.svg). The format uses mxGraph's XML serialization with compressed or uncompressed content.
Every DrawIO file follows this structure:
<mxfile host="app.diagrams.net" modified="2024-01-01T00:00:00.000Z" agent="Claude" version="21.0.0" type="device">
<diagram id="diagram-id" name="Page-1">
<mxGraphModel dx="1000" dy="600" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<!-- Shapes and connectors go here -->
</root>
</mxGraphModel>
</diagram>
</mxfile>
Key elements:
mxfile - Root container, can hold multiple diagrams (pages)diagram - Single page with unique id and namemxGraphModel - Canvas settings (size, grid, guides)root - Contains all cells (shapes and edges)mxCell id="0" - Required root cellmxCell id="1" - Required default parent for all shapesVertex (Shape):
<mxCell id="2" value="Label" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="120" height="60" as="geometry" />
</mxCell>
Edge (Connector):
<mxCell id="3" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;" edge="1" parent="1" source="2" target="4">
<mxGeometry relative="1" as="geometry" />
</mxCell>
Assign unique IDs to every cell. Use a simple incrementing pattern starting from "2" (0 and 1 are reserved):
<mxCell id="2" ... /> <!-- First shape -->
<mxCell id="3" ... /> <!-- First edge -->
<mxCell id="4" ... /> <!-- Second shape -->
Use x/y coordinates relative to the canvas origin (top-left). Typical spacing:
Rectangle (default):
rounded=0;whiteSpace=wrap;html=1;
Rounded rectangle:
rounded=1;whiteSpace=wrap;html=1;
Ellipse/Circle:
ellipse;whiteSpace=wrap;html=1;
Diamond (decision):
rhombus;whiteSpace=wrap;html=1;
Cylinder (database):
shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;
Document:
shape=document;whiteSpace=wrap;html=1;boundedLbl=1;
Process (rectangle with side lines):
shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;
Orthogonal (right angles):
edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;
Curved:
edgeStyle=orthogonalEdgeStyle;curved=1;orthogonalLoop=1;jettySize=auto;html=1;
Straight:
edgeStyle=none;orthogonalLoop=1;jettySize=auto;html=1;
With arrow:
endArrow=classic;html=1;
Dashed:
dashed=1;
Add to style string:
fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#333333;fontSize=12;fontStyle=1;strokeWidth=2;Common color schemes:
fillColor=#dae8fc;strokeColor=#6c8ebf;fillColor=#d5e8d4;strokeColor=#82b366;fillColor=#ffe6cc;strokeColor=#d79b00;fillColor=#f8cecc;strokeColor=#b85450;fillColor=#e1d5e7;strokeColor=#9673a6;fillColor=#f5f5f5;strokeColor=#666666;Use rectangles for processes, diamonds for decisions, ellipses for start/end:
<!-- Start -->
<mxCell id="2" value="Start" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
<mxGeometry x="200" y="40" width="80" height="40" as="geometry" />
</mxCell>
<!-- Process -->
<mxCell id="3" value="Process Step" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="170" y="120" width="140" height="60" as="geometry" />
</mxCell>
<!-- Decision -->
<mxCell id="4" value="Condition?" style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
<mxGeometry x="180" y="220" width="120" height="80" as="geometry" />
</mxCell>
Use grouped containers, service shapes, and labeled connectors:
<!-- Container/Group -->
<mxCell id="2" value="Backend Services" style="swimlane;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" vertex="1" parent="1">
<mxGeometry x="40" y="40" width="300" height="200" as="geometry" />
</mxCell>
<!-- Service inside container -->
<mxCell id="3" value="API Gateway" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="2">
<mxGeometry x="20" y="40" width="120" height="60" as="geometry" />
</mxCell>
Use vertical lifelines with horizontal message arrows:
<!-- Actor/Lifeline header -->
<mxCell id="2" value="Client" style="shape=umlLifeline;perimeter=lifelinePerimeter;whiteSpace=wrap;html=1;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;portConstraint=eastwest;newEdgeStyle={"edgeStyle":"elbowEdgeStyle","elbow":"vertical","curved":0,"rounded":0};" vertex="1" parent="1">
<mxGeometry x="100" y="40" width="100" height="300" as="geometry" />
</mxCell>
<!-- Message -->
<mxCell id="4" value="request()" style="html=1;verticalAlign=bottom;endArrow=block;edgeStyle=elbowEdgeStyle;elbow=vertical;curved=0;rounded=0;" edge="1" parent="1">
<mxGeometry relative="1" as="geometry">
<mxPoint x="150" y="100" as="sourcePoint" />
<mxPoint x="350" y="100" as="targetPoint" />
</mxGeometry>
</mxCell>
Use table shapes with columns:
<mxCell id="2" value="users" style="swimlane;fontStyle=1;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=26;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="160" height="130" as="geometry" />
</mxCell>
<mxCell id="3" value="id: INT (PK)" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;whiteSpace=wrap;html=1;fontStyle=1;" vertex="1" parent="2">
<mxGeometry y="26" width="160" height="26" as="geometry" />
</mxCell>
<mxCell id="4" value="email: VARCHAR(255)" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;whiteSpace=wrap;html=1;" vertex="1" parent="2">
<mxGeometry y="52" width="160" height="26" as="geometry" />
</mxCell>
Use UML class shapes:
<mxCell id="2" value="<b>ClassName</b>" style="swimlane;fontStyle=0;align=center;verticalAlign=top;childLayout=stackLayout;horizontal=1;startSize=26;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=0;marginBottom=0;html=1;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="160" height="130" as="geometry" />
</mxCell>
<mxCell id="3" value="- privateField: Type" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;" vertex="1" parent="2">
<mxGeometry y="26" width="160" height="26" as="geometry" />
</mxCell>
<mxCell id="4" value="" style="line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=3;rotatable=0;labelPosition=right;points=[];portConstraint=eastwest;strokeColor=inherit;" vertex="1" parent="2">
<mxGeometry y="52" width="160" height="8" as="geometry" />
</mxCell>
<mxCell id="5" value="+ publicMethod(): void" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;" vertex="1" parent="2">
<mxGeometry y="60" width="160" height="26" as="geometry" />
</mxCell>
For detailed information, consult:
references/xml-structure.md - Complete XML structure and attributesreferences/shape-library.md - Comprehensive shape styles and iconsreferences/styling-guide.md - Advanced styling, themes, and formattingWorking examples in examples/:
flowchart.drawio - Basic flowchart with decision logicarchitecture.drawio - Microservices architecture diagramsequence-diagram.drawio - UML sequence diagramer-diagram.drawio - Entity-relationship database diagramclass-diagram.drawio - UML class diagramnetwork-diagram.drawio - Network topology diagramorg-chart.drawio - Organizational hierarchy chartarchimate.drawio - ArchiMate enterprise architecture (Business/Application/Technology layers)c4-diagram.drawio - C4 model with Context and Container diagramsMinimal working .drawio file:
<mxfile host="app.diagrams.net" modified="2024-01-01T00:00:00.000Z" agent="Claude" version="21.0.0" type="device">
<diagram id="main" name="Diagram">
<mxGraphModel dx="1000" dy="600" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<!-- Add shapes here -->
</root>
</mxGraphModel>
</diagram>
</mxfile>
npx claudepluginhub thomasrohde/marketplace --plugin drawioCreate, read, edit, and open draw.io (.drawio) files for architecture diagrams, ER diagrams, flowcharts, domain models, and more. Use to visualize or reference designs in development.
Generates draw.io (.drawio) XML files for logical flow diagrams, abstract system architectures, BPMN processes, UML diagrams, DFDs, decision flowcharts, and system interactions.
Generates draw.io XML diagrams from natural language for flowcharts, architecture, mindmaps; embeds in HTML and renders in browser.