feat(tech-diagram): 新增 6 套可选视觉风格 (#19)

## 概述 / Summary

给 tech-diagram 技能新增 **6 套可选视觉风格**（借鉴 fireworks-tech-graph 的多风格能力，落到
Mermaid 路线）。

Adds **6 selectable visual styles** to the tech-diagram skill (inspired
by fireworks-tech-graph's multi-style system, realized on the Mermaid
route).

## 改动 / Changes

- 新增 `references/styles.md`：6 套现成"风格头部"（`%%{init}%%` + 5 个 `classDef`）
- `brand-light`（默认）/ `brand-dark` / `terminal` / `blueprint` / `cream` /
`mono`
- `SKILL.md` / `SKILL.zh-CN.md`：新增 **Styles / 风格** 小节，改写规则
1/2，描述与触发词加入风格相关词
- `semantic-vocabulary.md` / `templates.md`：指向 styles.md，说明换风格只换头部
- 版本 `1.0.0 → 1.1.0`

## 设计要点 / Design

- **类名跨风格一致**（`agent/system/biz/warn/error`）——切换风格只替换头部块，节点/连线图体完全不变。
- 默认 `brand-light`；用户说"暗色/蓝图/奶油/极简/极客"或"风格 N"即切换。
- 图表是**用户产物**，非 `brand-*` 风格有意跳出 app 的 3+2 色彩规则（该规则约束产品 UI，不约束导出图）。
- Mermaid 能力边界内：风格 = 调色板 + 字体；fireworks 那种渐变光斑/窗口控件/蓝图标题框需原生 SVG，不在本次范围。

## 验证 / Verification

- ✅ `scripts/i18n/validate-i18n.py`：无问题（heading 数 9=9 对齐）
- ✅ 用客户端同版本 **mermaid 11.15.0** 解析全部 11 个图块（5 模板 + 6 风格骨架），全部通过

skills/tech-diagram/references/semantic-vocabulary.md

@@ -3,39 +3,42 @@
 The full mapping from concept → Mermaid shape → DesireCore 3+2 class. Shape and
 color encode meaning, so a reader understands a diagram without a legend.
 
-## The brand header (paste verbatim as the first line of every diagram)
+## The style header (paste verbatim as the first lines of every diagram)
+
+Every diagram starts with a style's `%%{init}%%` directive. For **flowcharts** the
+header also carries five `classDef`s (full preset below); for **other** types
+(`sequenceDiagram` / `stateDiagram-v2` / `erDiagram` / `classDiagram` / `mindmap`)
+use **only the `%%{init}%%` line** — the `classDef` block is flowchart-specific.
+The six presets live in `styles.md`; the default `brand-light` flowchart header is
+shown here:
 
 ```
-%%{init: {'theme':'base','themeVariables':{'primaryColor':'#F0F5FF','primaryBorderColor':'#007AFF','primaryTextColor':'#1d1d1f','lineColor':'#6e6e73','fontFamily':'-apple-system,SF Pro Text,Noto Sans SC,sans-serif'}}}%%
+%%{init: {'theme':'base','themeVariables':{'background':'#ffffff','primaryColor':'#F0F5FF','primaryBorderColor':'#007AFF','primaryTextColor':'#1d1d1f','lineColor':'#6e6e73','textColor':'#1d1d1f','fontFamily':'-apple-system,SF Pro Text,Noto Sans SC,sans-serif'}}}%%
+flowchart TD
+    classDef agent  fill:#F6F3FF,stroke:#AF52DE,color:#1d1d1f
+    classDef system fill:#F0F5FF,stroke:#007AFF,color:#1d1d1f
+    classDef biz    fill:#F0FDF4,stroke:#34C759,color:#1d1d1f
+    classDef warn   fill:#FFFBF0,stroke:#FF9500,color:#1d1d1f
+    classDef error  fill:#FFF0F0,stroke:#FF3B30,color:#1d1d1f
 ```
 
-## The 5 color classes (the only allowed palette)
+In `brand-light` the values map to the DesireCore design tokens (`fill` =
+`cardBgColors`, `stroke` = the 3+2 accent, `color` = `systemColors.label`) defined
+in `app/theme/tokens/index.ts` / `app/theme/presets/agent-colors.ts` **in the
+DesireCore application codebase** — those paths are not part of this market repo.
+Other styles use their own palettes (see `styles.md`).
 
-```
-classDef agent  fill:#F6F3FF,stroke:#AF52DE,color:#1d1d1f
-classDef system fill:#F0F5FF,stroke:#007AFF,color:#1d1d1f
-classDef biz    fill:#F0FDF4,stroke:#34C759,color:#1d1d1f
-classDef warn   fill:#FFFBF0,stroke:#FF9500,color:#1d1d1f
-classDef error  fill:#FFF0F0,stroke:#FF3B30,color:#1d1d1f
-```
+### Class selection rule (role → class, fixed across all styles)
 
-`fill` = `cardBgColors`, `stroke` = the 3+2 accent, `color` = `systemColors.label`
-(`#1d1d1f`). Source of truth: `app/theme/tokens/index.ts` and
-`app/theme/presets/agent-colors.ts` **in the DesireCore application codebase**
-(where this skill runs) — these paths are not part of this market repository.
+| Domain | Class |
+|--------|-------|
+| System / generic (DesireCore core, infra, LLM) | system |
+| Knowledge / learning (legal, writer, memory) | agent |
+| Business / execution (data, real-estate, code) | biz |
+| Project management / warning / decision | warn |
+| Error / failure | error |
 
-### Class selection rule (mirrors agent-colors.ts)
-
-| Domain | Class | Accent |
-|--------|-------|--------|
-| System / generic (DesireCore core, infra, LLM) | system | blue `#007AFF` |
-| Knowledge / learning (legal, writer, memory) | agent / system | purple `#AF52DE` |
-| Business / execution (data, real-estate, code) | biz | green `#34C759` |
-| Project management / warning / decision | warn | orange `#FF9500` |
-| Error / failure | error | red `#FF3B30` |
-
-Decorative-only colors `yellow #FFCC00` and `teal #5AC8FA` are for background
-gradients elsewhere in the product — never use them in diagrams.
+The class names are stable; only their colors change per style.
 
 ## Shape table
 
@@ -74,5 +77,5 @@ gradients elsewhere in the product — never use them in diagrams.
 | Class / type model | `classDiagram` |
 | Mind map | `mindmap` |
 
-For `sequenceDiagram`, `classDiagram`, etc. that do not support `classDef`, still
-keep the `%%{init}%%` brand header so the theme stays light and on-brand.
+For non-flowchart types, copy only the style's `%%{init}%%` line (the `classDef`
+block is flowchart-specific) so the canvas and font stay on-style.