desirecore/market
2
0
Fork 0
mirror of https://git.openapi.site/https://github.com/desirecore/market.git synced 2026-06-06 04:30:42 +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

115
skills/tech-diagram/SKILL.md
View File

@@ -4,14 +4,15 @@ description: >-
Use this skill when the user wants to turn a description into a technical
diagram — architecture diagrams, flowcharts, sequence diagrams, state
machines, ER diagrams, class diagrams, or mind maps. Generates brand-consistent
Mermaid that the DesireCore chat renders inline as SVG, styled with the
DesireCore 3+2 design tokens and a semantic shape/arrow vocabulary. Use this
for diagrams of structure, flow, or relationships — NOT for photographic or
illustrative images (use an image-generation skill for those).
Mermaid that the DesireCore chat renders inline as SVG, with a semantic
shape/arrow vocabulary and 6 selectable visual styles (brand-light, brand-dark,
terminal, blueprint, cream, mono). Use this for diagrams of structure, flow, or
relationships — NOT for photographic or illustrative images (use an
image-generation skill for those).
Use when 用户提到 画架构图、架构图、流程图、时序图、序列图、状态图、状态机、
ER图、类图、思维导图、出图、画图、可视化、画一张图、画个图、draw diagram、
architecture diagram、flowchart、sequence diagram。
version: 1.0.0
ER图、类图、思维导图、出图、画图、可视化、画一张图、画个图、图表风格、
暗色风格图、蓝图风格图、奶油风格图、draw diagram、architecture diagram、flowchart、sequence diagram。
version: 1.1.0
type: procedural
risk_level: low
status: enabled
@@ -24,7 +25,7 @@ tags:
- visualization
metadata:
author: desirecore
updated_at: '2026-05-30'
updated_at: '2026-05-31'
i18n:
default_locale: en-US
source_locale: zh-CN
@@ -35,17 +36,17 @@ metadata:
name: 技术架构图生成
short_desc: 用 Mermaid 画品牌一致的架构图/流程图/时序图，对话内即时渲染
description: >-
当用户希望把描述转成技术图时使用此技能——架构图、流程图、时序图、状态机、ER 图、类图或思维导图。生成符合 DesireCore 3+2 设计令牌与语义形状/箭头词汇表的 Mermaid，对话内即时渲染为 SVG。用于结构、流程或关系类图，而非写实摄影/插画类图片（后者请用文生图技能）。用户提到 画架构图、架构图、流程图、时序图、序列图、状态图、状态机、ER图、类图、思维导图、出图、画图、可视化、画一张图、画个图。
当用户希望把描述转成技术图时使用此技能——架构图、流程图、时序图、状态机、ER 图、类图或思维导图。生成带语义形状/箭头词汇表的 Mermaid，对话内即时渲染为 SVG，并提供 6 套可选视觉风格（brand-light/brand-dark/terminal/blueprint/cream/mono）。用于结构、流程或关系类图，而非写实摄影/插画类图片（后者请用文生图技能）。用户提到 画架构图、架构图、流程图、时序图、序列图、状态图、状态机、ER图、类图、思维导图、出图、画图、可视化、画一张图、画个图、图表风格、暗色风格图、蓝图风格图、奶油风格图。
body: ./SKILL.zh-CN.md
source_hash: 'sha256:1f74e524df631a67'
source_hash: 'sha256:137c70e6c64841a3'
translated_by: human
en-US:
name: Tech Diagram Generator
short_desc: Draw brand-consistent architecture/flow/sequence diagrams with Mermaid, rendered inline in chat
description: >-
Use this skill when the user wants to turn a description into a technical diagram — architecture diagrams, flowcharts, sequence diagrams, state machines, ER diagrams, class diagrams, or mind maps. Generates brand-consistent Mermaid that the DesireCore chat renders inline as SVG, styled with the DesireCore 3+2 design tokens and a semantic shape/arrow vocabulary. Use this for diagrams of structure, flow, or relationships — not for photographic or illustrative images.
Use this skill when the user wants to turn a description into a technical diagram — architecture diagrams, flowcharts, sequence diagrams, state machines, ER diagrams, class diagrams, or mind maps. Generates Mermaid with a semantic shape/arrow vocabulary that the DesireCore chat renders inline as SVG, with 6 selectable visual styles (brand-light/brand-dark/terminal/blueprint/cream/mono). Use this for diagrams of structure, flow, or relationships — not for photographic or illustrative images.
body: ./SKILL.md
source_hash: 'sha256:1f74e524df631a67'
source_hash: 'sha256:137c70e6c64841a3'
translated_by: human
market:
icon: >-
@@ -68,11 +69,11 @@ market:
# tech-diagram Skill
Turn a natural-language description into a brand-consistent technical diagram.
You write **Mermaid** in your reply; the DesireCore chat renders it inline as SVG.
The point of this skill is consistency: every diagram uses the same DesireCore
3+2 palette and the same semantic shape/arrow vocabulary, so diagrams look like
they belong to one product.
Turn a natural-language description into a polished technical diagram. You write
**Mermaid** in your reply; the DesireCore chat renders it inline as SVG. The point
of this skill is consistency: a fixed semantic shape/arrow vocabulary plus a set
of six self-contained visual styles (default `brand-light`), so every diagram is
coherent and on-style.
## When to Use
@@ -86,44 +87,63 @@ image-generation skill (e.g. dashscope-image-gen, minimax-image-gen).
These are non-negotiable. Violating them produces off-brand or unrendered diagrams.
1. **Every diagram MUST start with the brand `%%{init}%%` directive.** The chat's
global Mermaid theme is hardcoded to dark; the init directive overrides it per
diagram so output is light and brand-consistent. Use exactly:
```
%%{init: {'theme':'base','themeVariables':{'primaryColor':'#F0F5FF','primaryBorderColor':'#007AFF','primaryTextColor':'#1d1d1f','lineColor':'#6e6e73','fontFamily':'-apple-system,SF Pro Text,Noto Sans SC,sans-serif'}}}%%
```
2. **Color ONLY from the DesireCore 3+2 system via `classDef`.** Never use Mermaid
default colors or any non-3+2 hex. The five classes below are the only palette:
```
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
```
Values come from the DesireCore app codebase (`app/theme/tokens/index.ts` —
green `#34C759` / blue `#007AFF` / purple `#AF52DE` / orange `#FF9500` / red
`#FF3B30` — and `cardBgColors` / `cardBorderColors`; these app paths are not in
this market repo). Pick the class by the same rule as `agent-colors.ts`:
system/generic → blue, knowledge/learning → purple, business/execution → green,
project-management/warning → orange, error → red.
1. **Every diagram MUST start with a style's `%%{init}%%` directive** (it overrides
the chat's hardcoded-dark global theme). Default to `brand-light` unless the user
asks for another (see **Styles** below). The presets in `references/styles.md` are
full **flowchart** skeletons (`%%{init}%%` + `flowchart TD` + five `classDef`s):
for a flowchart, paste the whole block; for any other type (`sequenceDiagram` /
`stateDiagram-v2` / `erDiagram` / `classDiagram` / `mindmap`), copy **only the
first `%%{init}%%` line** — the `flowchart TD` + `classDef` block is
flowchart-specific and the `%%{init}%%` line alone gives them the style's canvas
and font.
2. **In a flowchart, color every node via the five `classDef`s, never with ad-hoc
hex** (other diagram types just inherit the style's `%%{init}%%` canvas + font;
the `classDef` block is flowchart-specific). The class names — `agent` / `system` / `biz` /
`warn` / `error` — are identical across all styles, so the flowchart body never
changes when the style does. Pick a node's class by its role: system/generic →
`system`, knowledge/learning → `agent`, business/execution → `biz`,
project-management/warning/decision → `warn`, error/failure → `error`.
3. **Use the semantic shapes below**, not arbitrary ones.
4. **Quote any node label that contains punctuation, parentheses, or `/`** to avoid
Mermaid parse errors, e.g. `A["Query / Retrieve"]`.
## Styles
Six selectable visual styles live in `references/styles.md`; each is a
ready-to-paste **flowchart** header (`%%{init}%%` + five `classDef`s; for
non-flowchart types copy only the `%%{init}%%` line, per rule 1). Switching style
swaps only the header — the node/edge body stays the same.
| Style | Look | Good for |
|-------|------|----------|
| `brand-light` (default) | white canvas, DesireCore 3+2 accents | blogs, slides, docs |
| `brand-dark` | near-black canvas, 3+2 accents | matches the app's dark mode |
| `terminal` | `#0f0f1a`, neon accents, monospace | GitHub / dev articles |
| `blueprint` | deep-blue canvas, cyan/white, monospace | architecture specs |
| `cream` | warm cream canvas, clay/sage/plum | Anthropic-flavored decks |
| `mono` | pure white, grayscale | Notion / wiki |
Pick by the user's words ("暗色/dark", "蓝图/blueprint", "奶油/cream",
"极简/mono", "极客/terminal", or "风格 N / style N"); otherwise use `brand-light`.
Diagrams are user-facing artifacts, so the non-`brand-*` palettes intentionally
step outside the app's 3+2 color rule (which governs product UI, not exported
diagrams). Each preset is internally consistent.
## Semantic Vocabulary
Shape carries meaning (see `references/semantic-vocabulary.md` for the full table):
Class colors vary by style; only the role-to-class mapping is fixed.
| Concept | Mermaid shape | classDef |
|---------|---------------|----------|
| Agent / 智能体 | hexagon `id{{...}}` | agent (purple) |
| DesireCore core / system | rounded `id(...)` | system (blue) |
| LLM / model | rounded `id(⚡ ...)` | system (blue) |
| Business / execution node | rect `id[...]` | biz (green) |
| Memory / store | cylinder `id[(...)]` | system (blue) |
| User | stadium `id([...])` | biz (green) |
| Decision / branch | diamond `id{...}` | warn (orange) |
| Agent / 智能体 | hexagon `id{{...}}` | agent |
| DesireCore core / system | rounded `id(...)` | system |
| LLM / model | rounded `id(⚡ ...)` | system |
| Business / execution node | rect `id[...]` | biz |
| Memory / store | cylinder `id[(...)]` | system |
| User | stadium `id([...])` | biz |
| Decision / branch | diamond `id{...}` | warn |
| External service | dashed `subgraph` | — |
## Arrow / Flow Encoding
@@ -154,7 +174,8 @@ MUST be valid. Keep node labels short — long text breaks the layout.
## Common Mistakes
- ❌ Omitting `%%{init}%%` → the diagram inherits the global dark theme.
- ❌ Hardcoding non-3+2 hex or Tailwind default colors instead of the `classDef`s.
- ❌ Omitting the style header → the diagram inherits the global dark theme.
- ❌ Ad-hoc hex on nodes instead of the chosen style's five `classDef`s.
- ❌ Mixing two styles' headers in one diagram.
- ❌ Overlong node labels that overflow the layout.
- ❌ Unquoted labels with `()`, `/`, or CJK punctuation → Mermaid parse failure.

