Mermaid短代码使用指南

Mermaid 是一个帮助您从文本生成图表和流程图的库，其方式类似于Markdown。

只需将您的Mermaid代码插入到 mermaid 短代码中即可。

流程图示例

{{< mermaid align="left" >}}
graph LR;
    A[硬边] -->|链接文本| B(圆边)
    B --> C{决策}
    C -->|一| D[结果一]
    C -->|二| E[结果二]
{{< /mermaid >}}

渲染为

graph LR; A[硬边] -->|链接文本| B(圆边) B --> C{决策} C -->|一| D[结果一] C -->|二| E[结果二]

序列图示例

{{< mermaid >}}
sequenceDiagram
    participant 爱丽丝
    participant 鲍勃
    爱丽丝->>约翰: 约翰你好，你怎么样？
    loop 健康检查
        约翰->约翰: 对抗疑病症
    end
    Note right of 约翰: 理性思考 <br/>占上风...
    约翰-->爱丽丝: 太棒了！
    约翰->鲍勃: 你呢？
    鲍勃-->约翰: 非常好！
{{< /mermaid >}}

渲染为

sequenceDiagram participant 爱丽丝 participant 鲍勃 爱丽丝->>约翰: 约翰你好，你怎么样？ loop 健康检查 约翰->约翰: 对抗疑病症 end Note right of 约翰: 理性思考
占上风... 约翰-->爱丽丝: 太棒了！ 约翰->鲍勃: 你呢？ 鲍勃-->约翰: 非常好！

甘特图示例

{{< mermaid >}}
gantt
        dateFormat  YYYY-MM-DD
        title 为Mermaid添加甘特图功能
        section A部分
        已完成任务            :done,    des1, 2014-01-06,2014-01-08
        活动任务               :active,  des2, 2014-01-09, 3d
        未来任务               :         des3, after des2, 5d
        未来任务2               :         des4, after des3, 5d
        section 关键任务
        关键线中已完成任务 :crit, done, 2014-01-06,24h
        实现解析器和jison          :crit, done, after des1, 2d
        为解析器创建测试             :crit, active, 3d
        关键线中未来任务        :crit, 5d
        为渲染器创建测试           :2d
        添加到mermaid                      :1d
{{< /mermaid >}}

渲染为

gantt dateFormat YYYY-MM-DD title 为Mermaid添加甘特图功能 section A部分 已完成任务 :done, des1, 2014-01-06,2014-01-08 活动任务 :active, des2, 2014-01-09, 3d 未来任务 : des3, after des2, 5d 未来任务2 : des4, after des3, 5d section 关键任务 关键线中已完成任务 :crit, done, 2014-01-06,24h 实现解析器和jison :crit, done, after des1, 2d 为解析器创建测试 :crit, active, 3d 关键线中未来任务 :crit, 5d 为渲染器创建测试 :2d 添加到mermaid :1d

类图示例

{{< mermaid >}}
classDiagram
  Class01 <|-- AveryLongClass : 酷
  Class03 *-- Class04
  Class05 o-- Class06
  Class07 .. Class08
  Class09 --> C2 : 我在哪里？
  Class09 --* C3
  Class09 --|> Class07
  Class07 : equals()
  Class07 : Object[] elementData
  Class01 : size()
  Class01 : int chimp
  Class01 : int gorilla
  Class08 <--> C2: 酷标签
{{< /mermaid >}}

渲染为

classDiagram Class01 <|-- AveryLongClass : 酷 Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : 我在哪里？ Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: 酷标签

Git示例

{{< mermaid >}}
gitGraph
  commit
  commit
  branch develop
  checkout develop
  commit
  commit
  checkout main
  merge develop
  commit
  commit
{{< /mermaid >}}

渲染为

gitGraph commit commit branch develop checkout develop commit commit checkout main merge develop commit commit

状态图

{{< mermaid >}}
stateDiagram-v2
  open: 开门
  closed: 关门
  locked: 锁门
  open   --> closed: 关
  closed --> locked: 锁
  locked --> closed: 解锁
  closed --> open: 开
{{< /mermaid >}}

渲染为

stateDiagram-v2 open: 开门 closed: 关门 locked: 锁门 open --> closed: 关 closed --> locked: 锁 locked --> closed: 解锁 closed --> open: 开

最佳实践与注意事项

  1. 所有短代码必须包裹在div容器中以确保响应式布局
  2. 使用align参数控制图表对齐方式（left/center/right）
  3. 复杂图表建议添加theme参数指定样式
  4. 若出现渲染异常，检查Mermaid版本是否≥8.8.0

技术实现细节

{{< mermaid theme="neutral" >}}
  <!-- 此处插入Mermaid代码 -->
{{< /mermaid >}}

对应的HTML结构为：

1
2
3
4
5

<div class="mermaid-container" data-align="center">
  <div class="mermaid" data-theme="neutral">
    <!-- 生成的SVG内容 -->
  </div>
</div>