Back to Details

mermaid

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Mermaid

Mermaid

Produce a valid, well-structured Mermaid diagram from the user's source material and intent. Pick the right diagram type, keep it readable, and emit it in a fenced 
mermaid
code block.
根据用户的源材料和需求生成有效、结构清晰的Mermaid图表。选择合适的图表类型，确保可读性，并将其放在带围栏的
mermaid
代码块中。

Reference Files

参考文件

FileRead When
references/diagram-selection.md
Default: choosing the right diagram type; one-line samples for each
references/common-diagrams.md
Generating flowchart, sequence, class, state, ER, or C4 diagrams
references/specialized-diagrams.md
Generating mindmap, gantt, timeline, journey, gitGraph, pie, quadrant, requirement, xychart, sankey, block, or architecture diagrams
references/generation-guidelines.md
Any diagram: label limits, structure rules, source-type strategies, anti-patterns
references/styling-and-output.md
Theming, classDef styling, frontmatter config, export, rendering targets
文件读取时机
references/diagram-selection.md
默认场景：选择合适的图表类型；包含每种类型的单行示例
references/common-diagrams.md
生成流程图、序列图、类图、状态图、ER图或C4图时
references/specialized-diagrams.md
生成思维导图、甘特图、时间线、用户旅程图、gitGraph、饼图、象限图、需求图、xychart、sankey、block或架构图时
references/generation-guidelines.md
生成任何图表时：标签限制、结构规则、源类型策略、反模式
references/styling-and-output.md
主题设置、classDef样式、前置配置、导出、渲染目标相关内容

Workflow

工作流程

Copy this checklist to track progress:
text
Mermaid progress:
- [ ] Step 1: Pick diagram type
- [ ] Step 2: Gather source material
- [ ] Step 3: Draft structure
- [ ] Step 4: Generate Mermaid syntax
- [ ] Step 5: Validate
- [ ] Step 6: Present output
复制以下检查清单来跟踪进度：
text
Mermaid进度:
- [ ] 步骤1：选择图表类型
- [ ] 步骤2：收集源材料
- [ ] 步骤3：草拟结构
- [ ] 步骤4：生成Mermaid语法
- [ ] 步骤5：验证
- [ ] 步骤6：呈现输出

Step 1: Pick diagram type

步骤1：选择图表类型

If the user named a type (e.g. "sequence diagram"), use it. Otherwise load 
references/diagram-selection.md
and pick from its matrix. Common defaults:
ContentDiagram
Process with decisions, branching logic
flowchart
Messages between actors/systems over time
sequenceDiagram
States and transitions (order lifecycle, workflow)
stateDiagram-v2
Database / domain entities with relationships
erDiagram
System architecture by level
C4Context
/ 
C4Container
/ 
C4Component
Concept hierarchy, brainstorm, overview
mindmap
Ask the user to confirm only if two types fit equally well.
如果用户指定了类型（例如“序列图”），则使用该类型。否则加载
references/diagram-selection.md
，从其矩阵中选择。常见默认规则：
内容图表类型
包含决策、分支逻辑的流程
flowchart
参与者/系统间随时间传递的消息
sequenceDiagram
状态与转换（订单生命周期、工作流）
stateDiagram-v2
带有关系的数据库/领域实体
erDiagram
按层级划分的系统架构
C4Context
/ 
C4Container
/ 
C4Component
概念层级、头脑风暴、概览
mindmap
仅当两种类型同样适用时，才请求用户确认。

Step 2: Gather source material

步骤2：收集源材料

For topics or specs, ask one clarifying question if scope is ambiguous (e.g., "overview or detailed breakdown?"), then commit. For codebases, files, or conversations, pull only what's needed to name the nodes and relationships — don't scan more than needed.
对于主题或规格说明，如果范围模糊，可提出一个澄清问题（例如“需要概览还是详细分解？”），然后确定内容。对于代码库、文件或对话，仅提取命名节点和关系所需的内容——无需过度扫描。

Step 3: Draft structure

步骤3：草拟结构

