draw-io-diagram-generator

Solid

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.

AI & Automation 34,158 stars 4179 forks Updated yesterday MIT

Install

View on GitHub

Quality Score: 93/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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 / 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, inter...

Details

Author
github
Repository
github/awesome-copilot
Created
11 months ago
Last Updated
yesterday
Language
Python
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Data & Documents Listed

draw-io

Create professional Draw.io (diagrams.net) XML diagrams for architecture, network flows, and system designs. Use when the user asks to create diagrams, architecture diagrams, flow charts, network diagrams, system diagrams, or mentions Draw.io/diagrams.net. Supports AWS/GCP icons, grouping, and custom styling.

0 Updated 3 days ago
alycd
Data & Documents Listed

drawio

Always use when user asks to create, generate, draw, or design a diagram, flowchart, architecture diagram, ER diagram, sequence diagram, class diagram, network diagram, mockup, wireframe, or UI sketch, or mentions draw.io, drawio, drawoi, .drawio files, or diagram export to PNG/SVG/PDF.

0 Updated today
matiaspakua
AI & Automation Listed

excalidraw-diagram-generator

Generate .excalidraw diagrams from natural language. Use when creating flowcharts, mind maps, system architecture diagrams, sequence diagrams, ER diagrams, network diagrams, or any visual process visualization.

1 Updated today
bg-szy
AI & Automation Solid

excalidraw-diagram-generator

Generate Excalidraw diagrams from natural language descriptions. Use when asked to "create a diagram", "make a flowchart", "visualize a process", "draw a system architecture", "create a mind map", or "generate an Excalidraw file". Supports flowcharts, relationship diagrams, mind maps, and system architecture diagrams. Outputs .excalidraw JSON files that can be opened directly in Excalidraw.

34,158 Updated yesterday
github
AI & Automation Solid

drawio-logical-diagrams

Creates professional logical flow diagrams and logical system architecture diagrams using draw.io XML format (.drawio files). Use when creating: (1) logical flow diagrams showing data/process flow between system components, (2) logical architecture diagrams representing system structure without cloud provider specifics, (3) BPMN process diagrams, (4) UML diagrams (class, sequence, activity), (5) data flow diagrams (DFD), (6) decision flowcharts, or (7) system interaction diagrams. This skill focuses on generic/abstract representations, not AWS/Azure-specific architectures (use aws-drawio-architecture-diagrams for cloud diagrams).

261 Updated 1 weeks ago
giuseppe-trisciuoglio