draw-io-diagram-generator
Use when creating, editing, or generating draw.io diagram files (.drawio, .drawio.svg, .drawio.png). Covers mxGraph XML authoring, shape libraries, style strings, flowcharts, system architecture, sequence diagrams, ER diagrams, UML class diagrams, network topology, layout strategy, the hediet.vscode-drawio VS Code extension, and the full agent workflow from request to a ready-to-open file.
Profile →npx skills add github/awesome-copilot --skill draw-io-diagram-generator --agent copilot
Same command for any agent — swap --agent for claude-code, codex, cursor.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio) (`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 Type | Template Available | Description | |---|---|---| | Flowchart | `assets/templates/flowchart.drawio` | Process flows with decisions and branches | | System Architecture | `assets/templates/architecture.drawio` | Multi-tier / lay
- 1. When to Use This Skill
- 2. Prerequisites
- 3. Step-by-Step Agent Workflow
- Step 1 — Understand the Request
- Step 2 — Select a Template or Start Fresh
- Step 3 — Plan the Layout
- Step 4 — Generate the mxGraph XML
- Step 5 — Apply Correct Styles
- Step 6 — Save and Validate
- 4. Diagram-Type Recipes
- Flowchart
- Architecture Diagram (3-tier)
- Sequence Diagram
- ER Diagram
python .github/skills/draw-io-diagram-generator/scripts/validate-drawio.py <path-to-file.drawio> python .github/skills/draw-io-diagram-generator/scripts/add-shape.py docs/arch.drawio "New Service" 700 380 python .github/skills/draw-io-diagram-generator/scripts/validate-drawio.py <file.drawio>
What does the draw-io-diagram-generator skill do?
Use when creating, editing, or generating draw.io diagram files (.drawio, .drawio.svg, .drawio.png). Covers mxGraph XML authoring, shape libraries, style strings, flowcharts, system architecture, sequence diagrams, ER diagrams, UML class diagrams, network topology, layout strategy, the hediet.vscode-drawio VS Code extension, and the full agent workflow from request to a ready-to-open file.
How do I install it?
Run `npx skills add github/awesome-copilot --skill draw-io-diagram-generator --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From github/awesome-copilot, a repository with 37,432 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.