Yige
f2e48ca1a5
## 概述 / 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 风格骨架），全部通过
9.2 KiB
name, description, version, type, risk_level, status, disable-model-invocation, tags, metadata, market
| name | description | version | type | risk_level | status | disable-model-invocation | tags | metadata | market | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| tech-diagram | 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, 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。 | 1.1.0 | procedural | low | enabled | false |
|
|
|
tech-diagram Skill
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
Use this skill for diagrams of structure, flow, or relationships: architecture, flowchart, sequence, state machine, ER, class diagram, mind map.
Do NOT use it for photographic or illustrative pictures — route those to an image-generation skill (e.g. dashscope-image-gen, minimax-image-gen).
Mandatory Style Rules
These are non-negotiable. Violating them produces off-brand or unrendered diagrams.
- Every diagram MUST start with a style's
%%{init}%%directive (it overrides the chat's hardcoded-dark global theme). Default tobrand-lightunless the user asks for another (see Styles below). The presets inreferences/styles.mdare full flowchart skeletons (%%{init}%%+flowchart TD+ fiveclassDefs): for a flowchart, paste the whole block; for any other type (sequenceDiagram/stateDiagram-v2/erDiagram/classDiagram/mindmap), copy only the first%%{init}%%line — theflowchart TD+classDefblock is flowchart-specific and the%%{init}%%line alone gives them the style's canvas and font. - In a flowchart, color every node via the five
classDefs, never with ad-hoc hex (other diagram types just inherit the style's%%{init}%%canvas + font; theclassDefblock 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. - Use the semantic shapes below, not arbitrary ones.
- 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 classDefs; 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 |
| 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
| Flow | Mermaid edge |
|---|---|
| Primary data flow | --> solid |
| Memory write / persistence | -.-> dotted |
| Async event | `-.-> |
| Feedback / retry loop | back-edge --> to an earlier node |
Built-in Templates
Ready-to-use Mermaid for DesireCore's own patterns lives in
references/templates.md: Agent architecture, Delegate 6 modes,
three-tier conversation memory (active → recent L0/L1 → archive L2), and the
relation graph (6 edge types: delegate / mention / co_task / hierarchy /
seek_help / escalation). Adapt them to the user's subject instead of starting
from scratch.
Output Convention
Emit the diagram directly in your reply inside a fenced code block whose info
string is mermaid (open the fence with three backticks immediately followed by
the word mermaid). The chat renders it to SVG automatically; on a syntax error it
falls back to showing the raw code (the mermaid-fallback path), so the source
MUST be valid. Keep node labels short — long text breaks the layout.
Common Mistakes
- ❌ Omitting the style header → the diagram inherits the global dark theme.
- ❌ Ad-hoc hex on nodes instead of the chosen style's five
classDefs. - ❌ Mixing two styles' headers in one diagram.
- ❌ Overlong node labels that overflow the layout.
- ❌ Unquoted labels with
(),/, or CJK punctuation → Mermaid parse failure.