handdrawn-diagram

Name: handdrawn-diagram
Author: wigtn

45stars2forks

How to install handdrawn-diagram?

wigtn/wigtn-plugins/handdrawn-diagram

$npx -y skills add wigtn/wigtn-plugins --skill handdrawn-diagram

Installs into the current project.

Summary

Generate a hand-drawn (sketch-style) architecture or flow diagram as a committable image (SVG + PNG). Use when the user wants a sketch-aesthetic diagram for a README, docs, or hackathon/Devpost submission that still has correct, legible text and per-group color. Authors a Mermaid

Files · 1

View on GitHub

SKILL.md

1	# Hand-drawn diagram (Mermaid look:handDrawn → SVG/PNG)
2
3	Renders identically everywhere (README, GitHub/GitLab, Devpost, slides), unlike
4	inline Mermaid (depends on the viewer's Mermaid version) or AI image generators
5	(garbled text).
6
7	## When to use
8
9	- User asks for a "hand-drawn / sketch / 손그림" architecture or flow diagram.
10	- A diagram is needed as an image file (Devpost, slides, print), not just inline.
11
12	## Method
13
14	### 1. Write the Mermaid source (`.mmd`)
15
16	```
17	---
18	config:
19	look: handDrawn
20	theme: default
21	themeVariables:
22	fontFamily: "Apple SD Gothic Neo, Malgun Gothic, Noto Sans KR, sans-serif"
23	---
24	flowchart TD
25	A(["Trigger"]):::main --> B["main step"]:::main
26	B --> C{"decision?"}:::decision
27	C -->\|Yes\| D["highlighted path"]:::main
28	C -->\|No\| E["side step"]:::muted
29	D --> F[("datastore")]:::muted
30	E -.-> G["error / end"]:::alert
31	classDef main fill:#e8eaf6,stroke:#3949ab,stroke-width:2.5px,color:#1a237e;
32	classDef decision fill:#fff8e1,stroke:#f9a825,stroke-width:2px,color:#e65100;
33	classDef muted fill:#fff,stroke:#9e9e9e,color:#616161;
34	classDef alert fill:#ffebee,stroke:#e53935,color:#b71c1c;
35	```
36
37	Rules that avoid broken output:
38
39	- Quote every label `["..."]` — `·—≥→/()` break unquoted.
40	- No emojis in nodes — headless Chromium renders them as tofu; use words.
41	- Shapes carry meaning — pick by role, not looks:
42	- `([..])` start/end terminal · `[..]` process step · `[(..)]` datastore/DB
43	- `{..}` decision (diamond) — every decision MUST have labeled branches:
44	`C{"logged in?"} -->\|Yes\| D` and `C -->\|No\| E`. Don't fake a branch with a
45	plain `[..]` step; a fork without a diamond + condition labels reads as a
46	straight line and loses the "when this / when that" meaning.
47	- `<br/>` for line breaks; Korean renders fine with the fontFamily above.
48
49	### Color — meaning, not decoration (60-30-10)
50
51	Coloring every node flattens the hierarchy and nothing reads as important. Use
52	2–3 colors that each carry meaning, and let most nodes stay neutral:
53
54	- ~60% `muted` (neutral white/gray) — ordinary steps, datastores, side paths.
55	- ~30% `main` (one accent, e.g. indigo) — the pipeline you want the eye to
56	follow (the happy path). Emphasize with `stroke-width`, not loud fills.
57	- ~10% semantic — `decision` (amber) for diamonds, `alert` (red) for
58	error/terminal states. Reserve these so a color instantly signals a role.
59
60	Rule of thumb: if a reader can't guess what a color means, drop it. One accent
61	is too plain (no role distinction); 5+ colors are noise (no hierarchy). 2–3
62	semantic colors give both hierarchy and classification while staying calm.
63
64	### 2. Render to SVG + PNG (no Chrome install needed)
65
66	```bash
67	printf '%s\n' '{"args":["--no-sandbox","--disable-setuid-sandbox"]}' > /tmp/pptr.json
68	npx -y @mermaid-js/mermaid-cli -i d.mmd -o d.svg -p /tmp/pptr.json -b white
69	npx -y @mermaid-js/mermaid-cli -i d.mmd -o d.png -p /tmp/pptr.json -b white -s 2
70	```
71
72	`-b white` = white bg · `-s 2` = 2× crisp PNG · `look:handDrawn` needs mermaid-cli v11+ (npx pulls latest).
73
74	### 3. Verify → embed → commit
75
76	- Read/open the PNG and confirm: text correct, no tofu, colors right.
77	- Embed the PNG: `![Title](path/d.png)`.
78	- Commit all three: `.mmd` (source) · `.svg` (vector master) · `.png` (embed).
79
80	## Gotchas
81
82	- macOS has no `timeout` — don't wrap npx in it.
83	- Never put a triple-backtick inside an unquoted `awk`/`grep` pattern (zsh runs backticks as command substitution).
84	- Label needs `&` → write `and`.
85	- CJK clips in handDrawn nodes. rough.js under-estimates Korean/CJK glyph
86	width, so a wide 한글 label gets cut at the node's right edge (e.g. "다이어그램"
87	→ "다이어그"). Keep Korean node text short, break earlier with `<br/>`, or pad
88	with a trailing space inside the quotes (`"손그림 다이어그램 "`). Always verify
89	in step 3 by reading the PNG.
90	- Mixed Korean+Latin on one line clips the trailing Latin. A line like
91	`"순차 BUILD"` loses its last char (→ "순차 BUIL"), but a pure-Latin line
92	(`"team BUILD"`) renders fine. So don't end a 한글 line with a Latin word: put
93	the Latin token on its own `<br/>` line (`"순차<br/>BUILD"`) or pad the line.
94	A single trailing space is often NOT enough — verify the PNG and add more.

