drawio

Name: drawio
Author: AdamBien

40stars10forks

How to install drawio?

adambien/airails/drawio

$npx -y skills add AdamBien/airails --skill drawio

Installs into the current project.

Summary

Create draw.io overview diagrams with consistent visual style. Use when asked to create, generate, or edit draw.io diagrams, architecture diagrams, component diagrams, or visual overviews of systems and modules. Triggers on "draw.io", "drawio", "create a diagram", "architecture d

Files · 1

View on GitHub

SKILL.md

1	# Draw.io Overview Diagrams
2
3	Generate valid draw.io XML and save as `<name>.drawio` using the Write tool.
4
5	## Lines
6
7	- rounded routing: `edgeStyle=orthogonalEdgeStyle;rounded=1;`
8	- black stroke: `strokeColor=#000000;`
9	- arrow at target: `endArrow=block;endFill=1;`
10	- label without shadow: `shadow=0;` on the label cell
11	- when an edge crosses container boundaries (source or target is nested in a container), pin explicit `exitX`/`exitY` on the source and `entryX`/`entryY` on the target so the orthogonal router does not take ugly paths; when multiple edges share a target, give each a distinct entry point to prevent overlap
12
13	## Style
14
15	- all nodes: `rounded=1;whiteSpace=wrap;html=1;shadow=1;`
16	- corner radius: `arcSize=10;`
17	- font: `fontColor=#000000;fontSize=13;fontStyle=0;`
18
19	## BCE Shape Mapping
20
21	\| Element \| Shape \| Fill \| Border \|
22	\|---\|---\|---\|---\|
23	\| Business Component (BC) \| rounded rectangle \| `#dae8fc` (light blue) \| `#6c8ebf` \|
24	\| Subsystem container \| container with title bar \| `#f5f5f5` (light gray) \| `#666666` \|
25	\| External service \| rounded rectangle, dashed \| `#fff2cc` (light yellow) \| `#d6b656` \|
26	\| Boundary layer \| rounded rectangle \| `#d5e8d4` (light green) \| `#82b366` \|
27	\| Control layer \| rounded rectangle \| `#e1d5e7` (light purple) \| `#9673a6` \|
28	\| Entity layer \| rounded rectangle \| `#fff2cc` (light yellow) \| `#d6b656` \|
29
30	## Color Palette
31
32	- BC blue: fill `#dae8fc`, border `#6c8ebf`
33	- Subsystem gray: fill `#f5f5f5`, border `#666666`
34	- External yellow: fill `#fff2cc`, border `#d6b656`
35	- Boundary green: fill `#d5e8d4`, border `#82b366`
36	- Control purple: fill `#e1d5e7`, border `#9673a6`
37	- Entity yellow: fill `#fff2cc`, border `#d6b656`
38
39	## BCE Robustness Icons (built-in)
40
41	Drawio ships with the Jacobson BCE icons. Use these — never reconstruct them from primitives (lines + ellipses + triangles).
42
43	- Boundary Object: `shape=umlBoundary;whiteSpace=wrap;html=1;`
44	- Control Object: `ellipse;shape=umlControl;whiteSpace=wrap;html=1;`
45	- Entity Object: `ellipse;shape=umlEntity;whiteSpace=wrap;html=1;`
46
47	Color them by adding `fillColor=#ffffff;strokeColor=<layer-border>;`. Typical icon size: `width=30;height=32`.
48
49	## Content
50
51	- visualize only high-level concepts and modules
52	- show dependencies between components as directed arrows
53	- omit implementation details, classes, and methods
54	- group related components visually
55	- limit diagram to essential relationships
56
57	## Layout
58
59	- arrange components in logical flow (top-to-bottom or left-to-right)
60	- consistent spacing: 40px between nodes, 20px padding inside containers
61	- avoid crossing lines where possible
62	- use container shapes (`container=1;`) for subsystem grouping
63	- default node size: `width=160;height=60;`
64
65	## Labels
66
67	- use short, descriptive names
68	- avoid technical jargon unless domain-specific
69	- label arrows only when relationship type is ambiguous
70	- black font color for all labels
71	- do not use italic font
72	- connection labels must be without shadow
73	- connection labels must use `fontSize=16;`
74
75	## XML Structure
76
77	Minimal skeleton — every `.drawio` file must follow this hierarchy:
78
79	```xml
80	<mxfile>
81	<diagram name="Overview" id="diag1">
82	<mxGraphModel dx="1024" dy="768" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
83	<root>
84	<mxCell id="0"/>
85	<mxCell id="1" parent="0"/>
86	<!-- nodes and edges here, parent="1" -->
87	</root>
88	</mxGraphModel>
89	</diagram>
90	</mxfile>
91	```
92
93	## Example — Minimal 2-Node Diagram
94
95	```xml
96	<mxfile>
97	<diagram name="Overview" id="d1">
98	<mxGraphModel dx="1024" dy="768" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
99	<root>
100	<mxCell id="0"/>
101	<mxCell id="1" parent="0"/>
102	<mxCell id="2" value="Orders" style="rounded=1;whiteSpace=wrap;html=1;shadow=1;arcSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#000000;fontSize=13;fontStyle=0;" vertex="1" parent="1">
103	<mxGeometry x="100" y="200" width="160" height="60" as="geometry"/>
104	</mxCell>
105	<mxCell id="3" value="Payments" style="rounded=1;whiteSpace=wrap;html=1;shadow=1;arcSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#000000;fontSize=13;fontStyle=0;" vertex="1" parent="1">
106	<mxGeometry x="380" y="200" width="160" height="60" as="geometry"/>
107	</mxCell>
108	<mxCell id="4" value="charges" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogo

People who liked this also viewed

6 picks

Type

drawio

40stars10forks

View on GitHub

How to install drawio?

adambien/airails/drawio

$npx -y skills add AdamBien/airails --skill drawio

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Draw.io Overview Diagrams
2
3	Generate valid draw.io XML and save as `<name>.drawio` using the Write tool.
4
5	## Lines
6
7	- rounded routing: `edgeStyle=orthogonalEdgeStyle;rounded=1;`
8	- black stroke: `strokeColor=#000000;`
9	- arrow at target: `endArrow=block;endFill=1;`
10	- label without shadow: `shadow=0;` on the label cell
11	- when an edge crosses container boundaries (source or target is nested in a container), pin explicit `exitX`/`exitY` on the source and `entryX`/`entryY` on the target so the orthogonal router does not take ugly paths; when multiple edges share a target, give each a distinct entry point to prevent overlap
12
13	## Style
14
15	- all nodes: `rounded=1;whiteSpace=wrap;html=1;shadow=1;`
16	- corner radius: `arcSize=10;`
17	- font: `fontColor=#000000;fontSize=13;fontStyle=0;`
18
19	## BCE Shape Mapping
20
21	\| Element \| Shape \| Fill \| Border \|
22	\|---\|---\|---\|---\|
23	\| Business Component (BC) \| rounded rectangle \| `#dae8fc` (light blue) \| `#6c8ebf` \|
24	\| Subsystem container \| container with title bar \| `#f5f5f5` (light gray) \| `#666666` \|
25	\| External service \| rounded rectangle, dashed \| `#fff2cc` (light yellow) \| `#d6b656` \|
26	\| Boundary layer \| rounded rectangle \| `#d5e8d4` (light green) \| `#82b366` \|
27	\| Control layer \| rounded rectangle \| `#e1d5e7` (light purple) \| `#9673a6` \|
28	\| Entity layer \| rounded rectangle \| `#fff2cc` (light yellow) \| `#d6b656` \|
29
30	## Color Palette
31
32	- BC blue: fill `#dae8fc`, border `#6c8ebf`
33	- Subsystem gray: fill `#f5f5f5`, border `#666666`
34	- External yellow: fill `#fff2cc`, border `#d6b656`
35	- Boundary green: fill `#d5e8d4`, border `#82b366`
36	- Control purple: fill `#e1d5e7`, border `#9673a6`
37	- Entity yellow: fill `#fff2cc`, border `#d6b656`
38
39	## BCE Robustness Icons (built-in)
40
41	Drawio ships with the Jacobson BCE icons. Use these — never reconstruct them from primitives (lines + ellipses + triangles).
42
43	- Boundary Object: `shape=umlBoundary;whiteSpace=wrap;html=1;`
44	- Control Object: `ellipse;shape=umlControl;whiteSpace=wrap;html=1;`
45	- Entity Object: `ellipse;shape=umlEntity;whiteSpace=wrap;html=1;`
46
47	Color them by adding `fillColor=#ffffff;strokeColor=<layer-border>;`. Typical icon size: `width=30;height=32`.
48
49	## Content
50
51	- visualize only high-level concepts and modules
52	- show dependencies between components as directed arrows
53	- omit implementation details, classes, and methods
54	- group related components visually
55	- limit diagram to essential relationships
56
57	## Layout
58
59	- arrange components in logical flow (top-to-bottom or left-to-right)
60	- consistent spacing: 40px between nodes, 20px padding inside containers
61	- avoid crossing lines where possible
62	- use container shapes (`container=1;`) for subsystem grouping
63	- default node size: `width=160;height=60;`
64
65	## Labels
66
67	- use short, descriptive names
68	- avoid technical jargon unless domain-specific
69	- label arrows only when relationship type is ambiguous
70	- black font color for all labels
71	- do not use italic font
72	- connection labels must be without shadow
73	- connection labels must use `fontSize=16;`
74
75	## XML Structure
76
77	Minimal skeleton — every `.drawio` file must follow this hierarchy:
78
79	```xml
80	<mxfile>
81	<diagram name="Overview" id="diag1">
82	<mxGraphModel dx="1024" dy="768" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
83	<root>
84	<mxCell id="0"/>
85	<mxCell id="1" parent="0"/>
86	<!-- nodes and edges here, parent="1" -->
87	</root>
88	</mxGraphModel>
89	</diagram>
90	</mxfile>
91	```
92
93	## Example — Minimal 2-Node Diagram
94
95	```xml
96	<mxfile>
97	<diagram name="Overview" id="d1">
98	<mxGraphModel dx="1024" dy="768" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
99	<root>
100	<mxCell id="0"/>
101	<mxCell id="1" parent="0"/>
102	<mxCell id="2" value="Orders" style="rounded=1;whiteSpace=wrap;html=1;shadow=1;arcSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#000000;fontSize=13;fontStyle=0;" vertex="1" parent="1">
103	<mxGeometry x="100" y="200" width="160" height="60" as="geometry"/>
104	</mxCell>
105	<mxCell id="3" value="Payments" style="rounded=1;whiteSpace=wrap;html=1;shadow=1;arcSize=10;fillColor=#dae8fc;strokeColor=#6c8ebf;fontColor=#000000;fontSize=13;fontStyle=0;" vertex="1" parent="1">
106	<mxGeometry x="380" y="200" width="160" height="60" as="geometry"/>
107	</mxCell>
108	<mxCell id="4" value="charges" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogo

People who liked this also viewed

6 picks

Type