Sketch the diagram's bones before writing syntax:
  • List the nodes/entities/steps.
  • List the relationships/messages/transitions.
  • For flowchart, sequence, state: identify start and end. For ER, class: identify multiplicity. For C4: pick the right level.
  • Apply the size and label rules in 
    references/generation-guidelines.md
    — typically 5-20 nodes for readability.
在编写语法前，先勾勒图表的框架：
  • 列出节点/实体/步骤。
  • 列出关系/消息/转换。
  • 对于流程图、序列图、状态图：确定起点和终点。对于ER图、类图：确定多重性。对于C4图：选择合适的层级。
  • 遵循
    references/generation-guidelines.md
    中的尺寸和标签规则——通常为5-20个节点以保证可读性。

Step 4: Generate Mermaid syntax

步骤4：生成Mermaid语法

Open the relevant reference file for the chosen type and write the diagram inside a fenced 
mermaid
code block. Keep syntax minimal; add styling only when requested (see 
references/styling-and-output.md
).
打开所选类型对应的参考文件，在带围栏的
mermaid
代码块中编写图表。保持语法简洁；仅在用户要求时添加样式（参见
references/styling-and-output.md
）。

Step 5: Validate

步骤5：验证

Run the common checks below, plus type-specific checks from the corresponding reference file. Revise and re-check if any fail.
Common checks:
  • First line declares the correct diagram type (e.g. 
    flowchart TD
    , 
    sequenceDiagram
    )
  • No unescaped 
    ()[]{}
    or stray colons inside plain text labels
  • No blank lines inside the diagram block (breaks some renderers)
  • Every referenced node / participant / entity is defined before use where required
  • Direction and flow are consistent (top-down or left-right, not both)
  • Label text is short enough to render (aim for under 6 words; see per-type rules)
  • Total size is within the readable limit for the type (15-20 for flowchart/class; up to 40 for mindmap)
执行以下通用检查，以及对应参考文件中的类型特定检查。如有任何检查失败，修改后重新检查。
通用检查：
  • 第一行声明正确的图表类型（例如
    flowchart TD
    、
    sequenceDiagram
    ）
  • 纯文本标签中没有未转义的
    ()[]{}
    或多余的冒号
  • 图表块内无空行（会导致部分渲染器出错）
  • 所有引用的节点/参与者/实体在需要时已提前定义
  • 方向和流程一致（自上而下或自左而右，不可混合）
  • 标签文本足够短以保证渲染效果（目标为6词以内；参见各类型规则）
  • 总尺寸在该类型的可读范围内（流程图/类图为15-20个节点；思维导图最多40个）

Step 6: Present output

步骤6：呈现输出

Output the diagram in a fenced 
mermaid
code block. Note where it renders: GitHub/GitLab markdown, Mermaid Live Editor (
mermaid.live
), Notion, Obsidian, VS Code with a Mermaid preview extension.
If the user requests a file, write to a 
.md
file containing the fenced block. For image export, point them to Mermaid Live Editor or 
@mermaid-js/mermaid-cli
(see 
references/styling-and-output.md
).
将图表放在带围栏的
mermaid
代码块中输出。注明可渲染的平台：GitHub/GitLab Markdown、Mermaid Live Editor（
mermaid.live
）、Notion、Obsidian、安装了Mermaid预览扩展的VS Code。
如果用户请求文件，将带围栏的代码块写入
.md
文件。如需导出图片，引导用户使用Mermaid Live Editor或
@mermaid-js/mermaid-cli
（参见
references/styling-and-output.md
）。

Translation examples

翻译示例

How to turn typical source material into a diagram. Pattern: identify the type first, then extract nouns (nodes) and verbs (edges / transitions).
如何将典型源材料转换为图表。模式：先确定类型，再提取名词（节点）和动词（边/转换）。

Prose → sequenceDiagram

prose → sequenceDiagram

