drawio-logical-diagrams

Name: drawio-logical-diagrams
Author: giuseppe-trisciuoglio

1.8kinstalls36forks

How to install drawio-logical-diagrams?

giuseppe-trisciuoglio/developer-kit/drawio-logical-diagrams

$npx -y skills add giuseppe-trisciuoglio/developer-kit --skill drawio-logical-diagrams

Installs into the current project.

Summary

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 st

Files · 1

View on GitHub

SKILL.md

1	# Draw.io Logical Diagrams Creation
2
3	## Overview
4
5	Create professional logical diagrams in draw.io's native XML format for logical flow diagrams, system architecture visualizations, and abstract process representations using generic shapes and symbols.
6
7	## When to Use
8
9	- Creating logical flow diagrams showing data flow between system components
10	- Designing logical architecture diagrams (abstract system structure)
11	- Building BPMN process diagrams for business processes
12	- Drawing UML diagrams (class, sequence, activity, state)
13	- Creating data flow diagrams (DFD) for system analysis
14	- Making decision flowcharts with branching logic
15	- Visualizing system interactions and sequences
16	- Documenting logical system design without cloud specifics
17
18	Do NOT use for: AWS/Azure/GCP architecture diagrams (use `aws-drawio-architecture-diagrams`).
19
20	## Instructions
21
22	### Creating a Logical Diagram
23
24	1. Analyze the request: Understand the system/process to diagram
25	2. Choose diagram type: Flowchart, architecture, BPMN, UML, DFD, etc.
26	3. Identify elements: Determine actors, processes, data stores, connectors
27	4. Draft XML structure: Create the mxGraphModel with proper root cells
28	5. Add shapes: Create mxCell elements with appropriate styles
29	6. Add connectors: Link elements with edge elements
30	7. Validate XML: Verify XML is well-formed and all IDs are unique (see validation checklist below)
31	8. Output: Write the .drawio file for the user
32
33	### XML Validation Checklist
34
35	Before outputting the file, verify:
36	- [ ] All tags are properly closed (no unclosed `<mxCell>`, `</mxGeometry>`, etc.)
37	- [ ] All cell IDs are unique (0 and 1 are reserved root cells, use sequential integers starting from 2)
38	- [ ] All `source` and `target` attributes reference existing cell IDs
39	- [ ] All `parent` attributes reference existing cell IDs
40	- [ ] All coordinates (x, y, width, height) are positive numbers
41	- [ ] Special characters are escaped (`<` → `<`, `>` → `>`, `&` → `&`)
42	- [ ] Multi-line labels use ` ` or `<br>` with `html=1` in style
43
44	### Key XML Components
45
46	\| Component \| Description \|
47	\|-----------\|-------------\|
48	\| `mxfile` \| Root element with host and version \|
49	\| `diagram` \| Contains the diagram definition \|
50	\| `mxGraphModel` \| Canvas settings (grid, page size) \|
51	\| `root` \| Container for all cells (must include id="0" and id="1") \|
52	\| `mxCell` \| Individual shapes (vertices) or connectors (edges) \|
53
54	## Draw.io XML Structure
55
56	```xml
57	<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
58	<diagram id="logical-flow-1" name="Logical Flow">
59	<mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1"
60	tooltips="1" connect="1" arrows="1" fold="1" page="1"
61	pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
62	<root>
63	<mxCell id="0" />
64	<mxCell id="1" parent="0" />
65	<!-- Shapes and connectors here -->
66	</root>
67	</mxGraphModel>
68	</diagram>
69	</mxfile>
70	```
71
72	Key rules:
73	- IDs "0" and "1" are reserved for root cells
74	- Use sequential integer IDs starting from "2"
75	- Use landscape orientation for architecture diagrams
76	- All coordinates must be positive and aligned to grid (multiples of 10)
77
78	## Generic Shapes and Styles
79
80	### Basic Shape Types
81
82	\| Shape \| Style \|
83	\|-------\|-------\|
84	\| Rectangle \| `rounded=0;whiteSpace=wrap;html=1;` \|
85	\| Rounded Rectangle \| `rounded=1;whiteSpace=wrap;html=1;` \|
86	\| Ellipse/Circle \| `ellipse;whiteSpace=wrap;html=1;` \|
87	\| Diamond \| `rhombus;whiteSpace=wrap;html=1;` \|
88	\| Cylinder \| `shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;` \|
89	\| Hexagon \| `shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;` \|
90	\| Parallelogram \| `shape=ext;double=1;rounded=0;whiteSpace=wrap;html=1;` \|
91
92	### Standard Color Palette
93
94	\| Element Type \| Fill Color \| Border Color \| Usage \|
95	\|--------------\|------------\|--------------\|-------\|
96	\| Process \| `#dae8fc` \| `#6c8ebf` \| Operations/actions \|
97	\| Decision \| `#fff2cc` \| `#d6b656` \| Conditional branches \|
98	\| Start/End \| `#d5e8d4` \| `#82b366` \| Terminal states \|
99	\| Data/Store \| `#e1f5fe` \| `#0277bd` \| Databases/files \|
100	\| Entity \| `#f3e5f5` \| `#7b1fa2` \| External systems \|
101	\| Error/Stop \| `#f8cecc` \| `#b85450` \| Error states \|
102	\| Actor/User \| `#ffe0b2` \| `#f57c00` \| Users/actors \|
103	\| Cont

People who liked this also viewed

6 picks

