tech-diagram

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, 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。 version: 1.1.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-31' i18n: default_locale: en-US source_locale: zh-CN locales:
  • zh-CN
  • en-US zh-CN: name: 技术架构图生成 short_desc: 用 Mermaid 画品牌一致的架构图/流程图/时序图，对话内即时渲染 description: >- 当用户希望把描述转成技术图时使用此技能——架构图、流程图、时序图、状态机、ER 图、类图或思维导图。生成带语义形状/箭头词汇表的 Mermaid，对话内即时渲染为 SVG，并提供 6 套可选视觉风格（brand-light/brand-dark/terminal/blueprint/cream/mono）。用于结构、流程或关系类图，而非写实摄影/插画类图片（后者请用文生图技能）。用户提到 画架构图、架构图、流程图、时序图、序列图、状态图、状态机、ER图、类图、思维导图、出图、画图、可视化、画一张图、画个图、图表风格、暗色风格图、蓝图风格图、奶油风格图。 body: ./SKILL.zh-CN.md source_hash: 'sha256:137c70e6c64841a3' 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 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. body: ./SKILL.md source_hash: 'sha256:137c70e6c64841a3' translated_by: human market: icon: >- 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 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.

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.

Arrow / Flow Encoding

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.