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.
From drawionpx claudepluginhub thomasrohde/marketplace --plugin drawioThis skill uses the workspace's default tool permissions.
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.mdGuides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Orchestrates subagents to execute phased plans: deploys for implementation, verification, anti-pattern checks, code quality review, and commits only after passing checks.
Create 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>