mirror of https://git.openapi.site/https://github.com/desirecore/market.git synced 2026-06-06 09:30:42 +08:00

Files

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

3.9 KiB

Raw Blame History

Semantic Vocabulary (语义词汇表)

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 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 classDefs (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':{'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

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

Class selection rule (role → class, fixed across all styles)

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

The class names are stable; only their colors change per style.

Shape table

Concept	Mermaid syntax	Class	Note
Agent / sub-agent	`id{{Name}}` (hexagon)	agent	the signature shape for an autonomous agent
DesireCore core / orchestrator	`id(Name)` (rounded)	system	central coordinator
LLM / model	`id(⚡ Model)` (rounded + ⚡)	system	⚡ prefix marks an LLM call
Service / tool / skill	`id[Name]` (rect)	biz	a callable capability
Business / execution step	`id[Step]` (rect)	biz	a unit of work
Memory / store / DB	`id[(Store)]` (cylinder)	system	persistent state
User / external actor	`id([User])` (stadium)	biz	the human
Decision / branch	`id{Choice?}` (diamond)	warn	a fork in control flow
External service	`subgraph Ext [External]` ... `end` + `style Ext stroke-dasharray:4 3`	—	dashed boundary = outside the system

Arrow / flow encoding

Flow type	Edge syntax	Meaning
Primary data flow	`A --> B`	the main path
Memory write / persistence	`A -.-> B`	dotted = side-effect write
Async event	`A -.->	async
Feedback / retry	`B --> A` (back-edge)	loop
Hierarchy / containment	`A --o B`	circle edge
Hard stop / escalation	`A --x B`	cross edge
Co-participation (equal peers)	`A === B`	thick link

Diagram-type cheatsheet

User intent	Mermaid header
Architecture / data flow	`flowchart TD` or `flowchart LR`
Sequence / interaction over time	`sequenceDiagram`
State machine	`stateDiagram-v2`
ER / data model	`erDiagram`
Class / type model	`classDiagram`
Mind map	`mindmap`

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.

3.9 KiB Raw Blame History