Alt

    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