Vitepress使用Mermaid图表

插件vitepress-plugin-mermaid

https://github.com/emersonbottero/vitepress-plugin-mermaid

WARNING

🚧 From version 2.0.11 and up charts that uses dates don't work in dev mod but still work after build! You can still highlight mermaid code with mmd as language

插件安装

npm i vitepress-plugin-mermaid mermaid -D

插件设置

Add wrapper

// .vitepress/config.js
import { withMermaid } from 'vitepress-plugin-mermaid'

export default withMermaid({
    // your existing vitepress config...
    // optionally, you can pass MermaidConfig
    mermaid: {
      // refer https://mermaid.js.org/config/setup/modules/mermaidAPI.html#mermaidapi-configuration-defaults for options
    },
});

在MD文件中使用

输入

```mermaid
flowchart LR
  Start --> Stop

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

Mermaid使用文档

https://mermaid.js.org/
在线编辑器： https://mermaid.live/

Mermaid下载链接

Github链接： https://github.com/mermaid-js/mermaid/tree/develop
Gitee镜像： https://gitee.com/mirrors/mermaid