Type

drawio-logical-diagrams

1.8kinstalls36forks

View on GitHub

How to install drawio-logical-diagrams?

giuseppe-trisciuoglio/developer-kit/drawio-logical-diagrams

$npx -y skills add giuseppe-trisciuoglio/developer-kit --skill drawio-logical-diagrams

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Draw.io Logical Diagrams Creation
2
3	## Overview
4
5	Create professional logical diagrams in draw.io's native XML format for logical flow diagrams, system architecture visualizations, and abstract process representations using generic shapes and symbols.
6
7	## When to Use
8
9	- Creating logical flow diagrams showing data flow between system components
10	- Designing logical architecture diagrams (abstract system structure)
11	- Building BPMN process diagrams for business processes
12	- Drawing UML diagrams (class, sequence, activity, state)
13	- Creating data flow diagrams (DFD) for system analysis
14	- Making decision flowcharts with branching logic
15	- Visualizing system interactions and sequences
16	- Documenting logical system design without cloud specifics
17
18	Do NOT use for: AWS/Azure/GCP architecture diagrams (use `aws-drawio-architecture-diagrams`).
19
20	## Instructions
21
22	### Creating a Logical Diagram
23
24	1. Analyze the request: Understand the system/process to diagram
25	2. Choose diagram type: Flowchart, architecture, BPMN, UML, DFD, etc.
26	3. Identify elements: Determine actors, processes, data stores, connectors
27	4. Draft XML structure: Create the mxGraphModel with proper root cells
28	5. Add shapes: Create mxCell elements with appropriate styles
29	6. Add connectors: Link elements with edge elements
30	7. Validate XML: Verify XML is well-formed and all IDs are unique (see validation checklist below)
31	8. Output: Write the .drawio file for the user
32
33	### XML Validation Checklist
34
35	Before outputting the file, verify:
36	- [ ] All tags are properly closed (no unclosed `<mxCell>`, `</mxGeometry>`, etc.)
37	- [ ] All cell IDs are unique (0 and 1 are reserved root cells, use sequential integers starting from 2)
38	- [ ] All `source` and `target` attributes reference existing cell IDs
39	- [ ] All `parent` attributes reference existing cell IDs
40	- [ ] All coordinates (x, y, width, height) are positive numbers
41	- [ ] Special characters are escaped (`<` → `<`, `>` → `>`, `&` → `&`)
42	- [ ] Multi-line labels use ` ` or `<br>` with `html=1` in style
43
44	### Key XML Components
45
46	\| Component \| Description \|
47	\|-----------\|-------------\|
48	\| `mxfile` \| Root element with host and version \|
49	\| `diagram` \| Contains the diagram definition \|
50	\| `mxGraphModel` \| Canvas settings (grid, page size) \|
51	\| `root` \| Container for all cells (must include id="0" and id="1") \|
52	\| `mxCell` \| Individual shapes (vertices) or connectors (edges) \|
53
54	## Draw.io XML Structure
55
56	```xml
57	<mxfile host="app.diagrams.net" agent="Claude" version="24.7.17">
58	<diagram id="logical-flow-1" name="Logical Flow">
59	<mxGraphModel dx="1200" dy="800" grid="1" gridSize="10" guides="1"
60	tooltips="1" connect="1" arrows="1" fold="1" page="1"
61	pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
62	<root>
63	<mxCell id="0" />
64	<mxCell id="1" parent="0" />
65	<!-- Shapes and connectors here -->
66	</root>
67	</mxGraphModel>
68	</diagram>
69	</mxfile>
70	```
71
72	Key rules:
73	- IDs "0" and "1" are reserved for root cells
74	- Use sequential integer IDs starting from "2"
75	- Use landscape orientation for architecture diagrams
76	- All coordinates must be positive and aligned to grid (multiples of 10)
77
78	## Generic Shapes and Styles
79
80	### Basic Shape Types
81
82	\| Shape \| Style \|
83	\|-------\|-------\|
84	\| Rectangle \| `rounded=0;whiteSpace=wrap;html=1;` \|
85	\| Rounded Rectangle \| `rounded=1;whiteSpace=wrap;html=1;` \|
86	\| Ellipse/Circle \| `ellipse;whiteSpace=wrap;html=1;` \|
87	\| Diamond \| `rhombus;whiteSpace=wrap;html=1;` \|
88	\| Cylinder \| `shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;` \|
89	\| Hexagon \| `shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;` \|
90	\| Parallelogram \| `shape=ext;double=1;rounded=0;whiteSpace=wrap;html=1;` \|
91
92	### Standard Color Palette
93
94	\| Element Type \| Fill Color \| Border Color \| Usage \|
95	\|--------------\|------------\|--------------\|-------\|
96	\| Process \| `#dae8fc` \| `#6c8ebf` \| Operations/actions \|
97	\| Decision \| `#fff2cc` \| `#d6b656` \| Conditional branches \|
98	\| Start/End \| `#d5e8d4` \| `#82b366` \| Terminal states \|
99	\| Data/Store \| `#e1f5fe` \| `#0277bd` \| Databases/files \|
100	\| Entity \| `#f3e5f5` \| `#7b1fa2` \| External systems \|
101	\| Error/Stop \| `#f8cecc` \| `#b85450` \| Error states \|
102	\| Actor/User \| `#ffe0b2` \| `#f57c00` \| Users/actors \|
103	\| Cont

People who liked this also viewed

6 picks

Type