draw-io-diagram-generatorby GitHub

Draw.io Diagram Generator Skill.

A Claude Code and Codex skill for diagrams and charts: creates and edits draw.io diagram files (.drawio, .drawio.svg, .drawio.png).

Diagrams & Data Visualization
Diagram

Download OpenDesign View usage guide

github/awesome-copilot · skills/draw-io-diagram-generator/SKILL.mdSKILL.md

--- name: draw-io-diagram-generator description: 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. --- ## 1. When to Use This Skill ## 2. Prerequisites ## 3. Step-by-Step Agent Workflow ## 4. Diagram-Type Recipes ## 5. Multi-Page Diagrams ## 6. Editing Existing Diagrams

Front matter and section headings read from the upstream file on 2026-09-14 · 19,536 characters in full

01 What it does

What the draw-io-diagram-generator Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

A skill for creating, editing and validating draw.io diagram files (.drawio, .drawio.svg, .drawio.png) by generating correct mxGraph XML. It handles flowcharts, system architecture, sequence diagrams, ER diagrams and UML class diagrams through templates in assets/templates/, while network topology, BPMN and mind maps fall back to shape libraries or manual work.

The agent gets a six-step workflow, a semantic color palette with ready-to-use style strings, a pre-delivery validation checklist and optional Python scripts (validate-drawio.py, add-shape.py). It is aimed at agents working in a repository where diagrams sit alongside the code they document, and generated files are meant to open immediately in the hediet.vscode-drawio VS Code extension.

What it produces

The .drawio file itself, written to the path you requested.
A one-sentence summary of what the diagram shows.
Validation status, reporting whether the validator script was run and passed.
Editing instructions when you are likely to customise the diagram: click a shape to select it, double-click to edit the label, drag to reposition.

See the example prompt ↗

How It Works

01
Pin Down the Request
The workflow starts by establishing diagram type, entities or actors, relationships, output path and whether the file is new or an edit.
02
Reuse a Template or the Minimal Skeleton
When the diagram type matches one under assets/templates/, copy that structure and swap the placeholder values; for novel layouts start from the minimal valid mxfile skeleton with the two root cells.
03
Plan the Layout Before Writing XML
Sketch rows or tiers first, then space shapes on the grid — 40-60px horizontally between same-row shapes, 80-120px between tier rows, on a default A4 landscape canvas of 1169 x 827 px.
04
Generate the mxGraph XML
Write vertex and edge cells with unique ids and matching parent references, and escape XML special characters in labels so the file stays well-formed.
05
Apply Styles from the Palette
Style strings come from a fixed semantic palette — primary/info #dae8fc with #6c8ebf, warning/decision #fff2cc with #d6b656, error/end #f8cecc with #b85450 — so the same purpose keeps the same colour across a project.
06
Save, Validate, Hand Over
Write the file to the requested path with a .drawio extension, optionally run the validator, then tell the user how to open it and summarise what is in the diagram.

02 Find your fit

When to Use the draw-io-diagram-generator Skill

Use the draw-io-diagram-generator skill in Claude Code or Codex when the job is diagrams and charts of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

The request is to produce or modify a .drawio, .drawio.svg or .drawio.png file.
You want a file that opens immediately with no manual fixes in the draw.io VS Code extension.
Someone asks to add a .drawio file, update an existing diagram or visualise a flow.
The system is complex enough to deserve several pages in a single file.
You need to insert a shape into an existing file without hand-editing raw XML.

Know the Boundaries

Network topology and BPMN diagrams have no bundled template — the file points at the shape library for routers, servers, firewalls and subnets instead.
Mind maps are listed as manual work: a central topic with radiating branches, with no template to copy.
A diagram whose mxGraphModel is base64-encoded shows up as compressed and is not handled as-is; it has to be re-exported as uncompressed XML from the draw.io web app.

What to Provide

The diagram typeName the kind of diagram wanted — flowchart, architecture, UML, ER, sequence, network — or let the skill infer it from context.
Entities, actors, classes or tablesState the main components the diagram should contain, since these become the vertex cells.
Relationships, direction and cardinalityDescribe how the components connect, in which direction, and with what cardinality so the edge styles and crow's foot arrows can be chosen correctly.
Output pathSay where the .drawio file should be saved; diagrams are meant to sit next to the code they document.
Whether the file already existsCreating new and editing existing are different paths — an edit starts by reading the current cells, positions and hierarchy.