53
skills/tech-diagram/SKILL.zh-CN.md
View File

@@ -2,7 +2,7 @@
# tech-diagram 技能
把自然语言描述转成品牌一致的技术图。你在回复中写 **Mermaid**，DesireCore 对话会即时渲染为 SVG。本技能的核心价值是一致性：每张图都用同一套 DesireCore 3+2 配色和同一套语义形状/箭头词汇表，让所有图看起来像出自同一个产品。
把自然语言描述转成精致的技术图。你在回复中写 **Mermaid**，DesireCore 对话会即时渲染为 SVG。本技能的核心价值是一致性：固定的语义形状/箭头词汇表，加上六套自洽的视觉风格（默认 `brand-light`），让每张图都连贯且统一。
## 何时使用
@@ -14,35 +14,39 @@
以下规则不可妥协，违反会产出偏离品牌或无法渲染的图。
1. **每张图必须以品牌 `%%{init}%%` 指令开头。** 对话的全局 Mermaid 主题写死为暗色；init 指令按图覆盖它，从而输出浅色且品牌一致。固定使用：
```
%%{init: {'theme':'base','themeVariables':{'primaryColor':'#F0F5FF','primaryBorderColor':'#007AFF','primaryTextColor':'#1d1d1f','lineColor':'#6e6e73','fontFamily':'-apple-system,SF Pro Text,Noto Sans SC,sans-serif'}}}%%
```
2. **配色只能取自 DesireCore 3+2 体系，通过 `classDef` 绑定。** 禁止使用 Mermaid 默认色或任何非 3+2 色值。下面五个 class 是唯一允许的色板：
```
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
```
色值来自 DesireCore app 代码库（`app/theme/tokens/index.ts`：green `#34C759` / blue `#007AFF` / purple `#AF52DE` / orange `#FF9500` / red `#FF3B30`，以及 `cardBgColors` / `cardBorderColors`；这些 app 路径不在本 market 仓库内）。选 class 的规则与 `agent-colors.ts` 一致：系统/通用→blue，知识/学习→purple，业务/执行→green，项目管理/警示→orange，错误→red。
1. **每张图必须以某风格的 `%%{init}%%` 指令开头**（用它覆盖对话写死的暗色全局主题）。除非用户另有要求，默认用 `brand-light`（见下方**风格**）。`references/styles.md` 的预设是完整的 **flowchart** 骨架（`%%{init}%%` + `flowchart TD` + 五个 `classDef`）：画 flowchart 时整块复制；画其他类型（`sequenceDiagram` / `stateDiagram-v2` / `erDiagram` / `classDiagram` / `mindmap`）时**只复制首行 `%%{init}%%`**——`flowchart TD` + `classDef` 块是 flowchart 专用，仅 `%%{init}%%` 首行即可给它们风格的底色与字体。
2. **flowchart 内每个节点都用这五个 `classDef` 上色，不要临时写 hex**（其他图类型只继承风格的 `%%{init}%%` 底色与字体；`classDef` 块是 flowchart 专用）。类名——`agent` / `system` / `biz` / `warn` / `error`——在所有风格里都相同，所以换风格时 flowchart 图体完全不用改。按角色选类：系统/通用→`system`，知识/学习→`agent`，业务/执行→`biz`，项目管理/警示/决策→`warn`，错误/失败→`error`。
3. **使用下面的语义形状**，不要随意选形状。
4. **标签含标点、括号或 `/` 时必须加引号**，避免 Mermaid 解析失败，例如 `A["查询 / 检索"]`。
## 风格
六套可选视觉风格放在 `references/styles.md`，每套是一段现成的 **flowchart** 头部（`%%{init}%%` + 五个 `classDef`；非 flowchart 图类型只复制 `%%{init}%%` 首行，见规则 1）。换风格只换头部，节点/连线图体不变。
| 风格 | 外观 | 适用 |
|------|------|------|
| `brand-light`（默认） | 白底、DesireCore 3+2 强调色 | 博客、幻灯片、文档 |
| `brand-dark` | 近黑底、3+2 强调色 | 与 app 暗色模式一致 |
| `terminal` | `#0f0f1a`、霓虹强调、等宽字 | GitHub / 开发者文章 |
| `blueprint` | 深蓝底、青/白、等宽字 | 架构规范 |
| `cream` | 暖奶油底、赤褐/鼠尾草/紫 | Anthropic 风演示 |
| `mono` | 纯白、灰阶 | Notion / Wiki |
按用户措辞选（"暗色/dark"、"蓝图/blueprint"、"奶油/cream"、"极简/mono"、"极客/terminal"，或"风格 N / style N"），否则用 `brand-light`。图表是用户产物，所以非 `brand-*` 的调色板**有意**跳出 app 的 3+2 色彩规则（该规则约束产品 UI，不约束导出的图）。每套预设内部自洽。
## 语义词汇表
形状本身承载含义（完整表见 `references/semantic-vocabulary.md`）：
形状本身承载含义（完整表见 `references/semantic-vocabulary.md`）。类的颜色随风格变化，固定的只是"角色→类"映射：
| 概念 | Mermaid 形状 | classDef |
|------|-------------|----------|
| Agent / 智能体 | 六边形 `id{{...}}` | agent (purple) |
| DesireCore 核心 / 系统 | 圆角 `id(...)` | system (blue) |
| LLM / 模型 | 圆角 `id(⚡ ...)` | system (blue) |
| 业务 / 执行节点 | 矩形 `id[...]` | biz (green) |
| 记忆 / 存储 | 圆柱 `id[(...)]` | system (blue) |
| 用户 | 体育场形 `id([...])` | biz (green) |
| 决策 / 分支 | 菱形 `id{...}` | warn (orange) |
| Agent / 智能体 | 六边形 `id{{...}}` | agent |
| DesireCore 核心 / 系统 | 圆角 `id(...)` | system |
| LLM / 模型 | 圆角 `id(⚡ ...)` | system |
| 业务 / 执行节点 | 矩形 `id[...]` | biz |
| 记忆 / 存储 | 圆柱 `id[(...)]` | system |
| 用户 | 体育场形 `id([...])` | biz |
| 决策 / 分支 | 菱形 `id{...}` | warn |
| 外部服务 | 虚线 `subgraph` | — |
## 箭头与流编码
@@ -64,7 +68,8 @@ DesireCore 自身 Pattern 的现成 Mermaid 放在 `references/templates.md`：*
## 常见错误
- ❌ 漏掉 `%%{init}%%` → 图会沿用全局暗色主题。
- ❌ 硬编码非 3+2 色值或 Tailwind 默认色，而非用 `classDef`。
- ❌ 漏掉风格头部 → 图会沿用全局暗色主题。
- ❌ 在节点上临时写 hex，而非用所选风格的五个 `classDef`。
- ❌ 一张图里混用两套风格的头部。
- ❌ 节点标签过长撑爆布局。
- ❌ 含 `()`、`/` 或中文标点的标签未加引号 → Mermaid 解析失败。

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