excalidraw

Name: excalidraw
Author: kv0906

134stars33forks

How to install excalidraw?

kv0906/pm-kit/excalidraw

$npx -y skills add kv0906/pm-kit --skill excalidraw

Installs into the current project.

Summary

Professional Excalidraw diagram generation expert that creates complete, valid .excalidraw.json files based on user descriptions. Use ONLY when users explicitly mention "Excalidraw" or request to create diagrams specifically with Excalidraw (e.g., "用 Excalidraw 画个流程图", "generate

Files · 1

View on GitHub

SKILL.md

1	# Excalidraw Diagram Generator
2
3	Create complete, valid `.excalidraw.json` files that users can directly open at excalidraw.com.
4
5	## Core Capabilities
6
7	Diagram types supported:
8	- Flowcharts - Process flows, decision trees, workflows
9	- Architecture Diagrams - System architectures, network topologies, component diagrams
10	- UML Diagrams - Class diagrams, sequence diagrams, use case diagrams
11	- Mind Maps - Hierarchical concept maps, brainstorming diagrams
12
13	Two visual styles:
14	- Professional Mode (default): Clean, polished diagrams for technical documentation
15	- Hand-drawn Mode: Sketch-style diagrams for brainstorming and informal use
16
17	---
18
19	## Quick Reference
20
21	### JSON Schema
22
23	```json
24	{
25	"type": "excalidraw",
26	"version": 2,
27	"source": "https://excalidraw.com",
28	"elements": [],
29	"appState": {
30	"gridSize": null,
31	"viewBackgroundColor": "#ffffff"
32	},
33	"files": {}
34	}
35	```
36
37	### Coordinate System
38
39	- Origin: Top-left corner (0, 0)
40	- X-axis: Increases rightward
41	- Y-axis: Increases downward
42	- Unit: Pixels
43
44	### Grid-Based Layout System
45
46	Use a 20px grid for alignment:
47
48	```
49	GRID_UNIT = 20
50	COLUMN_WIDTH = 200 # Element + gap
51	ROW_HEIGHT = 150 # Element + gap
52
53	Position formula:
54	x = START_X + (column * COLUMN_WIDTH)
55	y = START_Y + (row * ROW_HEIGHT)
56
57	Recommended START_X = 50, START_Y = 100
58	```
59
60	### Standard Element Sizes
61
62	\| Element \| Width \| Height \| Use Case \|
63	\|---------\|-------\|--------\|----------\|
64	\| Small box \| 120 \| 60 \| Labels, simple steps \|
65	\| Standard box \| 160 \| 80 \| Process steps \|
66	\| Large box \| 200 \| 100 \| Detailed nodes \|
67	\| Wide box \| 240 \| 80 \| Long text \|
68	\| Diamond \| 100 \| 100 \| Decision points \|
69	\| Circle \| 80 \| 80 \| Start/End nodes \|
70
71	---
72
73	## Text Calculations (CRITICAL)
74
75	### Text Height Formula
76
77	```
78	textHeight = fontSize × lineHeight × numberOfLines
79	= fontSize × 1.25 × numberOfLines
80
81	Examples:
82	- 1 line, fontSize 20: 20 × 1.25 × 1 = 25px
83	- 3 lines, fontSize 14: 14 × 1.25 × 3 = 52.5px ≈ 53px
84	- 12 lines, fontSize 15: 15 × 1.25 × 12 = 225px
85	```
86
87	### Text Centering Formula
88
89	```
90	text_x = shape_x + (shape_width - text_width) / 2
91	text_y = shape_y + (shape_height - text_height) / 2
92	```
93
94	### Text Size Reference
95
96	\| Font Size \| Char Width \| Line Height \| Use \|
97	\|-----------\|------------\|-------------\|-----\|
98	\| 11 \| ~6px \| 15px \| Labels, annotations \|
99	\| 12 \| ~7px \| 16px \| Secondary text \|
100	\| 14 \| ~8px \| 18px \| Body text \|
101	\| 16 \| ~9px \| 20px \| Primary text \|
102	\| 18 \| ~10px \| 24px \| Headings \|
103	\| 20 \| ~11px \| 26px \| Titles \|
104	\| 28 \| ~16px \| 35px \| Icons/Emoji \|
105
106	Estimate text_width: `char_count × char_width`
107
108	### Centering Example
109
110	```
111	Shape: x=100, y=100, width=160, height=80
112	Text: "Process" (7 chars), fontSize=16
113
114	text_width = 7 × 9 = 63
115	text_height = 1 × 20 = 20
116	text_x = 100 + (160 - 63) / 2 = 148.5 ≈ 148
117	text_y = 100 + (80 - 20) / 2 = 130
118	```
119
120	### UML Class Diagram Container Height
121
122	```
123	containerHeight = headerHeight + attributesHeight + methodsHeight + padding
124
125	Where:
126	- headerHeight = classNameTextHeight + topPadding (typically 15px + 15px = 30px)
127	- attributesHeight = fontSize × 1.25 × numberOfAttributes + 10px
128	- methodsHeight = fontSize × 1.25 × numberOfMethods + 10px
129
130	Example (12 attributes, 10 methods, fontSize 15):
131	- Header: 20 + 15 = 35px
132	- Attributes: 15 × 1.25 × 12 + 10 = 235px
133	- Methods: 15 × 1.25 × 10 + 10 ≈ 198px
134	- Total: 35 + 10 + 235 + 10 + 198 = 488px (round to 500px)
135	```
136
137	---
138
139	## Arrow Positioning
140
141	### Horizontal Arrow (Left to Right)
142
143	```
144	From shape at (x1, y1, w1, h1) to shape at (x2, y2, w2, h2):
145
146	arrow_x = x1 + w1 # Right edge of source
147	arrow_y = y1 + h1/2 # Vertical center
148	gap = x2 - (x1 + w1) # Space between shapes
149	points = [[0, 0], [gap, 0]]
150	```
151
152	### Vertical Arrow (Top to Bottom)
153
154	```
155	arrow_x = x1 + w1/2 # Horizontal center
156	arrow_y = y1 + h1 # Bottom edge of source
157	gap = y2 - (y1 + h1)
158	points = [[0, 0], [0, gap]]
159	```
160
161	### Feedback Loop (Return Arrow)
162
163	```
164	From bottom-right back to left:
165	Start: (800, 400)
166	points=[
167	[0, 0], # Start
168	[0, 80], # Down
169	[-400, 80], # Left
170	[-400, -150] # Up to target
171	]
172	```
173
174	---
175
176	## Z-Order (Element Array Order)
177
178	Elements render in array order. First = back, last = front.
179
180	Correct order:
181	1. Background shapes (containers, frames)
182	2. Connection lines/arrows
183	3. Foreground shapes (nodes, boxes)
184	4. Text labels
185	5. Icons/overlays
186
187	---
188
189	## Visual Styles
190
191	### Professional Mode (Default)
192
193	Use for: Architecture diagrams, UML, te

People who liked this also viewed

6 picks

Type

excalidraw

134stars33forks

View on GitHub

How to install excalidraw?

kv0906/pm-kit/excalidraw

$npx -y skills add kv0906/pm-kit --skill excalidraw

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Excalidraw Diagram Generator
2
3	Create complete, valid `.excalidraw.json` files that users can directly open at excalidraw.com.
4
5	## Core Capabilities
6
7	Diagram types supported:
8	- Flowcharts - Process flows, decision trees, workflows
9	- Architecture Diagrams - System architectures, network topologies, component diagrams
10	- UML Diagrams - Class diagrams, sequence diagrams, use case diagrams
11	- Mind Maps - Hierarchical concept maps, brainstorming diagrams
12
13	Two visual styles:
14	- Professional Mode (default): Clean, polished diagrams for technical documentation
15	- Hand-drawn Mode: Sketch-style diagrams for brainstorming and informal use
16
17	---
18
19	## Quick Reference
20
21	### JSON Schema
22
23	```json
24	{
25	"type": "excalidraw",
26	"version": 2,
27	"source": "https://excalidraw.com",
28	"elements": [],
29	"appState": {
30	"gridSize": null,
31	"viewBackgroundColor": "#ffffff"
32	},
33	"files": {}
34	}
35	```
36
37	### Coordinate System
38
39	- Origin: Top-left corner (0, 0)
40	- X-axis: Increases rightward
41	- Y-axis: Increases downward
42	- Unit: Pixels
43
44	### Grid-Based Layout System
45
46	Use a 20px grid for alignment:
47
48	```
49	GRID_UNIT = 20
50	COLUMN_WIDTH = 200 # Element + gap
51	ROW_HEIGHT = 150 # Element + gap
52
53	Position formula:
54	x = START_X + (column * COLUMN_WIDTH)
55	y = START_Y + (row * ROW_HEIGHT)
56
57	Recommended START_X = 50, START_Y = 100
58	```
59
60	### Standard Element Sizes
61
62	\| Element \| Width \| Height \| Use Case \|
63	\|---------\|-------\|--------\|----------\|
64	\| Small box \| 120 \| 60 \| Labels, simple steps \|
65	\| Standard box \| 160 \| 80 \| Process steps \|
66	\| Large box \| 200 \| 100 \| Detailed nodes \|
67	\| Wide box \| 240 \| 80 \| Long text \|
68	\| Diamond \| 100 \| 100 \| Decision points \|
69	\| Circle \| 80 \| 80 \| Start/End nodes \|
70
71	---
72
73	## Text Calculations (CRITICAL)
74
75	### Text Height Formula
76
77	```
78	textHeight = fontSize × lineHeight × numberOfLines
79	= fontSize × 1.25 × numberOfLines
80
81	Examples:
82	- 1 line, fontSize 20: 20 × 1.25 × 1 = 25px
83	- 3 lines, fontSize 14: 14 × 1.25 × 3 = 52.5px ≈ 53px
84	- 12 lines, fontSize 15: 15 × 1.25 × 12 = 225px
85	```
86
87	### Text Centering Formula
88
89	```
90	text_x = shape_x + (shape_width - text_width) / 2
91	text_y = shape_y + (shape_height - text_height) / 2
92	```
93
94	### Text Size Reference
95
96	\| Font Size \| Char Width \| Line Height \| Use \|
97	\|-----------\|------------\|-------------\|-----\|
98	\| 11 \| ~6px \| 15px \| Labels, annotations \|
99	\| 12 \| ~7px \| 16px \| Secondary text \|
100	\| 14 \| ~8px \| 18px \| Body text \|
101	\| 16 \| ~9px \| 20px \| Primary text \|
102	\| 18 \| ~10px \| 24px \| Headings \|
103	\| 20 \| ~11px \| 26px \| Titles \|
104	\| 28 \| ~16px \| 35px \| Icons/Emoji \|
105
106	Estimate text_width: `char_count × char_width`
107
108	### Centering Example
109
110	```
111	Shape: x=100, y=100, width=160, height=80
112	Text: "Process" (7 chars), fontSize=16
113
114	text_width = 7 × 9 = 63
115	text_height = 1 × 20 = 20
116	text_x = 100 + (160 - 63) / 2 = 148.5 ≈ 148
117	text_y = 100 + (80 - 20) / 2 = 130
118	```
119
120	### UML Class Diagram Container Height
121
122	```
123	containerHeight = headerHeight + attributesHeight + methodsHeight + padding
124
125	Where:
126	- headerHeight = classNameTextHeight + topPadding (typically 15px + 15px = 30px)
127	- attributesHeight = fontSize × 1.25 × numberOfAttributes + 10px
128	- methodsHeight = fontSize × 1.25 × numberOfMethods + 10px
129
130	Example (12 attributes, 10 methods, fontSize 15):
131	- Header: 20 + 15 = 35px
132	- Attributes: 15 × 1.25 × 12 + 10 = 235px
133	- Methods: 15 × 1.25 × 10 + 10 ≈ 198px
134	- Total: 35 + 10 + 235 + 10 + 198 = 488px (round to 500px)
135	```
136
137	---
138
139	## Arrow Positioning
140
141	### Horizontal Arrow (Left to Right)
142
143	```
144	From shape at (x1, y1, w1, h1) to shape at (x2, y2, w2, h2):
145
146	arrow_x = x1 + w1 # Right edge of source
147	arrow_y = y1 + h1/2 # Vertical center
148	gap = x2 - (x1 + w1) # Space between shapes
149	points = [[0, 0], [gap, 0]]
150	```
151
152	### Vertical Arrow (Top to Bottom)
153
154	```
155	arrow_x = x1 + w1/2 # Horizontal center
156	arrow_y = y1 + h1 # Bottom edge of source
157	gap = y2 - (y1 + h1)
158	points = [[0, 0], [0, gap]]
159	```
160
161	### Feedback Loop (Return Arrow)
162
163	```
164	From bottom-right back to left:
165	Start: (800, 400)
166	points=[
167	[0, 0], # Start
168	[0, 80], # Down
169	[-400, 80], # Left
170	[-400, -150] # Up to target
171	]
172	```
173
174	---
175
176	## Z-Order (Element Array Order)
177
178	Elements render in array order. First = back, last = front.
179
180	Correct order:
181	1. Background shapes (containers, frames)
182	2. Connection lines/arrows
183	3. Foreground shapes (nodes, boxes)
184	4. Text labels
185	5. Icons/overlays
186
187	---
188
189	## Visual Styles
190
191	### Professional Mode (Default)
192
193	Use for: Architecture diagrams, UML, te

People who liked this also viewed

6 picks

Type