03 Inside the skill

Rules the draw-io-diagram-generator Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Root Cells 0 and 1 Are non-negotiable
Ids 0 and 1 are always required and must be the first two cells in a diagram, and they must never be reused for anything else.
One Unique Id per Cell
Every cell id has to be globally unique within the file, so new shapes added to an existing diagram must not collide with ids already in use.
Every Vertex Carries Geometry
A vertex cell is not valid without a child mxGeometry holding x, y, width and height with as="geometry".
Edges Bind to Real Ids
An edge needs source and target attributes matching existing vertex ids.
Html=1 for HTML Labels
Any label containing HTML tags (b, i, br) requires html=1 in the cell style, otherwise the tags show up escaped on the diagram.
Snap to the 10px Grid
All coordinates should be divisible by 10 so shapes align cleanly.
Titles Every Page, Always
Each page gets a title text cell at the top using the text style with fontSize=18 and fontStyle=1 for bold.
Name Files in kebab-case
Diagram files follow kebab-case naming such as order-service-flow.drawio or database-schema.drawio, and live alongside the code they document in docs/ or architecture/.

04 Put it to work

Install draw-io-diagram-generator in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add draw-io-diagram-generator to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/github/awesome-copilot --skill draw-io-diagram-generator

Generic skills CLI form for skills/draw-io-diagram-generator/SKILL.md; the repository may document its own path.

Give the Skill a First Diagrams and Charts Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Create a .drawio sequence diagram for [the checkout flow]. [Client] should send a synchronous POST /orders message to [API Server], which returns 201 Created — include the lifelines and activation boxes. Save it to [docs/checkout-flow.drawio] with a title cell at the top of the page.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

The file starts with an mxfile root element.
All cell id values are unique within each diagram.
Every vertex cell has vertex="1" and a child mxGeometry with as="geometry".
Every cell except id=0 has a parent pointing at an existing id.
The XML is well-formed — no unclosed tags and no unescaped ampersands or angle brackets in attribute values.
Run the automated validator against the finished file.

In OpenDesign import draw-io-diagram-generator from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: GitHub
Repository: github.com/github/awesome-copilot Branch main
Skill file: skills/draw-io-diagram-generator/SKILL.md Content checksum recorded at verification; commit 1899b18
License: MIT From LICENSE.
Repository stars: 38,981 GitHub snapshot taken 2026-09-14 for the whole github/awesome-copilot repository, which contains 6 skills in this catalog. Not a rating or usage count for draw-io-diagram-generator.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

1. When to Use This SkillTrigger phrases to load it, plus a table of eight diagram types and their templates.
2. PrerequisitesInstall hediet.vscode-drawio, supported extensions, optional Python 3.8+ for scripts.
3. Step-by-Step Agent WorkflowSix ordered steps: understand, pick template, plan layout, generate XML, style, validate.
4. Diagram-Type RecipesXML snippets and style strings for flowchart, architecture, sequence, ER and UML class.
5. Multi-Page DiagramsSeveral diagram elements in one mxfile; each page has its own cell id namespace.
6. Editing Existing DiagramsRead first, find the page, assign non-colliding ids, respect containers, verify edges.
7. Best PracticesGrid alignment, concise labels, palette consistency, page size, kebab-case naming and placement.

The Skill's Own Description

“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.”

Front-matter description from SKILL.md. The full file is about 19,536 characters. Read the full file on GitHub.

Draw.io Diagram Generator

Run draw-io-diagram-generator on a Real Diagrams and Charts Task.

Download OpenDesign, import draw-io-diagram-generator from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills

Terminal

npx skills add https://github.com/github/awesome-copilot --skill draw-io-diagram-generator

What the draw-io-diagram-generator Skill Does in Claude Code and Codex

In the Skill's Own Terms

How It Works

When to Use the draw-io-diagram-generator Skill

Good Fit

Know the Boundaries

What to Provide

Rules the draw-io-diagram-generator Skill Gives Claude Code and Codex

Root Cells 0 and 1 Are non-negotiable

One Unique Id per Cell

Every Vertex Carries Geometry

Edges Bind to Real Ids

Html=1 for HTML Labels

Snap to the 10px Grid

Titles Every Page, Always

Name Files in kebab-case