desirecore/market
2
0
Fork 0
mirror of https://git.openapi.site/https://github.com/desirecore/market.git synced 2026-06-06 09:10:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
## 概述 / 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 风格骨架），全部通过
This commit is contained in:
yi-ge
2026-05-31 19:49:33 +08:00
committed by GitHub
parent e9862ef1ab
commit f2e48ca1a5
5 changed files with 260 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
skills/tech-diagram/references/semantic-vocabulary.md
View File

@@ -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.

120
skills/tech-diagram/references/styles.md Normal file
View File

@@ -0,0 +1,120 @@
# Style Presets (风格预设)
Six style presets. A "style" = a `%%{init}%%` directive + five `classDef`s.
**The class names (`agent` / `system` / `biz` / `warn` / `error`) are identical
across all styles**, so switching styles means swapping only the header — the
diagram body (`:::agent`, `:::system`, …) never changes.
> **Flowchart vs. other diagram types.** Each preset below is a complete
> **flowchart** skeleton (`%%{init}%%` + `flowchart TD` + `classDef`s). Use it as
> follows:
> - **Flowchart / architecture / data-flow:** paste the whole block, then add nodes.
> - **sequenceDiagram / stateDiagram-v2 / erDiagram / classDiagram / mindmap:** copy
> **only the first `%%{init}%%` line**, then write your diagram type. The
> `flowchart TD` + `classDef` block is flowchart-specific — pasting it would force
> a flowchart or break parsing. The `%%{init}%%` line alone still gives them the
> style's canvas color and font. (If you want semantic coloring in these types,
> use that type's own class/style syntax — but init-only is the safe default.)
## How to pick a style
- **Default is `brand-light`.** Use it unless the user asks otherwise.
- The user selects a style by name or number: "暗色/dark", "极客/terminal",
"蓝图/blueprint", "奶油/cream", "极简/mono", or "风格 N / style N".
- Diagrams are user-facing artifacts, so non-3+2 palettes are allowed here (this
is a deliberate exception to the app's 3+2 color rule, which governs product UI,
not exported diagrams). Each preset is internally consistent.
- Semantic shapes and arrow encoding (see `semantic-vocabulary.md`) stay the same
in every flowchart style. For non-flowchart types, keep the style's `%%{init}%%`
header for a consistent canvas + font (see the note above).
---
## 1. brand-light (默认 / blog · slides · docs)
```
%%{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
%% nodes & edges here, e.g. A{{"Agent"}}:::agent --> B("Core"):::system
```
## 2. brand-dark (DesireCore 暗色模式一致)
Uses the app's `.dark` surface tokens (neutral-950 bg, light text) with the same
3+2 accents on dark card fills.
```
%%{init: {'theme':'base','themeVariables':{'background':'#0a0a0f','primaryColor':'#1C263A','primaryBorderColor':'#007AFF','primaryTextColor':'#f8f8fc','lineColor':'#8a8a92','textColor':'#f8f8fc','fontFamily':'-apple-system,SF Pro Text,Noto Sans SC,sans-serif'}}}%%
flowchart TD
classDef agent fill:#261E34,stroke:#AF52DE,color:#f8f8fc
classDef system fill:#1C263A,stroke:#007AFF,color:#f8f8fc
classDef biz fill:#1C2C24,stroke:#34C759,color:#f8f8fc
classDef warn fill:#3A2816,stroke:#FF9500,color:#f8f8fc
classDef error fill:#3A1E1E,stroke:#FF3B30,color:#f8f8fc
%% nodes & edges here
```
## 3. terminal (极客暗黑 / GitHub · dev articles)
Near-black canvas, neon accents, monospace.
```
%%{init: {'theme':'base','themeVariables':{'background':'#0f0f1a','primaryColor':'#0E1726','primaryBorderColor':'#3BA0FF','primaryTextColor':'#d6f5e8','lineColor':'#00E5A0','textColor':'#d6f5e8','fontFamily':'SF Mono,JetBrains Mono,monospace'}}}%%
flowchart TD
classDef agent fill:#14111F,stroke:#B26BFF,color:#E6D6FF
classDef system fill:#0E1726,stroke:#3BA0FF,color:#CFE8FF
classDef biz fill:#0E1F18,stroke:#00E5A0,color:#C9FFE8
classDef warn fill:#241A0E,stroke:#FFB000,color:#FFE8C0
classDef error fill:#241010,stroke:#FF4B5C,color:#FFD0D4
%% nodes & edges here
```
## 4. blueprint (工程蓝图 / architecture specs)
Deep-blue canvas, cyan/white lines, monospace — engineering blueprint feel.
```
%%{init: {'theme':'base','themeVariables':{'background':'#0a1628','primaryColor':'#0E2A4A','primaryBorderColor':'#5AC8FA','primaryTextColor':'#E6F0FF','lineColor':'#5AC8FA','textColor':'#E6F0FF','fontFamily':'SF Mono,JetBrains Mono,monospace'}}}%%
flowchart TD
classDef agent fill:#10243F,stroke:#9AD0FF,color:#E6F0FF
classDef system fill:#0E2A4A,stroke:#5AC8FA,color:#E6F0FF
classDef biz fill:#0E3344,stroke:#37D0E0,color:#E6F0FF
classDef warn fill:#2A2A12,stroke:#E0C04A,color:#FBF4D8
classDef error fill:#2A1420,stroke:#FF6B8A,color:#FFDDE6
%% nodes & edges here
```
## 5. cream (暖奶油 / Anthropic-flavored)
Warm cream canvas, clay/sage/plum accents, humanist sans.
```
%%{init: {'theme':'base','themeVariables':{'background':'#f8f6f3','primaryColor':'#EDE7DF','primaryBorderColor':'#CC785C','primaryTextColor':'#2b2622','lineColor':'#8a7a6a','textColor':'#2b2622','fontFamily':'ui-sans-serif,-apple-system,Noto Sans SC,sans-serif'}}}%%
flowchart TD
classDef agent fill:#EFE6EC,stroke:#9C6B8E,color:#2b2622
classDef system fill:#EDE7DF,stroke:#CC785C,color:#2b2622
classDef biz fill:#E9EDE4,stroke:#6E8B6E,color:#2b2622
classDef warn fill:#F3E6D0,stroke:#C9912E,color:#2b2622
classDef error fill:#F3DEDA,stroke:#B0504A,color:#2b2622
%% nodes & edges here
```
## 6. mono (极简单色 / Notion · wiki)
Pure white, grayscale with stroke-shade distinction.
```
%%{init: {'theme':'base','themeVariables':{'background':'#ffffff','primaryColor':'#F4F4F5','primaryBorderColor':'#111111','primaryTextColor':'#111111','lineColor':'#999999','textColor':'#111111','fontFamily':'-apple-system,SF Pro Text,Noto Sans SC,sans-serif'}}}%%
flowchart TD
classDef agent fill:#EDEDED,stroke:#333333,color:#111111
classDef system fill:#F4F4F5,stroke:#111111,color:#111111
classDef biz fill:#FAFAFA,stroke:#555555,color:#111111
classDef warn fill:#F0F0F0,stroke:#777777,color:#111111,stroke-dasharray:4 3
classDef error fill:#EAEAEA,stroke:#000000,color:#111111,stroke-width:2px
%% nodes & edges here
```

