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