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:
GitHub
160
skills/tech-diagram/SKILL.md
Normal file
160
skills/tech-diagram/SKILL.md
Normal file
@@ -0,0 +1,160 @@
|
||||
---
|
||||
name: tech-diagram
|
||||
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).
|
||||
Use when 用户提到 画架构图、架构图、流程图、时序图、序列图、状态图、状态机、
|
||||
ER图、类图、思维导图、出图、画图、可视化、画一张图、画个图、draw diagram、
|
||||
architecture diagram、flowchart、sequence diagram。
|
||||
version: 1.0.0
|
||||
type: procedural
|
||||
risk_level: low
|
||||
status: enabled
|
||||
disable-model-invocation: false
|
||||
tags:
|
||||
- diagram
|
||||
- mermaid
|
||||
- architecture
|
||||
- flowchart
|
||||
- visualization
|
||||
metadata:
|
||||
author: desirecore
|
||||
updated_at: '2026-05-30'
|
||||
i18n:
|
||||
default_locale: en-US
|
||||
source_locale: zh-CN
|
||||
locales:
|
||||
- zh-CN
|
||||
- en-US
|
||||
zh-CN:
|
||||
name: 技术架构图生成
|
||||
short_desc: 用 Mermaid 画品牌一致的架构图/流程图/时序图，对话内即时渲染
|
||||
description: >-
|
||||
当用户希望把描述转成技术图时使用此技能——架构图、流程图、时序图、状态机、ER 图、类图或思维导图。生成符合 DesireCore 3+2 设计令牌与语义形状/箭头词汇表的 Mermaid，对话内即时渲染为 SVG。用于结构、流程或关系类图，而非写实摄影/插画类图片（后者请用文生图技能）。用户提到 画架构图、架构图、流程图、时序图、序列图、状态图、状态机、ER图、类图、思维导图、出图、画图、可视化、画一张图、画个图。
|
||||
body: ./SKILL.zh-CN.md
|
||||
source_hash: 'sha256:1f74e524df631a67'
|
||||
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.
|
||||
body: ./SKILL.md
|
||||
source_hash: 'sha256:1f74e524df631a67'
|
||||
translated_by: human
|
||||
market:
|
||||
icon: >-
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0
|
||||
24 24" fill="none"><rect x="3" y="3" width="7" height="7" rx="1.5"
|
||||
stroke="#007AFF" stroke-width="1.5" fill="#007AFF"
|
||||
fill-opacity="0.12"/><rect x="14" y="3" width="7" height="7" rx="1.5"
|
||||
stroke="#AF52DE" stroke-width="1.5" fill="#AF52DE" fill-opacity="0.12"/><rect
|
||||
x="8.5" y="15" width="7" height="6" rx="1.5" stroke="#34C759"
|
||||
stroke-width="1.5" fill="#34C759" fill-opacity="0.12"/><path d="M6.5 10v2.5h11V10"
|
||||
stroke="#6e6e73" stroke-width="1.2"/><path d="M12 12.5V15" stroke="#6e6e73"
|
||||
stroke-width="1.2"/></svg>
|
||||
short_desc: Draw brand-consistent architecture/flow/sequence diagrams with Mermaid
|
||||
category: development
|
||||
maintainer:
|
||||
name: DesireCore Official
|
||||
verified: true
|
||||
channel: latest
|
||||
---
|
||||
|
||||
# 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.
|
||||
|
||||
## 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.
|
||||
|
||||
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.
|
||||
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"]`.
|
||||
|
||||
## Semantic Vocabulary
|
||||
|
||||
Shape carries meaning (see `references/semantic-vocabulary.md` for the full table):
|
||||
|
||||
| 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) |
|
||||
| External service | dashed `subgraph` | — |
|
||||
|
||||
## Arrow / Flow Encoding
|
||||
|
||||
| Flow | Mermaid edge |
|
||||
|------|--------------|
|
||||
| Primary data flow | `-->` solid |
|
||||
| Memory write / persistence | `-.->` dotted |
|
||||
| Async event | `-.->|async|` dotted + label |
|
||||
| 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 `%%{init}%%` → the diagram inherits the global dark theme.
|
||||
- ❌ Hardcoding non-3+2 hex or Tailwind default colors instead of the `classDef`s.
|
||||
- ❌ Overlong node labels that overflow the layout.
|
||||
- ❌ Unquoted labels with `()`, `/`, or CJK punctuation → Mermaid parse failure.
|
||||
Reference in New Issue
Block a user