handdrawn-diagram

# Hand-drawn diagram (Mermaid look:handDrawn → SVG/PNG) Renders identically everywhere (README, GitHub/GitLab, Devpost, slides), unlike inline Mermaid (depends on the viewer's Mermaid version) or AI image generators (garbled text). ## When to use - User asks for a "hand-drawn / sketch / 손그림" architecture or flow diagram. - A diagram is needed as an image file (Devpost, slides, print), not just inline. ## Method ### 1. Write the Mermaid source (`.mmd`) ``` --- config: look: handDrawn theme: default themeVariables: fontFamily: "Apple SD Gothic Neo, Malgun Gothic, Noto Sans KR, sans-serif" --- flowchart TD A(["Trigger"]):::trig --> B{{"Lane title"}}:::lane B --> C["step line 1<br/>line 2"]:::grp C --> D[("datastore")]:::grp classDef trig fill:#fff,stroke:#fb8c00,stroke-width:2px,color:#e65100; classDef lane fill:#ffe0b2,stroke:#fb8c00,stroke-width:3px,color:#bf360c; classDef grp fill:#e8f5e9,stroke:#43a047,color:#222; ``` Rules that avoid broken output: - **Quote every label** `["..."]` — `·—≥→/()` break unquoted. - **No emojis in nodes** — headless Chromium renders them as tofu; use words. - Shapes: `([..])` trigger · `{{..}}` lane/title · `[(..)]` store · `[..]` step. - Color groups via `classDef name fill:..,stroke:..,color:..;` + `:::name`. - `<br/>` for line breaks; Korean renders fine with the fontFamily above. ### 2. Render to SVG + PNG (no Chrome install needed) ```bash printf '%s\n' '{"args":["--no-sandbox","--disable-setuid-...