draw-io-diagram-generator

Name: draw-io-diagram-generator
Author: github

2.2kinstalls4.6kforks

How to install draw-io-diagram-generator?

github/awesome-copilot/draw-io-diagram-generator

$npx -y skills add github/awesome-copilot --skill draw-io-diagram-generator

Installs into the current project.

Summary

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 strateg

Files · 1

View on GitHub

SKILL.md

1	# Draw.io Diagram Generator
2
3	This skill enables you to generate, edit, and validate draw.io (`.drawio`) diagram files with
4	correct mxGraph XML structure. All generated files open immediately in the
5	[Draw.io VS Code extension](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio)
6	(`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.
7
8	---
9
10	## 1. When to Use This Skill
11
12	Trigger phrases (load this skill when you see these)
13
14	- "create a diagram", "draw a flowchart", "generate an architecture diagram"
15	- "design a sequence diagram", "make a UML class diagram", "build an ER diagram"
16	- "add a .drawio file", "update the diagram", "visualise the flow"
17	- "document the architecture", "show the data model", "diagram the service interactions"
18	- Any request to produce or modify a `.drawio`, `.drawio.svg`, or `.drawio.png` file
19
20	Supported diagram types
21
22	\| Diagram Type \| Template Available \| Description \|
23	\|---\|---\|---\|
24	\| Flowchart \| `assets/templates/flowchart.drawio` \| Process flows with decisions and branches \|
25	\| System Architecture \| `assets/templates/architecture.drawio` \| Multi-tier / layered service architecture \|
26	\| Sequence Diagram \| `assets/templates/sequence.drawio` \| Actor lifelines and timed message flows \|
27	\| ER Diagram \| `assets/templates/er-diagram.drawio` \| Database tables with relationships \|
28	\| UML Class Diagram \| `assets/templates/uml-class.drawio` \| Classes, interfaces, enums, relationships \|
29	\| Network Topology \| (use shape library) \| Routers, servers, firewalls, subnets \|
30	\| BPMN Workflow \| (use shape library) \| Business process events, tasks, gateways \|
31	\| Mind Map \| (manual) \| Central topic with radiating branches \|
32
33	---
34
35	## 2. Prerequisites
36
37	- If running with VS Code integration enabled, Install the drawio extension: draw.io VS Code extension — `hediet.vscode-drawio` (extension id). Install with:
38	```
39	ext install hediet.vscode-drawio
40	```
41	- Supported file extensions: `.drawio`, `.drawio.svg`, `.drawio.png`
42	- Python 3.8+ (optional) — for the validation and shape-insertion scripts in `scripts/`
43
44	---
45
46	## 3. Step-by-Step Agent Workflow
47
48	Follow these steps in order for every diagram generation task.
49
50	### Step 1 — Understand the Request
51
52	Ask or infer:
53	1. Diagram type — What kind of diagram? (flowchart, architecture, UML, ER, sequence, network...)
54	2. Entities / actors — What are the main components, actors, classes, or tables?
55	3. Relationships — How are they connected? What direction? What cardinality?
56	4. Output path — Where should the `.drawio` file be saved?
57	5. Existing file — Are we creating new or editing an existing file?
58
59	If the request is ambiguous, infer the most sensible diagram type from context (e.g. "show the tables" → ER diagram, "show how the API call flows" → sequence diagram).
60
61	### Step 2 — Select a Template or Start Fresh
62
63	- Use a template when the diagram type matches one in `assets/templates/`. Copy the template structure and replace placeholder values.
64	- Start fresh for novel layouts. Begin with the minimal valid skeleton:
65
66	```xml
67	<!-- Set modified="" to the current ISO 8601 timestamp when generating a new file -->
68	<mxfile host="Electron" modified="" version="26.0.0">
69	<diagram id="page-1" name="Page-1">
70	<mxGraphModel dx="1422" dy="762" grid="1" gridSize="10" guides="1"
71	tooltips="1" connect="1" arrows="1" fold="1"
72	page="1" pageScale="1" pageWidth="1169" pageHeight="827"
73	math="0" shadow="0">
74	<root>
75	<mxCell id="0" />
76	<mxCell id="1" parent="0" />
77	<!-- Your cells go here -->
78	</root>
79	</mxGraphModel>
80	</diagram>
81	</mxfile>
82	```
83
84	> Rule: ids `0` and `1` are ALWAYS required and must be the first two cells. Never reuse them.
85
86	### Step 3 — Plan the Layout
87
88	Before generating XML, sketch the logical placement:
89	- Organise into rows or tiers (use swimlanes for layers)
90	- Horizontal spacing: 40–60px between same-row shapes
91	- Vertical spacing: 80–120px between tier rows
92	- Standard shape size: `120x60` px for process boxes, `160x80` px for swimlanes
93	- Default canvas: A4 landscape = `1169 x 827` px
94
95	### Step 4 — Generate the mxGraph XML
96
97	Vertex cell (every shape):
98	```xml
99	<mxCell id="unique-id" value="Label"
100	style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;"
101	vertex="1" parent="1">
102	<mxGeometry x="100" y="100" width="120" height="60" as="geometry" />
103	</mx

People who liked this also viewed

6 picks

Type

draw-io-diagram-generator

2.2kinstalls4.6kforks

View on GitHub

How to install draw-io-diagram-generator?

github/awesome-copilot/draw-io-diagram-generator

$npx -y skills add github/awesome-copilot --skill draw-io-diagram-generator

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Draw.io Diagram Generator
2
3	This skill enables you to generate, edit, and validate draw.io (`.drawio`) diagram files with
4	correct mxGraph XML structure. All generated files open immediately in the
5	[Draw.io VS Code extension](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio)
6	(`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.
7
8	---
9
10	## 1. When to Use This Skill
11
12	Trigger phrases (load this skill when you see these)
13
14	- "create a diagram", "draw a flowchart", "generate an architecture diagram"
15	- "design a sequence diagram", "make a UML class diagram", "build an ER diagram"
16	- "add a .drawio file", "update the diagram", "visualise the flow"
17	- "document the architecture", "show the data model", "diagram the service interactions"
18	- Any request to produce or modify a `.drawio`, `.drawio.svg`, or `.drawio.png` file
19
20	Supported diagram types
21
22	\| Diagram Type \| Template Available \| Description \|
23	\|---\|---\|---\|
24	\| Flowchart \| `assets/templates/flowchart.drawio` \| Process flows with decisions and branches \|
25	\| System Architecture \| `assets/templates/architecture.drawio` \| Multi-tier / layered service architecture \|
26	\| Sequence Diagram \| `assets/templates/sequence.drawio` \| Actor lifelines and timed message flows \|
27	\| ER Diagram \| `assets/templates/er-diagram.drawio` \| Database tables with relationships \|
28	\| UML Class Diagram \| `assets/templates/uml-class.drawio` \| Classes, interfaces, enums, relationships \|
29	\| Network Topology \| (use shape library) \| Routers, servers, firewalls, subnets \|
30	\| BPMN Workflow \| (use shape library) \| Business process events, tasks, gateways \|
31	\| Mind Map \| (manual) \| Central topic with radiating branches \|
32
33	---
34
35	## 2. Prerequisites
36
37	- If running with VS Code integration enabled, Install the drawio extension: draw.io VS Code extension — `hediet.vscode-drawio` (extension id). Install with:
38	```
39	ext install hediet.vscode-drawio
40	```
41	- Supported file extensions: `.drawio`, `.drawio.svg`, `.drawio.png`
42	- Python 3.8+ (optional) — for the validation and shape-insertion scripts in `scripts/`
43
44	---
45
46	## 3. Step-by-Step Agent Workflow
47
48	Follow these steps in order for every diagram generation task.
49
50	### Step 1 — Understand the Request
51
52	Ask or infer:
53	1. Diagram type — What kind of diagram? (flowchart, architecture, UML, ER, sequence, network...)
54	2. Entities / actors — What are the main components, actors, classes, or tables?
55	3. Relationships — How are they connected? What direction? What cardinality?
56	4. Output path — Where should the `.drawio` file be saved?
57	5. Existing file — Are we creating new or editing an existing file?
58
59	If the request is ambiguous, infer the most sensible diagram type from context (e.g. "show the tables" → ER diagram, "show how the API call flows" → sequence diagram).
60
61	### Step 2 — Select a Template or Start Fresh
62
63	- Use a template when the diagram type matches one in `assets/templates/`. Copy the template structure and replace placeholder values.
64	- Start fresh for novel layouts. Begin with the minimal valid skeleton:
65
66	```xml
67	<!-- Set modified="" to the current ISO 8601 timestamp when generating a new file -->
68	<mxfile host="Electron" modified="" version="26.0.0">
69	<diagram id="page-1" name="Page-1">
70	<mxGraphModel dx="1422" dy="762" grid="1" gridSize="10" guides="1"
71	tooltips="1" connect="1" arrows="1" fold="1"
72	page="1" pageScale="1" pageWidth="1169" pageHeight="827"
73	math="0" shadow="0">
74	<root>
75	<mxCell id="0" />
76	<mxCell id="1" parent="0" />
77	<!-- Your cells go here -->
78	</root>
79	</mxGraphModel>
80	</diagram>
81	</mxfile>
82	```
83
84	> Rule: ids `0` and `1` are ALWAYS required and must be the first two cells. Never reuse them.
85
86	### Step 3 — Plan the Layout
87
88	Before generating XML, sketch the logical placement:
89	- Organise into rows or tiers (use swimlanes for layers)
90	- Horizontal spacing: 40–60px between same-row shapes
91	- Vertical spacing: 80–120px between tier rows
92	- Standard shape size: `120x60` px for process boxes, `160x80` px for swimlanes
93	- Default canvas: A4 landscape = `1169 x 827` px
94
95	### Step 4 — Generate the mxGraph XML
96
97	Vertex cell (every shape):
98	```xml
99	<mxCell id="unique-id" value="Label"
100	style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;"
101	vertex="1" parent="1">
102	<mxGeometry x="100" y="100" width="120" height="60" as="geometry" />
103	</mx

People who liked this also viewed

6 picks

Type