102.7K+Download
Skip to the usage guide
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 OpenDesignView 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

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

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

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

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

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

  6. 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 need an editable diagram for the draw.io VS Code extension, web app or desktop app, with validation before handoff.
  • 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.

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

  2. One Unique Id per Cell

    Cell IDs must be unique within each diagram page. Multi-page files have independent namespaces, so the same ID may appear on different pages.

  3. Every Vertex Carries Geometry

    A vertex cell is not valid without a child mxGeometry holding x, y, width and height with as="geometry".

  4. Edges Bind to Real Ids

    Normal edges reference existing source and target vertices. Floating edges such as sequence lifelines instead use sourcePoint and targetPoint within mxGeometry.

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

  6. Snap to the 10px Grid

    All coordinates should be divisible by 10 so shapes align cleanly.

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

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

Editorial starter example based on the source workflow; not a recorded run.

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 check your installed version’s skill list and supported tools. If this skill is absent, consult the current import guide and the upstream setup instructions. The source review is not a live compatibility test.

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

Start with the example task above, supply the listed inputs and check the required tools. Review the output against the checklist before using it in a project.

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