Mermaid图表语法参考Skill mermaid-syntax

---

name: mermaid-syntax description: Mermaid图表语法的权威参考。提供图表类型、语法模式、示例和平台集成指导，用于生成准确的Mermaid图表。 allowed-tools: Read, Glob, Grep

Mermaid 语法参考

概述

Mermaid 是一个基于JavaScript的图表工具，从受Markdown启发的文本定义渲染图表。图表直接在浏览器中渲染为SVG，并由GitHub、GitLab、Azure DevOps、Obsidian和Notion原生支持。

主要优势：

• 零设置（基于浏览器渲染）
• 原生Markdown集成（图表与定义自动同步）
• 语法比PlantUML更简单
• 无外部依赖

限制：

• 定制性不如PlantUML
• C4支持是实验性的
• 无思维导图或JSON可视化

---

图表类型快速参考

类型	关键词	最适合用于
流程图	flowchart 或 graph	流程流、决策树、工作流
序列图	sequenceDiagram	API调用、请求/响应流
类图	classDiagram	OOP结构、继承、关系
状态图	stateDiagram-v2	状态机、生命周期状态
ER图	erDiagram	数据库模式、实体关系
甘特图	gantt	项目时间线、日程
饼图	pie	分布、比例
Git图	gitGraph	分支策略、提交历史
C4上下文图	C4Context	系统架构（实验性）
时间线图	timeline	时序事件

---

Markdown集成

Mermaid图表使用围栏代码块嵌入Markdown中：

```mermaid
flowchart TD
    A[开始] --> B[结束]
```

平台支持：

• GitHub：在README、问题、PR、wiki中原生渲染
• GitLab：在Markdown文件中原生渲染
• Azure DevOps：在wiki和仓库中原生渲染
• Obsidian：通过核心插件原生支持
• VS Code：通过Markdown Preview Mermaid Support扩展支持

---

快速参考卡

流程图

flowchart TD
    A[框] --> B{决策}
    B -->|是| C[动作]
    B -->|否| D[其他]

序列图

sequenceDiagram
    A->>B: 请求
    B-->>A: 响应

类图

classDiagram
    class 名称 {
        +属性 类型
        +方法() 返回
    }
    A <|-- B : 继承

状态图

stateDiagram-v2
    [*] --> 状态1
    状态1 --> 状态2 : 事件
    状态2 --> [*]

ER图

erDiagram
    实体1 ||--o{ 实体2 : 关系
    实体1 {
        类型 属性 PK
    }

---

参考

有关详细语法和完整示例，请参阅：

参考	内容	何时加载
flowchart.md	节点形状、边类型、子图	创建流程图时
sequence.md	参与者、箭头、激活、alt/loop块	创建序列图时
class.md	类、可见性、关系、基数	创建类图时
state-er.md	状态机、ER图、关系	创建状态/ER图时
special-diagrams.md	甘特图、Git图、C4、样式、常见问题	创建特殊图表时

---

测试场景

场景1：创建流程图

查询： “为用户注册过程创建Mermaid流程图”

预期： 技能激活，提供带决策节点和子图的流程图语法

场景2：创建序列图

查询： “为API认证生成Mermaid序列图”

预期： 技能激活，提供带参与者和alt/loop块的序列语法

场景3：创建ER图

查询： “为博客数据库创建Mermaid ER图”

预期： 技能激活，引导到state-er.md参考以获取实体属性和关系

---

最后更新： 2025-12-28 Mermaid版本： 10.x / 11.x

版本历史

• v1.1.0 (2025-12-28)：重构为渐进式披露 - 提取内容到references/
• v1.0.0 (2025-12-26)：初始发布