Files
market/skills/tech-diagram/references/templates.md
Yige f2e48ca1a5 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 风格骨架),全部通过
2026-05-31 19:49:33 +08:00

4.9 KiB
Raw Permalink Blame History

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/... and app/... 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-light style (its %%{init}%% line plus the classDefs each diagram needs). To render a template in another style, take from the chosen styles.md preset only its %%{init}%% line and its classDef lines — do not copy the preset's own flowchart TD line. 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