mirror of
https://git.openapi.site/https://github.com/desirecore/market.git
synced 2026-06-06 08:30:42 +08:00
feat: add tech-diagram skill (Mermaid 技术图生成) (#18)
## 概述 / Summary 新增市场技能 **tech-diagram**:把自然语言描述转成品牌一致的技术图(架构图/流程图/时序图/状态机/ER/类图/思维导图),在 DesireCore 对话内复用现有 Mermaid 渲染管线即时渲染为 SVG。 Adds a market skill **tech-diagram** that turns natural-language descriptions into brand-consistent technical diagrams, rendered inline as SVG by the existing Mermaid pipeline in the DesireCore chat. 灵感来源 / Inspired by [fireworks-tech-graph](https://github.com/yizhiyanhua-ai/fireworks-tech-graph) 的三个设计思路:语义词汇表即数据、风格系统化、领域 Pattern 内置——并落到 DesireCore 自己的 3+2 设计令牌与领域模型上。 ## 改动 / Changes - `skills/tech-diagram/SKILL.md` + `SKILL.zh-CN.md`:双语技能正文(强制风格规则 + 语义词汇表 + 输出约定) - `skills/tech-diagram/references/semantic-vocabulary.md`:概念→Mermaid 形状→3+2 classDef 完整映射 - `skills/tech-diagram/references/templates.md`:4 个 DesireCore 领域模板(Agent 架构 / Delegate 6 模式 / 三层记忆 / 关系图谱)+ 时序图示例 - `builtin-skills.json`:加入 `tech-diagram` - `manifest.json`:`version` 1.2.1→1.2.2,`stats.totalSkills` 21→22,`lastUpdated` ## 设计要点 / Design - **风格一致性**:每张图以 `%%{init}%%` 注入品牌主题(覆盖对话全局暗色),用 5 个 `classDef` 绑定 DesireCore 3+2 配色(green/blue/purple + warning orange / error red)。 - **语义优于视觉**:Agent→六边形、系统/记忆→圆角/圆柱、决策→菱形;箭头编码主数据流/记忆写入/异步/层级/上报。 - **领域内置**:直接对照 `delegate.ts` / `conversation-memory.ts` / `relations/projector.ts` 给出可套用模板。 ## 验证 / Verification - ✅ `scripts/i18n/validate-i18n.py`:无 i18n 问题 - ✅ 用 app 同版本 **mermaid 11.15.0**(securityLevel: loose)解析 `templates.md` 全部 5 个图块,全部通过
This commit is contained in:
70
skills/tech-diagram/SKILL.zh-CN.md
Normal file
70
skills/tech-diagram/SKILL.zh-CN.md
Normal file
@@ -0,0 +1,70 @@
|
||||
<!-- locale: zh-CN -->
|
||||
|
||||
# tech-diagram 技能
|
||||
|
||||
把自然语言描述转成品牌一致的技术图。你在回复中写 **Mermaid**,DesireCore 对话会即时渲染为 SVG。本技能的核心价值是一致性:每张图都用同一套 DesireCore 3+2 配色和同一套语义形状/箭头词汇表,让所有图看起来像出自同一个产品。
|
||||
|
||||
## 何时使用
|
||||
|
||||
用于**结构、流程或关系**类的图:架构图、流程图、时序图、状态机、ER 图、类图、思维导图。
|
||||
|
||||
不要用它生成写实摄影或插画类图片——那类需求请转给文生图技能(如 dashscope-image-gen、minimax-image-gen)。
|
||||
|
||||
## 强制风格规则
|
||||
|
||||
以下规则不可妥协,违反会产出偏离品牌或无法渲染的图。
|
||||
|
||||
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。
|
||||
3. **使用下面的语义形状**,不要随意选形状。
|
||||
4. **标签含标点、括号或 `/` 时必须加引号**,避免 Mermaid 解析失败,例如 `A["查询 / 检索"]`。
|
||||
|
||||
## 语义词汇表
|
||||
|
||||
形状本身承载含义(完整表见 `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) |
|
||||
| 外部服务 | 虚线 `subgraph` | — |
|
||||
|
||||
## 箭头与流编码
|
||||
|
||||
| 流类型 | Mermaid 边 |
|
||||
|--------|-----------|
|
||||
| 主数据流 | `-->` 实线 |
|
||||
| 记忆写入 / 持久化 | `-.->` 点线 |
|
||||
| 异步事件 | `-.->|async|` 点线 + 标签 |
|
||||
| 反馈 / 重试循环 | 指回前序节点的回边 `-->` |
|
||||
|
||||
## 内置模板
|
||||
|
||||
DesireCore 自身 Pattern 的现成 Mermaid 放在 `references/templates.md`:**Agent 架构图**、**Delegate 6 模式**、**三层对话记忆**(active → recent L0/L1 → archive L2)、**关系图谱**(6 种边:delegate / mention / co_task / hierarchy / seek_help / escalation)。请基于这些模板改写为用户的主题,而非从零开始。
|
||||
|
||||
## 输出约定
|
||||
|
||||
直接在回复中用栅栏代码块输出图,info string 为 `mermaid`(用三个反引号紧跟单词 mermaid 开启栅栏)。对话会自动渲染为 SVG;语法出错时会降级展示原始代码(`mermaid-fallback` 路径),所以源码必须合法。节点标签要短——文字过长会撑坏布局。
|
||||
|
||||
## 常见错误
|
||||
|
||||
- ❌ 漏掉 `%%{init}%%` → 图会沿用全局暗色主题。
|
||||
- ❌ 硬编码非 3+2 色值或 Tailwind 默认色,而非用 `classDef`。
|
||||
- ❌ 节点标签过长撑爆布局。
|
||||
- ❌ 含 `()`、`/` 或中文标点的标签未加引号 → Mermaid 解析失败。
|
||||
Reference in New Issue
Block a user