## 概述 / 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 风格骨架),全部通过
4.9 KiB
Built-in Templates (内置模板)
Ready-to-use, brand-styled Mermaid for DesireCore's own architecture patterns.
Adapt the labels to the user's subject; keep the header and classDefs intact.
All four are verified to render.
Note: file paths like
lib/...andapp/...cited below refer to the DesireCore application codebase where this skill runs at runtime — they do not exist in this market repository.All templates use the
brand-lightstyle (its%%{init}%%line plus theclassDefs each diagram needs). To render a template in another style, take from the chosenstyles.mdpreset only its%%{init}%%line and itsclassDeflines — do not copy the preset's ownflowchart TDline. Keep the template's existing direction line (flowchart LR/flowchart TD) and the node/edge body unchanged.
1. Agent architecture (Agent 架构图)
Mirrors the delegate / skills / memory layout (lib/agent-service/builtin-tools/delegate.ts).
%%{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
U(["User"]):::biz
Core("DesireCore Core"):::system
A1{{"Legal Agent"}}:::agent
A2{{"Data Agent"}}:::agent
Skills["Skills / MCP Tools"]:::biz
Mem[("Conversation Memory")]:::system
U --> Core
Core --> A1
Core --> A2
A1 --> Skills
A2 --> Skills
A1 -.-> Mem
A2 -.-> Mem
2. Delegate 6 modes (Delegate 六种模式)
The unified delegate tool and its six execution modes.
%%{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 LR
classDef system fill:#F0F5FF,stroke:#007AFF,color:#1d1d1f
classDef biz fill:#F0FDF4,stroke:#34C759,color:#1d1d1f
D("Delegate Tool"):::system
D --> S["sync: block & await"]:::biz
D --> AS["async: fire & report back"]:::biz
D --> W["worker: ephemeral SubAgent"]:::biz
D --> F["fan-out: parallel / sequential"]:::biz
D --> H["handoff: hand session to user"]:::biz
D --> V["via-messaging: fallback wait"]:::biz
3. Three-tier conversation memory (三层对话记忆)
active → recent (L0/L1) → archive (L2); writes are dotted
(lib/schemas/agent-service/conversation-memory.ts).
%%{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 LR
classDef system fill:#F0F5FF,stroke:#007AFF,color:#1d1d1f
classDef warn fill:#FFFBF0,stroke:#FF9500,color:#1d1d1f
New(["New Message"]):::warn
Active[("active: ongoing matters")]:::system
Recent[("recent: L0 / L1 summaries")]:::system
Archive[("archive: L2 full log")]:::system
New --> Active
Active -.->|compact| Recent
Recent -.->|archive after 180d| Archive
4. Relation graph (关系图谱,6 种边)
The six edge types projected by lib/agent-service/relations/projector.ts, each
drawn with a distinct edge style. Edge weight decays over time (30-day half-life).
%%{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 biz fill:#F0FDF4,stroke:#34C759,color:#1d1d1f
A1{{"Agent A"}}:::agent
A2{{"Agent B"}}:::agent
A3{{"Agent C"}}:::agent
U(["User"]):::biz
A1 -->|delegate| A2
A1 -.->|mention| A3
A2 ===|co_task| A3
A2 --o|hierarchy| A1
A3 -->|seek_help| A1
A1 --x|escalation| U
Other diagram types
For sequence / state / ER / class diagrams, keep the same %%{init}%% header for
a consistent light theme. Example sequence diagram:
%%{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'}}}%%
sequenceDiagram
actor U as User
participant C as DesireCore Core
participant A as Sub-Agent
participant M as Memory
U->>C: request
C->>A: delegate (sync)
A->>M: write fact
A-->>C: result
C-->>U: reply