Generates and edits draw.io diagrams (flowcharts, architecture, sequence, ER, UML, network) with mxGraph XML for VS Code hediet.vscode-drawio extension.
From awesome-copilotnpx claudepluginhub ctr26/dotfiles --plugin awesome-copilotThis skill uses the workspace's default tool permissions.
assets/templates/architecture.drawioassets/templates/er-diagram.drawioassets/templates/flowchart.drawioassets/templates/sequence.drawioassets/templates/uml-class.drawioreferences/drawio-xml-schema.mdreferences/shape-libraries.mdreferences/style-reference.mdscripts/README.mdscripts/add-shape.pyscripts/validate-drawio.pyFetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Uses ctx7 CLI to fetch current library docs, manage AI coding skills (install/search/generate), and configure Context7 MCP for AI editors.
This skill enables you to generate, edit, and validate draw.io (.drawio) diagram files with
correct mxGraph XML structure. All generated files open immediately in the
Draw.io VS Code extension
(hediet.vscode-drawio) without any manual fixes required. You can also open the files in the draw.io web app or desktop app if you prefer.
Trigger phrases (load this skill when you see these)
.drawio, .drawio.svg, or .drawio.png fileSupported diagram types
| Diagram Type | Template Available | Description |
|---|---|---|
| Flowchart | assets/templates/flowchart.drawio | Process flows with decisions and branches |
| System Architecture | assets/templates/architecture.drawio | Multi-tier / layered service architecture |
| Sequence Diagram | assets/templates/sequence.drawio | Actor lifelines and timed message flows |
| ER Diagram | assets/templates/er-diagram.drawio | Database tables with relationships |
| UML Class Diagram | assets/templates/uml-class.drawio | Classes, interfaces, enums, relationships |
| Network Topology | (use shape library) | Routers, servers, firewalls, subnets |
| BPMN Workflow | (use shape library) | Business process events, tasks, gateways |
| Mind Map | (manual) | Central topic with radiating branches |
hediet.vscode-drawio (extension id). Install with:
ext install hediet.vscode-drawio
.drawio, .drawio.svg, .drawio.pngscripts/Follow these steps in order for every diagram generation task.
Ask or infer:
.drawio file be saved?If the request is ambiguous, infer the most sensible diagram type from context (e.g. "show the tables" → ER diagram, "show how the API call flows" → sequence diagram).
assets/templates/. Copy the template structure and replace placeholder values.<!-- Set modified="" to the current ISO 8601 timestamp when generating a new file -->
<mxfile host="Electron" modified="" version="26.0.0">
<diagram id="page-1" name="Page-1">
<mxGraphModel dx="1422" dy="762" grid="1" gridSize="10" guides="1"
tooltips="1" connect="1" arrows="1" fold="1"
page="1" pageScale="1" pageWidth="1169" pageHeight="827"
math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<!-- Your cells go here -->
</root>
</mxGraphModel>
</diagram>
</mxfile>
Rule: ids
0and1are ALWAYS required and must be the first two cells. Never reuse them.
Before generating XML, sketch the logical placement:
120x60 px for process boxes, 160x80 px for swimlanes1169 x 827 pxVertex cell (every shape):
<mxCell id="unique-id" value="Label"
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;"
vertex="1" parent="1">
<mxGeometry x="100" y="100" width="120" height="60" as="geometry" />
</mxCell>
Edge cell (every connector):
<mxCell id="edge-id" value="Label (optional)"
style="edgeStyle=orthogonalEdgeStyle;html=1;"
edge="1" source="source-id" target="target-id" parent="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
Critical rules:
mxGeometry child with x, y, width, height, as="geometry"source and target matching existing vertex ids — exception: floating edges (e.g. sequence diagram lifelines) use sourcePoint/targetPoint inside <mxGeometry> instead; see §4 Sequence Diagramparent must reference an existing cell idhtml=1 in style when the label contains HTML (<b>, <i>, <br>)& => &, < => <, > => >Use the standard semantic color palette for consistency:
| Purpose | fillColor | strokeColor |
|---|---|---|
| Primary / Info | #dae8fc | #6c8ebf |
| Success / Start | #d5e8d4 | #82b366 |
| Warning / Decision | #fff2cc | #d6b656 |
| Error / End | #f8cecc | #b85450 |
| Neutral | #f5f5f5 | #666666 |
| External / Partner | #e1d5e7 | #9673a6 |
Common style strings by diagram type:
# Rounded process box (flowchart)
rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;
# Decision diamond
rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;
# Start/End terminal
ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;
# Database cylinder
shape=mxgraph.flowchart.database;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;
# Swimlane container (tier)
swimlane;startSize=30;fillColor=#dae8fc;strokeColor=#6c8ebf;fontStyle=1;
# UML class box
swimlane;fontStyle=1;align=center;startSize=40;fillColor=#dae8fc;strokeColor=#6c8ebf;
# Interface / stereotype box
swimlane;fontStyle=3;align=center;startSize=40;fillColor=#f5f5f5;strokeColor=#666666;
# ER table container
shape=table;startSize=30;container=1;collapsible=1;childLayout=tableLayout;
# Orthogonal connector
edgeStyle=orthogonalEdgeStyle;html=1;
# ER relationship (crow's foot)
edgeStyle=entityRelationEdgeStyle;html=1;endArrow=ERmany;startArrow=ERone;
See
references/style-reference.mdfor the complete style key catalog andreferences/shape-libraries.mdfor all shape library names.
.drawio extensionpython .github/skills/draw-io-diagram-generator/scripts/validate-drawio.py <path-to-file.drawio>
"Open
<filename>in VS Code — it will render automatically with the draw.io extension. You can use draw.io's web app or desktop app as well if you prefer."
Key elements: Start (ellipse) => Process (rounded rectangle) => Decision (diamond) => End (ellipse)
<!-- Start node -->
<mxCell id="start" value="Start"
style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;"
vertex="1" parent="1">
<mxGeometry x="500" y="80" width="120" height="60" as="geometry" />
</mxCell>
<!-- Process -->
<mxCell id="p1" value="Process Step"
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;"
vertex="1" parent="1">
<mxGeometry x="500" y="200" width="120" height="60" as="geometry" />
</mxCell>
<!-- Decision -->
<mxCell id="d1" value="Condition?"
style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;"
vertex="1" parent="1">
<mxGeometry x="460" y="320" width="200" height="100" as="geometry" />
</mxCell>
<!-- Arrow: start to p1 -->
<mxCell id="e1" value=""
style="edgeStyle=orthogonalEdgeStyle;html=1;"
edge="1" source="start" target="p1" parent="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
Use swimlane containers for each tier. All service boxes are children of their swimlane.
<!-- Tier swimlane -->
<mxCell id="tier1" value="Client Layer"
style="swimlane;startSize=30;fillColor=#dae8fc;strokeColor=#6c8ebf;fontStyle=1;"
vertex="1" parent="1">
<mxGeometry x="60" y="100" width="1050" height="130" as="geometry" />
</mxCell>
<!-- Service inside tier (parent="tier1", coords are relative to tier) -->
<mxCell id="webapp" value="Web App"
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;"
vertex="1" parent="tier1">
<mxGeometry x="80" y="40" width="120" height="60" as="geometry" />
</mxCell>
Connectors between tiers use absolute coordinates with
parent="1".
Key elements: Actors (top), Lifelines (dashed vertical lines), Activation boxes, Message arrows.
edge="1" with endArrow=none and dashed=1, no source/target — use sourcePoint/targetPoint in geometryendArrow=block;endFill=1endArrow=open;endFill=0;dashed=1Minimal XML snippet:
<!-- Actor (stick figure) -->
<mxCell id="actorA" value="Client"
style="shape=mxgraph.uml.actor;pointerEvents=1;dashed=0;whiteSpace=wrap;html=1;aspect=fixed;"
vertex="1" parent="1">
<mxGeometry x="110" y="80" width="60" height="80" as="geometry" />
</mxCell>
<!-- Service box -->
<mxCell id="actorB" value="API Server"
style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;"
vertex="1" parent="1">
<mxGeometry x="480" y="100" width="160" height="60" as="geometry" />
</mxCell>
<!-- Lifeline — floating edge: uses sourcePoint/targetPoint, NOT source/target attributes -->
<mxCell id="lifA" value=""
style="edgeStyle=none;dashed=1;endArrow=none;"
edge="1" parent="1">
<mxGeometry relative="1" as="geometry">
<mxPoint x="140" y="160" as="sourcePoint" />
<mxPoint x="140" y="700" as="targetPoint" />
</mxGeometry>
</mxCell>
<!-- Activation box (thin rectangle on lifeline) -->
<mxCell id="actA1" value=""
style="fillColor=#dae8fc;strokeColor=#6c8ebf;"
vertex="1" parent="1">
<mxGeometry x="130" y="220" width="20" height="180" as="geometry" />
</mxCell>
<!-- Synchronous message -->
<mxCell id="msg1" value="POST /orders"
style="edgeStyle=elbowEdgeStyle;elbow=vertical;html=1;endArrow=block;endFill=1;"
edge="1" source="actA1" target="actorB" parent="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<!-- Return message (dashed) -->
<mxCell id="msg2" value="201 Created"
style="edgeStyle=elbowEdgeStyle;elbow=vertical;dashed=1;html=1;endArrow=open;endFill=0;"
edge="1" source="actorB" target="actA1" parent="1">
<mxGeometry relative="1" as="geometry" />
</mxCell>
Note: Lifelines are floating edges that use
sourcePoint/targetPointin<mxGeometry>instead ofsource/targetattributes. This is the standard draw.io pattern for sequence diagrams.
Use shape=table containers with childLayout=tableLayout. Rows are shape=tableRow cells with portConstraint=eastwest. Columns inside each row are shape=partialRectangle.
Relationship arrows use edgeStyle=entityRelationEdgeStyle:
startArrow=ERone;endArrow=ERonestartArrow=ERone;endArrow=ERmanystartArrow=ERmany;endArrow=ERmanyERmandOne, Optional: ERzeroToOneClass boxes are swimlane containers. Attributes and methods are plain text cells. Dividers are zero-height swimlane children.
Arrow styles by relationship type:
| Relationship | Style String |
|---|---|
| Inheritance (extends) | edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=0; |
| Realization (implements) | edgeStyle=orthogonalEdgeStyle;dashed=1;html=1;endArrow=block;endFill=0; |
| Composition | edgeStyle=orthogonalEdgeStyle;html=1;startArrow=diamond;startFill=1;endArrow=none; |
| Aggregation | edgeStyle=orthogonalEdgeStyle;html=1;startArrow=diamond;startFill=0;endArrow=none; |
| Dependency | edgeStyle=orthogonalEdgeStyle;dashed=1;html=1;endArrow=open;endFill=0; |
| Association | edgeStyle=orthogonalEdgeStyle;html=1;endArrow=open;endFill=0; |
Add multiple <diagram> elements for complex systems:
<mxfile host="Electron" version="26.0.0">
<diagram id="overview" name="Overview">
<!-- overview mxGraphModel -->
</diagram>
<diagram id="detail" name="Detail View">
<!-- detail mxGraphModel -->
</diagram>
</mxfile>
Each page has its own independent cell id namespace. The same id value can appear in different pages without conflict.
When modifying an existing .drawio file:
name attributeUse scripts/add-shape.py to safely add a single shape without editing raw XML:
python .github/skills/draw-io-diagram-generator/scripts/add-shape.py docs/arch.drawio "New Service" 700 380
Layout
Labels
text;strokeColor=none;fillColor=none;fontSize=18;fontStyle=1) at top of every pagewhiteSpace=wrap;html=1 on vertex shapesStyle consistency
edgeStyle=orthogonalEdgeStyle for clean right-angle connectorsFile naming
order-service-flow.drawio, database-schema.drawiodocs/ or architecture/| Problem | Likely Cause | Fix |
|---|---|---|
| File opens blank in VS Code | Missing id=0 or id=1 cell | Add both root cells before any other cells |
| Shape at wrong position | Child inside container — coords are relative | Check parent; adjust x/y relative to container |
| Edge not visible | source or target id does not match any vertex | Verify both ids exist exactly as written |
| Diagram shows "Compressed" | mxGraphModel is base64-encoded | Open in draw.io web, File > Export > XML (uncompressed) |
| Shape style not rendering | Typo in shape= name | Check references/shape-libraries.md for exact style string |
| Label shows escaped HTML | html=0 on a cell with HTML label | Add html=1; to the cell style |
| Container children overlap container edge | Container height too small | Increase container height in mxGeometry |
Before delivering any generated .drawio file, verify:
<mxfile> root element<diagram> has a non-empty id attribute<mxCell id="0" /> is the first cell in every diagram<mxCell id="1" parent="0" /> is the second cell in every diagramid values are unique within each diagramvertex="1" and a child <mxGeometry as="geometry">edge="1" and either: (a) source/target pointing to existing vertex ids, or (b) <mxPoint as="sourcePoint"> and <mxPoint as="targetPoint"> in its <mxGeometry> (floating edge — used for sequence diagram lifelines)parent pointing to an existing idhtml=1 is in the style for any label containing HTML tags&, <, > in attribute values)Run the automated validator:
python .github/skills/draw-io-diagram-generator/scripts/validate-drawio.py <file.drawio>
When delivering a diagram, always provide:
.drawio file written to the requested path"Open
<filename>in VS Code — the draw.io extension will render it automatically. Or you can open it in the draw.io web app or desktop app if you prefer."
"Click any shape to select it. Double-click to edit the label. Drag to reposition."
All companion files are in .github/skills/draw-io-diagram-generator/:
| File | Contents |
|---|---|
references/drawio-xml-schema.md | Complete mxfile / mxGraphModel / mxCell attribute reference, coordinate system, reserved cells, validation rules |
references/style-reference.md | All style keys with allowed values, vertex and edge style keys, shape catalog, semantic color palette |
references/shape-libraries.md | All shape library categories (General, Flowchart, UML, ER, Network, BPMN, Mockup, K8s) with style strings |
assets/templates/flowchart.drawio | Ready-to-use flowchart template |
assets/templates/architecture.drawio | 4-tier system architecture template |
assets/templates/sequence.drawio | 3-actor sequence diagram template |
assets/templates/er-diagram.drawio | 3-table ER diagram with crow's foot relationships |
assets/templates/uml-class.drawio | Interface + 2 classes + enum with relationship arrows |
scripts/validate-drawio.py | Python script to validate XML structure of any .drawio file |
scripts/add-shape.py | Python CLI to add a new shape to an existing diagram |
scripts/README.md | How to use the scripts with examples |