mirror of https://git.openapi.site/https://github.com/desirecore/market.git synced 2026-06-06 05:50:41 +08:00

Files

Yige f4dfe8e32f 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 个图块，全部通过

2026-05-30 23:56:27 +08:00

7.9 KiB

Raw Blame History

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, 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。

1.0.0

procedural

low

enabled

false

diagram

mermaid

architecture

flowchart

visualization

author

updated_at

i18n

desirecore

2026-05-30

default_locale

source_locale

locales

zh-CN

en-US

zh-CN

en-US

name	short_desc	description	body	source_hash	translated_by
技术架构图生成	用 Mermaid 画品牌一致的架构图/流程图/时序图，对话内即时渲染	当用户希望把描述转成技术图时使用此技能——架构图、流程图、时序图、状态机、ER 图、类图或思维导图。生成符合 DesireCore 3+2 设计令牌与语义形状/箭头词汇表的 Mermaid，对话内即时渲染为 SVG。用于结构、流程或关系类图，而非写实摄影/插画类图片（后者请用文生图技能）。用户提到画架构图、架构图、流程图、时序图、序列图、状态图、状态机、ER图、类图、思维导图、出图、画图、可视化、画一张图、画个图。	./SKILL.zh-CN.md	sha256:1f74e524df631a67	human

name	short_desc	description	body	source_hash	translated_by
Tech Diagram Generator	Draw brand-consistent architecture/flow/sequence diagrams with Mermaid, rendered inline in chat	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.	./SKILL.md	sha256:1f74e524df631a67	human

icon

short_desc

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.

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'}}}%%

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.
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"].

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	`-.->
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 classDefs.
❌ Overlong node labels that overflow the layout.
❌ Unquoted labels with (), /, or CJK punctuation → Mermaid parse failure.

7.9 KiB Raw Blame History Unescape Escape