diff --git a/skills/tech-diagram/SKILL.md b/skills/tech-diagram/SKILL.md index 2c823d6..6284d90 100644 --- a/skills/tech-diagram/SKILL.md +++ b/skills/tech-diagram/SKILL.md @@ -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. diff --git a/skills/tech-diagram/SKILL.zh-CN.md b/skills/tech-diagram/SKILL.zh-CN.md index b93e0a5..0716331 100644 --- a/skills/tech-diagram/SKILL.zh-CN.md +++ b/skills/tech-diagram/SKILL.zh-CN.md @@ -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 解析失败。 diff --git a/skills/tech-diagram/references/semantic-vocabulary.md b/skills/tech-diagram/references/semantic-vocabulary.md index 7dc926a..d44f0f7 100644 --- a/skills/tech-diagram/references/semantic-vocabulary.md +++ b/skills/tech-diagram/references/semantic-vocabulary.md @@ -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. diff --git a/skills/tech-diagram/references/styles.md b/skills/tech-diagram/references/styles.md new file mode 100644 index 0000000..6840a89 --- /dev/null +++ b/skills/tech-diagram/references/styles.md @@ -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 +``` diff --git a/skills/tech-diagram/references/templates.md b/skills/tech-diagram/references/templates.md index f772622..55e78f1 100644 --- a/skills/tech-diagram/references/templates.md +++ b/skills/tech-diagram/references/templates.md @@ -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