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"]):::main --> B["main step"]:::main B --> C{"decision?"}:::decision C -->|Yes| D["highlighted path"]:::main C -->|No| E["side step"]:::muted D --> F[("datastore")]:::muted E -.-> G["error / end"]:::alert classDef main fill:#e8eaf6,stroke:#3949ab,stroke-width:2.5px,color:#1a237e; classDef decision fill:#fff8e1,stroke:#f9a825,stroke-width:2px,color:#e65100; classDef muted fill:#fff,stroke:#9e9e9e,color:#616161; classDef alert fill:#ffebee,stroke:#e53935,color:#b71c1c; ``` Rules that avoid broken output: - **Quote every label** `["..."]` — `·—≥→/()` break unquoted. - **No emojis in nodes** — headless Chromium renders them as tofu; use words. - Shapes carry meaning — pick by role, not looks: - `([..])` start/end terminal · `[..]` process step · `[(..)]` datastore/DB - `{..}` **decision** (diamond) ...