People who liked this also viewed

6 picks

Type

handdrawn-diagram

45stars2forks

View on GitHub

How to install handdrawn-diagram?

wigtn/wigtn-plugins/handdrawn-diagram

$npx -y skills add wigtn/wigtn-plugins --skill handdrawn-diagram

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Hand-drawn diagram (Mermaid look:handDrawn → SVG/PNG)
2
3	Renders identically everywhere (README, GitHub/GitLab, Devpost, slides), unlike
4	inline Mermaid (depends on the viewer's Mermaid version) or AI image generators
5	(garbled text).
6
7	## When to use
8
9	- User asks for a "hand-drawn / sketch / 손그림" architecture or flow diagram.
10	- A diagram is needed as an image file (Devpost, slides, print), not just inline.
11
12	## Method
13
14	### 1. Write the Mermaid source (`.mmd`)
15
16	```
17	---
18	config:
19	look: handDrawn
20	theme: default
21	themeVariables:
22	fontFamily: "Apple SD Gothic Neo, Malgun Gothic, Noto Sans KR, sans-serif"
23	---
24	flowchart TD
25	A(["Trigger"]):::main --> B["main step"]:::main
26	B --> C{"decision?"}:::decision
27	C -->\|Yes\| D["highlighted path"]:::main
28	C -->\|No\| E["side step"]:::muted
29	D --> F[("datastore")]:::muted
30	E -.-> G["error / end"]:::alert
31	classDef main fill:#e8eaf6,stroke:#3949ab,stroke-width:2.5px,color:#1a237e;
32	classDef decision fill:#fff8e1,stroke:#f9a825,stroke-width:2px,color:#e65100;
33	classDef muted fill:#fff,stroke:#9e9e9e,color:#616161;
34	classDef alert fill:#ffebee,stroke:#e53935,color:#b71c1c;
35	```
36
37	Rules that avoid broken output:
38
39	- Quote every label `["..."]` — `·—≥→/()` break unquoted.
40	- No emojis in nodes — headless Chromium renders them as tofu; use words.
41	- Shapes carry meaning — pick by role, not looks:
42	- `([..])` start/end terminal · `[..]` process step · `[(..)]` datastore/DB
43	- `{..}` decision (diamond) — every decision MUST have labeled branches:
44	`C{"logged in?"} -->\|Yes\| D` and `C -->\|No\| E`. Don't fake a branch with a
45	plain `[..]` step; a fork without a diamond + condition labels reads as a
46	straight line and loses the "when this / when that" meaning.
47	- `<br/>` for line breaks; Korean renders fine with the fontFamily above.
48
49	### Color — meaning, not decoration (60-30-10)
50
51	Coloring every node flattens the hierarchy and nothing reads as important. Use
52	2–3 colors that each carry meaning, and let most nodes stay neutral:
53
54	- ~60% `muted` (neutral white/gray) — ordinary steps, datastores, side paths.
55	- ~30% `main` (one accent, e.g. indigo) — the pipeline you want the eye to
56	follow (the happy path). Emphasize with `stroke-width`, not loud fills.
57	- ~10% semantic — `decision` (amber) for diamonds, `alert` (red) for
58	error/terminal states. Reserve these so a color instantly signals a role.
59
60	Rule of thumb: if a reader can't guess what a color means, drop it. One accent
61	is too plain (no role distinction); 5+ colors are noise (no hierarchy). 2–3
62	semantic colors give both hierarchy and classification while staying calm.
63
64	### 2. Render to SVG + PNG (no Chrome install needed)
65
66	```bash
67	printf '%s\n' '{"args":["--no-sandbox","--disable-setuid-sandbox"]}' > /tmp/pptr.json
68	npx -y @mermaid-js/mermaid-cli -i d.mmd -o d.svg -p /tmp/pptr.json -b white
69	npx -y @mermaid-js/mermaid-cli -i d.mmd -o d.png -p /tmp/pptr.json -b white -s 2
70	```
71
72	`-b white` = white bg · `-s 2` = 2× crisp PNG · `look:handDrawn` needs mermaid-cli v11+ (npx pulls latest).
73
74	### 3. Verify → embed → commit
75
76	- Read/open the PNG and confirm: text correct, no tofu, colors right.
77	- Embed the PNG: `![Title](path/d.png)`.
78	- Commit all three: `.mmd` (source) · `.svg` (vector master) · `.png` (embed).
79
80	## Gotchas
81
82	- macOS has no `timeout` — don't wrap npx in it.
83	- Never put a triple-backtick inside an unquoted `awk`/`grep` pattern (zsh runs backticks as command substitution).
84	- Label needs `&` → write `and`.
85	- CJK clips in handDrawn nodes. rough.js under-estimates Korean/CJK glyph
86	width, so a wide 한글 label gets cut at the node's right edge (e.g. "다이어그램"
87	→ "다이어그"). Keep Korean node text short, break earlier with `<br/>`, or pad
88	with a trailing space inside the quotes (`"손그림 다이어그램 "`). Always verify
89	in step 3 by reading the PNG.
90	- Mixed Korean+Latin on one line clips the trailing Latin. A line like
91	`"순차 BUILD"` loses its last char (→ "순차 BUIL"), but a pure-Latin line
92	(`"team BUILD"`) renders fine. So don't end a 한글 line with a Latin word: put
93	the Latin token on its own `<br/>` line (`"순차<br/>BUILD"`) or pad the line.
94	A single trailing space is often NOT enough — verify the PNG and add more.

People who liked this also viewed

6 picks

Type