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

3.6 KiB

Raw Blame History

Semantic Vocabulary (语义词汇表)

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)

%%{init: {'theme':'base','themeVariables':{'primaryColor':'#F0F5FF','primaryBorderColor':'#007AFF','primaryTextColor':'#1d1d1f','lineColor':'#6e6e73','fontFamily':'-apple-system,SF Pro Text,Noto Sans SC,sans-serif'}}}%%

The 5 color classes (the only allowed 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

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.

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.

Shape table

Concept	Mermaid syntax	Class	Note
Agent / sub-agent	`id{{Name}}` (hexagon)	agent	the signature shape for an autonomous agent
DesireCore core / orchestrator	`id(Name)` (rounded)	system	central coordinator
LLM / model	`id(⚡ Model)` (rounded + ⚡)	system	⚡ prefix marks an LLM call
Service / tool / skill	`id[Name]` (rect)	biz	a callable capability
Business / execution step	`id[Step]` (rect)	biz	a unit of work
Memory / store / DB	`id[(Store)]` (cylinder)	system	persistent state
User / external actor	`id([User])` (stadium)	biz	the human
Decision / branch	`id{Choice?}` (diamond)	warn	a fork in control flow
External service	`subgraph Ext [External]` ... `end` + `style Ext stroke-dasharray:4 3`	—	dashed boundary = outside the system

Arrow / flow encoding

Flow type	Edge syntax	Meaning
Primary data flow	`A --> B`	the main path
Memory write / persistence	`A -.-> B`	dotted = side-effect write
Async event	`A -.->	async
Feedback / retry	`B --> A` (back-edge)	loop
Hierarchy / containment	`A --o B`	circle edge
Hard stop / escalation	`A --x B`	cross edge
Co-participation (equal peers)	`A === B`	thick link

Diagram-type cheatsheet

User intent	Mermaid header
Architecture / data flow	`flowchart TD` or `flowchart LR`
Sequence / interaction over time	`sequenceDiagram`
State machine	`stateDiagram-v2`
ER / data model	`erDiagram`
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.

3.6 KiB Raw Blame History