Skip to content
Get packs

Draw.io Diagram Generator

Lets an agent create, edit and validate draw.io diagram files (.drawio) with correct XML structure.

Source Download skill
Repository
github/awesome-copilot
Stars
40,703
Licence
MIT
Files
7 files

What it does

When installed, the agent knows how to produce draw.io diagram files for flowcharts, architecture diagrams, sequence diagrams, ER diagrams, UML class diagrams and network diagrams, following the draw.io XML format and a consistent colour palette. It can also run bundled Python helper scripts to validate a diagram's structure and add shapes to an existing file. The result is a file you can open in draw.io or the VS Code draw.io extension.

Great for

  • Developers who want architecture or sequence diagrams generated from a description and saved as editable .drawio files
  • Engineers documenting services, data models or network layouts in a repository
  • Anyone who already uses the draw.io VS Code extension and wants the agent to edit diagrams in place

Skip it if

  • Users who need pixel-precise design work; the agent places shapes by coordinate and layout is approximate
  • Situations where the diagram must be exported or reviewed without checking the output, since generated XML can still need manual tidying (the skill's own claim of 'no manual fixes required' is not independently verified)

Try asking

  • “Create a flowchart of our user signup process and save it to docs/signup.drawio”
  • “Generate a sequence diagram showing how the checkout API calls the payment service”
  • “Make an ER diagram from these database tables and their foreign keys”
  • “Add a new 'Cache' node to docs/arch.drawio and check the file is valid”
Step-by-step guide: how to use Draw.io Diagram GeneratorInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 7 original files, the MIT licence and an attribution note.

    draw-io-diagram-generator.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip draw-io-diagram-generator.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip draw-io-diagram-generator.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Describe the diagram type, the main components and how they connect; the agent asks or infers the rest.
  • Specify an output path such as docs/name.drawio so the file lands where you expect.
  • Open the generated file in draw.io to check layout, since automatic positioning may need adjustment.

What's inside

  • references/drawio-xml-schema.md
  • references/shape-libraries.md
  • references/style-reference.md
  • scripts/add-shape.py
  • scripts/README.md
  • scripts/validate-drawio.py
  • SKILL.md

Redistributed unmodified from github/awesome-copilot under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.