17
skills/tech-diagram/references/templates.md
View File

@@ -7,13 +7,20 @@ 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
> `classDef`s 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`).
```mermaid
%%{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
@@ -40,7 +47,7 @@ flowchart TD
The unified delegate tool and its six execution modes.
```mermaid
%%{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 LR
classDef system fill:#F0F5FF,stroke:#007AFF,color:#1d1d1f
classDef biz fill:#F0FDF4,stroke:#34C759,color:#1d1d1f
@@ -60,7 +67,7 @@ active → recent (L0/L1) → archive (L2); writes are dotted
(`lib/schemas/agent-service/conversation-memory.ts`).
```mermaid
%%{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 LR
classDef system fill:#F0F5FF,stroke:#007AFF,color:#1d1d1f
classDef warn fill:#FFFBF0,stroke:#FF9500,color:#1d1d1f
@@ -81,7 +88,7 @@ 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).
```mermaid
%%{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 biz fill:#F0FDF4,stroke:#34C759,color:#1d1d1f
@@ -105,7 +112,7 @@ For sequence / state / ER / class diagrams, keep the same `%%{init}%%` header fo
a consistent light theme. Example sequence diagram:
```mermaid
%%{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'}}}%%
sequenceDiagram
actor U as User
participant C as DesireCore Core