Source: "User hits Checkout. Server validates the cart, reserves stock, and charges Stripe. On success, the order is saved and a confirmation email is queued."
mermaid
sequenceDiagram
    actor User
    participant Server
    participant Stripe
    participant Email
    User->>+Server: POST /checkout
    Server->>Server: Validate cart
    Server->>Server: Reserve stock
    Server->>+Stripe: Charge
    Stripe-->>-Server: Success
    Server->>Server: Save order
    Server->>+Email: Queue confirmation
    Email-->>-Server: Queued
    Server-->>-User: 200 Order confirmed
源材料："用户点击结账。服务器验证购物车、预留库存，并向Stripe发起扣款。成功后，保存订单并将确认邮件加入队列。"
mermaid
sequenceDiagram
    actor User
    participant Server
    participant Stripe
    participant Email
    User->>+Server: POST /checkout
    Server->>Server: Validate cart
    Server->>Server: Reserve stock
    Server->>+Stripe: Charge
    Stripe-->>-Server: Success
    Server->>Server: Save order
    Server->>+Email: Queue confirmation
    Email-->>-Server: Queued
    Server-->>-User: 200 Order confirmed

Spec → stateDiagram

规格说明 → stateDiagram

Source: "Orders start as Pending. Payment success moves to Paid; failure moves to Cancelled. Paid orders ship, then complete. Cancelled orders are terminal."
mermaid
stateDiagram-v2
    [*] --> Pending
    Pending --> Paid : payment success
    Pending --> Cancelled : payment failed
    Paid --> Shipped : ship
    Shipped --> Completed : deliver
    Completed --> [*]
    Cancelled --> [*]
源材料："订单初始状态为Pending。支付成功转为Paid；支付失败转为Cancelled。Paid订单发货后变为Completed。Cancelled订单为终态。"
mermaid
stateDiagram-v2
    [*] --> Pending
    Pending --> Paid : payment success
    Pending --> Cancelled : payment failed
    Paid --> Shipped : ship
    Shipped --> Completed : deliver
    Completed --> [*]
    Cancelled --> [*]

Scoring matrix → quadrantChart

评分矩阵 → quadrantChart

Source: "Rate campaigns on reach (low/high) and engagement (low/high). A is high-reach, mid-engagement. B is low-reach, low-engagement. C is high-reach, high-engagement."
mermaid
quadrantChart
    title Campaign reach vs engagement
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 Expand
    quadrant-2 Promote
    quadrant-3 Re-evaluate
    quadrant-4 Improve
    A: [0.8, 0.5]
    B: [0.2, 0.2]
    C: [0.8, 0.8]
源材料："按触达范围（低/高）和参与度（低/高）评估营销活动。A是高触达、中等参与度。B是低触达、低参与度。C是高触达、高参与度。"
mermaid
quadrantChart
    title Campaign reach vs engagement
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 Expand
    quadrant-2 Promote
    quadrant-3 Re-evaluate
    quadrant-4 Improve
    A: [0.8, 0.5]
    B: [0.2, 0.2]
    C: [0.8, 0.8]

Anti-patterns

反模式

  • Forcing everything into one diagram — split into multiple focused diagrams instead.
  • Sentences as labels — extract keywords or move detail into child nodes / notes.
  • Mixing two diagram types in one fenced block (not supported).
  • Icons or Font Awesome references when the rendering target doesn't support them.
  • Over-styling before the structure is validated.
  • Guessing syntax — load the reference file for the chosen type.
  • 强行将所有内容塞进一个图表——应拆分为多个聚焦的图表。
  • 使用完整句子作为标签——提取关键词或将细节移至子节点/注释中。
  • 在一个代码块中混合两种图表类型（不被支持）。
  • 在不支持的渲染目标中使用图标或Font Awesome引用。
  • 在结构验证前过度添加样式。
  • 猜测语法——加载所选类型的参考文件。

Related skills

相关技能

  • presentation-creator
    for slide decks that include diagrams
  • define-architecture
    for detailed architecture decisions beyond visual diagrams
  • docs-writing
    for embedding diagrams into technical documentation
  • presentation-creator
    ：用于制作包含图表的幻灯片
  • define-architecture
    ：用于超出可视化图表的详细架构决策
  • docs-writing
    ：用于将图表嵌入技术文档