Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
github avatar

Draw Io Diagram Generator

github/awesome-copilot

  • 2.3k installs
  • 37.1k repo stars
  • Updated July 28, 2026
  • github/awesome-copilot

draw-io-diagram-generator is an agent skill that authors valid draw.io mxGraph XML for flowcharts, architecture, sequence, ER, and UML diagrams ready to open in VS Code or draw.io.

About

Draw.io Diagram Generator teaches agents to create, edit, and validate draw.io files (.drawio, .drawio.svg, .drawio.png) with correct mxGraph XML that opens immediately in the hediet.vscode-drawio VS Code extension or the draw.io web and desktop apps. It covers eight diagram types including flowcharts, system architecture, sequence diagrams, ER diagrams, UML class diagrams, network topology, BPMN workflows, and mind maps, each with templates under assets/templates/ when available. The workflow walks from request clarification through layout planning, XML generation, style strings, shape libraries, and optional Python validation scripts. Critical rules include always reserving mxCell ids 0 and 1, using orthogonal edge styles, maintaining 40-60px horizontal and 80-120px vertical spacing, and validating output before delivery. Agents learn vertex and edge cell patterns, swimlane tiers, connector cardinality notation, and export formats. Optional Python 3.8+ scripts support validation and shape insertion. Trigger phrases include create a diagram, draw a flowchart, generate architecture diagram, and any request to produce or modify .drawio files.

  • Ships ready-to-open mxGraph XML for flowcharts, architecture, sequence, ER, UML, and network diagrams.
  • Includes templates under assets/templates/ plus a step-by-step agent workflow from request to validated file.
  • Documents hediet.vscode-drawio extension install and supported .drawio/.drawio.svg/.drawio.png extensions.
  • Covers layout spacing rules, vertex and edge cell patterns, and mandatory mxCell ids 0 and 1.
  • Optional Python validation and shape-insertion scripts for automated diagram QA.

Draw Io Diagram Generator by the numbers

  • 2,263 all-time installs (skills.sh)
  • +78 installs in the week ending Jul 28, 2026 (Skillselion tracking)
  • Ranked #164 of 1,901 Documentation skills by installs in the Skillselion catalog
  • Security screen: LOW risk (skills.sh audit)
  • Data as of Jul 28, 2026 (Skillselion catalog sync)
At a glance

draw-io-diagram-generator capabilities & compatibility

Capabilities
mxgraph xml authoring for eight diagram types · template based and fresh diagram skeleton genera · layout spacing and style string guidance · optional python validation scripts · vs code draw.io extension workflow
Use cases
documentation · planning
npx skills add https://github.com/github/awesome-copilot --skill draw-io-diagram-generator

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs2.3k
repo stars★ 37.1k
Security audit3 / 3 scanners passed
Last updatedJuly 28, 2026
Repositorygithub/awesome-copilot ↗

How do I generate a .drawio file with correct mxGraph XML that opens without manual fixes?

Generate and edit draw.io diagram files with valid mxGraph XML for flowcharts, architecture, sequence, ER, UML, and network diagrams.

Who is it for?

Developers documenting system architecture, flows, or data models who want agent-generated draw.io files.

Skip if: Skip when you need interactive whiteboarding or non-draw.io formats like Mermaid-only exports.

When should I use this skill?

User asks to create a diagram, draw a flowchart, generate architecture diagram, or add a .drawio file.

What you get

A validated .drawio file with proper cells, connectors, layout spacing, and optional template structure.

  • Validated .drawio diagram file
  • mxGraph XML with vertices and edges

By the numbers

  • Eight supported diagram types with templates
  • Standard shape size 120x60 px for process boxes
  • Default canvas A4 landscape 1169 x 827 px

Files

SKILL.mdMarkdownGitHub ↗

Draw.io Diagram Generator

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.

---

1. When to Use This Skill

Trigger phrases (load this skill when you see these)

  • "create a diagram", "draw a flowchart", "generate an architecture diagram"
  • "design a sequence diagram", "make a UML class diagram", "build an ER diagram"
  • "add a .drawio file", "update the diagram", "visualise the flow"
  • "document the architecture", "show the data model", "diagram the service interactions"
  • Any request to produce or modify a .drawio, .drawio.svg, or .drawio.png file

Supported diagram types

Diagram TypeTemplate AvailableDescription
Flowchartassets/templates/flowchart.drawioProcess flows with decisions and branches
System Architectureassets/templates/architecture.drawioMulti-tier / layered service architecture
Sequence Diagramassets/templates/sequence.drawioActor lifelines and timed message flows
ER Diagramassets/templates/er-diagram.drawioDatabase tables with relationships
UML Class Diagramassets/templates/uml-class.drawioClasses, 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

---

2. Prerequisites

  • If running with VS Code integration enabled, Install the drawio extension: draw.io VS Code extension — hediet.vscode-drawio (extension id). Install with:
  ext install hediet.vscode-drawio
  • Supported file extensions: .drawio, .drawio.svg, .drawio.png
  • Python 3.8+ (optional) — for the validation and shape-insertion scripts in scripts/

---

3. Step-by-Step Agent Workflow

Follow these steps in order for every diagram generation task.

Step 1 — Understand the Request

Ask or infer: 1. Diagram type — What kind of diagram? (flowchart, architecture, UML, ER, sequence, network...) 2. Entities / actors — What are the main components, actors, classes, or tables? 3. Relationships — How are they connected? What direction? What cardinality? 4. Output path — Where should the .drawio file be saved? 5. Existing file — Are we creating new or editing an existing file?

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).

Step 2 — Select a Template or Start Fresh

  • Use a template when the diagram type matches one in assets/templates/. Copy the template structure and replace placeholder values.
  • Start fresh for novel layouts. Begin with the minimal valid skeleton:
<!-- 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 0 and 1 are ALWAYS required and must be the first two cells. Never reuse them.

Step 3 — Plan the Layout

Before generating XML, sketch the logical placement:

  • Organise into rows or tiers (use swimlanes for layers)
  • Horizontal spacing: 40–60px between same-row shapes
  • Vertical spacing: 80–120px between tier rows
  • Standard shape size: 120x60 px for process boxes, 160x80 px for swimlanes
  • Default canvas: A4 landscape = 1169 x 827 px

Step 4 — Generate the mxGraph XML

Vertex 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:

  • Every cell id must be globally unique within the file
  • Every vertex must have an mxGeometry child with x, y, width, height, as="geometry"
  • Every edge must have source and target matching existing vertex ids — exception: floating edges (e.g. sequence diagram lifelines) use sourcePoint/targetPoint inside <mxGeometry> instead; see §4 Sequence Diagram
  • Every cell's parent must reference an existing cell id
  • Use html=1 in style when the label contains HTML (<b>, <i>, <br>)
  • Escape XML special characters in labels: & => &amp;, < => &lt;, > => &gt;

Step 5 — Apply Correct Styles

Use the standard semantic color palette for consistency:

PurposefillColorstrokeColor
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.md for the complete style key catalog and references/shape-libraries.md for all shape library names.

Step 6 — Save and Validate

1. Write the file to the requested path with .drawio extension 2. Run the validator (optional but recommended):

   python .github/skills/draw-io-diagram-generator/scripts/validate-drawio.py <path-to-file.drawio>

3. Tell the user how to open the file:

"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."

4. Provide a brief description of what is in the diagram so the user knows what to expect.

---

4. Diagram-Type Recipes

Flowchart

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>

Architecture Diagram (3-tier)

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".

Sequence Diagram

Key elements: Actors (top), Lifelines (dashed vertical lines), Activation boxes, Message arrows.

  • Lifelines: edge="1" with endArrow=none and dashed=1, no source/target — use sourcePoint/targetPoint in geometry
  • Synchronous message: endArrow=block;endFill=1
  • Return message: endArrow=open;endFill=0;dashed=1
  • Self-call: loop the edge via two Array points to the right and back

Minimal 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/targetPoint in <mxGeometry> instead of source/target attributes. This is the standard draw.io pattern for sequence diagrams.

ER Diagram

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:

  • One-to-One: startArrow=ERone;endArrow=ERone
  • One-to-Many: startArrow=ERone;endArrow=ERmany
  • Many-to-Many: startArrow=ERmany;endArrow=ERmany
  • Mandatory: ERmandOne, Optional: ERzeroToOne

UML Class Diagram

Class boxes are swimlane containers. Attributes and methods are plain text cells. Dividers are zero-height swimlane children.

Arrow styles by relationship type:

RelationshipStyle String
Inheritance (extends)edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=0;
Realization (implements)edgeStyle=orthogonalEdgeStyle;dashed=1;html=1;endArrow=block;endFill=0;
CompositionedgeStyle=orthogonalEdgeStyle;html=1;startArrow=diamond;startFill=1;endArrow=none;
AggregationedgeStyle=orthogonalEdgeStyle;html=1;startArrow=diamond;startFill=0;endArrow=none;
DependencyedgeStyle=orthogonalEdgeStyle;dashed=1;html=1;endArrow=open;endFill=0;
AssociationedgeStyle=orthogonalEdgeStyle;html=1;endArrow=open;endFill=0;

---

5. Multi-Page Diagrams

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.

---

6. Editing Existing Diagrams

When modifying an existing .drawio file:

1. Read the file first to understand existing cell ids, positions, and parent hierarchy 2. Identify the target diagram page — by index or name attribute 3. Assign new unique ids that do not collide with existing ids 4. Respect the container hierarchy — children of a swimlane use coordinates relative to their parent 5. Verify edges — after repositioning nodes, confirm edge source/target ids remain valid

Use 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

---

7. Best Practices

Layout

  • Align shapes to the 10px grid (all coordinates divisible by 10)
  • Group related shapes inside swimlane containers
  • One diagram topic per page; use multi-page files for complex systems
  • Aim for 40 or fewer cells per page for readability

