0012. Mermaid 图表

• 1. 🎯 本节内容
• 2. 🫧 评价
• 3. 🤔 mermaid 组件如何使用？
• 4. 🔗 引用

1. 🎯 本节内容

• Mermaid 组件的基本使用

2. 🫧 评价

vitepress 默认是不带有 mermaid 支持的，但是又经常有绘制图表的需求，因此集成了 mermaid 功能。

3. 🤔 mermaid 组件如何使用？

和 mermaid 要求的语法一致。

输入：

```mermaid
flowchart LR
  Start --> Stop
```

输出：

加载图表中...

会在鼠标悬停在图表上时，显示相关控制按钮：

4. 🔗 引用

• mermaid.org 官方文档