From 6c7cc02fbc896c485bb0a088875624bb6971eaa9 Mon Sep 17 00:00:00 2001 From: hyeonsang Date: Fri, 12 Jun 2026 03:12:10 +0900 Subject: [PATCH] =?UTF-8?q?refactor(skill):=20handdrawn-diagram=20?= =?UTF-8?q?=EC=83=89=20=EC=9C=84=EA=B3=84=C2=B7=EB=B6=84=EA=B8=B0=20?= =?UTF-8?q?=EB=8F=84=ED=98=95=20=EA=B7=9C=EC=B9=99=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 의미 기반 3색(60-30-10): 메인 파이프라인만 강조, 나머지 중립색 - 분기는 마름모 {..} + Yes/No 조건 라벨 필수 규칙 추가 - 예시 템플릿을 main/decision/muted/alert 4종으로 재구성 - 한글+영문 혼합 라벨 끝글자 클리핑 gotcha 보강 (렌더 검증으로 확인) Quality Score: 91/100 Co-Authored-By: Claude Opus 4.8 (1M context) --- .../skills/handdrawn-diagram/SKILL.md | 44 +++++++++++++++---- 1 file changed, 36 insertions(+), 8 deletions(-) diff --git a/plugins/wigtn-plugins/skills/handdrawn-diagram/SKILL.md b/plugins/wigtn-plugins/skills/handdrawn-diagram/SKILL.md index e83f8d8..ef76b76 100644 --- a/plugins/wigtn-plugins/skills/handdrawn-diagram/SKILL.md +++ b/plugins/wigtn-plugins/skills/handdrawn-diagram/SKILL.md @@ -36,22 +36,45 @@ config: 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
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; + 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: `([..])` trigger · `{{..}}` lane/title · `[(..)]` store · `[..]` step. -- Color groups via `classDef name fill:..,stroke:..,color:..;` + `:::name`. +- 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. - `
` 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: + +- **~60% `muted`** (neutral white/gray) — ordinary steps, datastores, side paths. +- **~30% `main`** (one accent, e.g. indigo) — the pipeline you want the eye to + follow (the happy path). Emphasize with `stroke-width`, not loud fills. +- **~10% semantic** — `decision` (amber) for diamonds, `alert` (red) for + error/terminal states. Reserve these so a color instantly signals a role. + +Rule of thumb: if a reader can't guess what a color *means*, drop it. One accent +is too plain (no role distinction); 5+ colors are noise (no hierarchy). 2–3 +semantic colors give both hierarchy and classification while staying calm. + ### 2. Render to SVG + PNG (no Chrome install needed) ```bash @@ -78,3 +101,8 @@ npx -y @mermaid-js/mermaid-cli -i d.mmd -o d.png -p /tmp/pptr.json -b white -s 2 → "다이어그"). Keep Korean node text short, break earlier with `
`, or pad with a trailing space inside the quotes (`"손그림 다이어그램 "`). Always verify in step 3 by reading the PNG. +- **Mixed Korean+Latin on one line clips the trailing Latin.** A line like + `"순차 BUILD"` loses its last char (→ "순차 BUIL"), but a pure-Latin line + (`"team BUILD"`) renders fine. So don't end a 한글 line with a Latin word: put + the Latin token on its own `
` line (`"순차
BUILD"`) or pad the line. + A single trailing space is often NOT enough — verify the PNG and add more.