draw-io-diagram-generator

Generate and validate draw.io diagram files with correct mxGraph XML structure.

Updated Sep 10, 2026
One-click install
npx skills add https://github.com/serpro-workshop-fortaleza/sifap-modernization-paula --skill draw-io-diagram-generator-serpro-workshop-fortaleza
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: draw-io-diagram-generator
Source: https://github.com/serpro-workshop-fortaleza/sifap-modernization-paula/tree/main/.github/skills/draw-io-diagram-generator
Command: npx skills add https://github.com/serpro-workshop-fortaleza/sifap-modernization-paula --skill draw-io-diagram-generator-serpro-workshop-fortaleza

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Creating draw.io diagrams by hand-writing mxGraph XML is error-prone: missing root cells, duplicate IDs, broken edge references, and invalid style strings produce files that fail to open or render incorrectly. This Skill guides the generation, editing, and validation of .drawio files so they open immediately in the VS Code draw.io extension without manual fixes. ## Core Features & Use Cases - Diagram generation from templates: Produce flowcharts, system architecture, sequence, ER, and UML class diagrams from ready-made templates or from scratch with correct mxGraph XML. - Structural validation: Run a Python validator that checks root cells, unique IDs, edge connectivity, parent chains, and XML well-formedness before delivery. - Safe editing of existing diagrams: Add shapes to existing .drawio files via a CLI helper without hand-editing raw XML. - Use Case: Ask for an ER diagram of your database tables; the Skill generates a valid .drawio file with crow's-foot relationships, validates it, and tells you how to open it in VS Code. ## Quick Start Ask the agent to create a draw.io architecture diagram of your services and save it as docs/architecture.drawio.

Frequently Asked Questions about draw-io-diagram-generator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a draw.io diagram file programmatically?

Generate an mxfile XML document containing a diagram element with an mxGraphModel and root cells id 0 and 1, then add vertex cells with mxGeometry and edge cells with source and target references. The file opens directly in the VS Code draw.io extension or the draw.io web app.

How do I validate a .drawio file structure?

Run the validate-drawio.py script with Python 3.8 or later, passing the file path. It checks root cells, unique IDs, edge connectivity, parent chains, geometry elements, and XML well-formedness, exiting with code 0 on success.

What diagram types can draw.io XML represent?

The mxGraph format supports flowcharts, system architecture with swimlane layers, sequence diagrams with lifelines, ER diagrams with crow's-foot notation, UML class diagrams, network topologies, BPMN workflows, and Kubernetes resource diagrams.

Why does my draw.io file open blank in VS Code?

A blank render usually means the mandatory root cells id="0" and id="1" are missing or not the first two cells in the root element. Add both cells before any content cells and ensure every other cell has a valid parent reference.

Can I edit an existing .drawio file without breaking it?

Yes. Read the file first to learn existing IDs and parent hierarchy, assign new unique IDs, and respect container-relative coordinates for swimlane children. The add-shape.py script inserts a single shape safely without hand-editing raw XML.