Labels

  • Add a title text cell (text;strokeColor=none;fillColor=none;fontSize=18;fontStyle=1) at top of every page
  • Always set whiteSpace=wrap;html=1 on vertex shapes
  • Keep labels concise — 3 words or fewer per shape where possible

Style consistency

  • Use the semantic color palette from Section 3 Step 5 consistently across a project
  • Prefer edgeStyle=orthogonalEdgeStyle for clean right-angle connectors
  • Do not inline arbitrary HTML in labels unless necessary

File naming

  • Use kebab-case: order-service-flow.drawio, database-schema.drawio
  • Place diagrams alongside the code they document: docs/ or architecture/

---

8. Troubleshooting

ProblemLikely CauseFix
File opens blank in VS CodeMissing id=0 or id=1 cellAdd both root cells before any other cells
Shape at wrong positionChild inside container — coords are relativeCheck parent; adjust x/y relative to container
Edge not visiblesource or target id does not match any vertexVerify both ids exist exactly as written
Diagram shows "Compressed"mxGraphModel is base64-encodedOpen in draw.io web, File > Export > XML (uncompressed)
Shape style not renderingTypo in shape= nameCheck references/shape-libraries.md for exact style string
Label shows escaped HTMLhtml=0 on a cell with HTML labelAdd html=1; to the cell style
Container children overlap container edgeContainer height too smallIncrease container height in mxGeometry

---

9. Validation Checklist

Before delivering any generated .drawio file, verify:

  • [ ] File starts with <mxfile> root element
  • [ ] Every <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 diagram
  • [ ] All cell id values are unique within each diagram
  • [ ] Every vertex cell has vertex="1" and a child <mxGeometry as="geometry">
  • [ ] Every edge cell has 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)
  • [ ] Every cell (except id=0) has a parent pointing to an existing id
  • [ ] html=1 is in the style for any label containing HTML tags
  • [ ] XML is well-formed (no unclosed tags, no unescaped &, <, > in attribute values)
  • [ ] A title label cell exists at the top of each page

Run the automated validator:

python .github/skills/draw-io-diagram-generator/scripts/validate-drawio.py <file.drawio>

---

10. Output Format

When delivering a diagram, always provide:

1. The `.drawio` file written to the requested path 2. A one-sentence summary of what the diagram shows 3. How to open it:

"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."

4. How to edit it (if the user is likely to customise):

"Click any shape to select it. Double-click to edit the label. Drag to reposition."

5. Validation status — whether the validator script was run and passed

---

11. References

All companion files are in .github/skills/draw-io-diagram-generator/:

FileContents
references/drawio-xml-schema.mdComplete mxfile / mxGraphModel / mxCell attribute reference, coordinate system, reserved cells, validation rules
references/style-reference.mdAll style keys with allowed values, vertex and edge style keys, shape catalog, semantic color palette
references/shape-libraries.mdAll shape library categories (General, Flowchart, UML, ER, Network, BPMN, Mockup, K8s) with style strings
assets/templates/flowchart.drawioReady-to-use flowchart template
assets/templates/architecture.drawio4-tier system architecture template
assets/templates/sequence.drawio3-actor sequence diagram template
assets/templates/er-diagram.drawio3-table ER diagram with crow's foot relationships
assets/templates/uml-class.drawioInterface + 2 classes + enum with relationship arrows
scripts/validate-drawio.pyPython script to validate XML structure of any .drawio file
scripts/add-shape.pyPython CLI to add a new shape to an existing diagram
scripts/README.mdHow to use the scripts with examples

Related skills

open.feishu.cnLark MarkdownInstantly turn any markdown file into clean, formatted Lark/Figma-compatible documents without manual reformatting.451klarksuiteLark DocCreate, read, update, summarize, rewrite and manage Feishu/Lark cloud documents directly from agent workflows.391k15.9klarksuiteLark WikiCreate, organize, query, and manage documents, spaces, and members inside Lark (Feishu) knowledge bases directly from AI agent workflows.387k15.9kxixu-meOpensource Guide CoachGet expert, attribution-safe guidance on launching and sustaining an open-source project.270k72xixu-meReadme I18nMaintain consistent, updatable language selector blocks across every README variant in a multilingual repository.270k72mattpocockDomain ModelingBuild and sharpen a project's domain model: pin down domain terminology in a glossary and record architectural decisions as ADRs.267k192k

How it compares

Choose draw-io-diagram-generator for editable .drawio files; use Mermaid or PlantUML skills when diagrams must live as text in Git repositories.

FAQ

What diagram types are supported?

Flowcharts, system architecture, sequence, ER, UML class, network topology, BPMN, and mind maps with templates where available.

Which editor opens the output?

Files open in the hediet.vscode-drawio VS Code extension, draw.io web app, or desktop app without manual XML fixes.

Is draw-io-diagram-generator safe to install?

Review the Security Audits panel on this page before installing in production repositories.

Documentationdocs
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.