Agent skill · design visual · github
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.
Why this skill is useful
Provides detailed workflows and templates for generating various types of draw.io diagrams, which the AI wouldn't reliably generate on its own.
What it needs
Requires draw.io, python installed locally. About 10k tokens when loaded. Last updated 2026-08-07. 37,534 stars on the source repository.
What this skill does
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 (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 / layered service architecture Sequence Diagram assets/templates/sequence.drawio Actor lifelines and timed message flows ER Diagram assets/templates/er-diagram.drawio Database tables with relationships UML Class Diagram assets/templates/uml-class.drawio Classes, interfaces, enums, relationships Network Topology (use shape library) Routers, servers, firewalls, subnets BPMN Workflow (use shape library) Business process events, tasks, gateways Mind Map (manual) Central topic with radiating branches --- 2. Prerequisites If running with VS Code integration enabled, Install the drawio extension: draw.io VS Code extension — hediet.vscode-drawio (extension id). Install with: Supported file extensions: .drawio, .drawio.svg, .drawio.png Python 3.8+ (optional) — for the validation and shape-insertion scripts in scripts/ --- 3. Step-by-Step Agent Workflow Follow these steps in order for every diagram generation task. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills github/draw-io-diagram-generator