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) — every decision MUST have labeled branches: C{"logged in?"} -->|Yes| D and C -->|No| E. Don't fake a branch with a plain [..] step; a fork without a diamond + condition labels reads as a straight line and loses the "when this / when that" meaning.
• <br/> for line breaks; Korean renders fine with the fontFamily above.

Color — meaning, not decoration (60-30-10)

Coloring every node flattens the hierarchy and nothing reads as important. Use 2–3 colors that each carry meaning, and let most nodes stay neutral: