market/skills/tech-diagram/SKILL.md

license, name, description, version, type, risk_level, status, disable-model-invocation, tags, metadata, market

license	name	description	version	type	risk_level	status	disable-model-invocation	tags	metadata	market
MIT	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, 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。	1.1.1	procedural	low	enabled	true	diagram mermaid architecture flowchart visualization	author updated_at i18n desirecore 2026-07-14 default_locale source_locale locales zh-CN en-US en-US zh-CN zh-CN en-US name short_desc description body source_hash translated_by 技术架构图生成 用 Mermaid 画品牌一致的架构图/流程图/时序图，对话内即时渲染 当用户希望把描述转成技术图时使用此技能——架构图、流程图、时序图、状态机、ER 图、类图或思维导图。生成带语义形状/箭头词汇表的 Mermaid，对话内即时渲染为 SVG，并提供 6 套可选视觉风格（brand-light/brand-dark/terminal/blueprint/cream/mono）。用于结构、流程或关系类图，而非写实摄影/插画类图片（后者请用文生图技能）。用户提到 画架构图、架构图、流程图、时序图、序列图、状态图、状态机、ER图、类图、思维导图、出图、画图、可视化、画一张图、画个图、图表风格、暗色风格图、蓝图风格图、奶油风格图。 ./SKILL.zh-CN.md sha256:137c70e6c64841a3 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 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. ./SKILL.md sha256:137c70e6c64841a3 human	icon short_desc category maintainer channel <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> Draw brand-consistent architecture/flow/sequence diagrams with Mermaid development name verified DesireCore Official true latest

tech-diagram Skill

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

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 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 classDefs): 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 classDefs, 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 classDefs; 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
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

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 the style header → the diagram inherits the global dark theme.
• ❌ Ad-hoc hex on nodes instead of the chosen style's five classDefs.
• ❌ Mixing two styles' headers in one diagram.
• ❌ Overlong node labels that overflow the layout.
• ❌ Unquoted labels with (), /, or CJK punctuation → Mermaid parse failure.