在 VitePress 中安装 mermaid 画 UML，并推荐在线 mermaid 编辑网址

介绍

在 VitePress 中如果想要画流程图，饼图，UML类图等一系列图的话，VitePress 原生是不支持的，但是我们可以使用 Mermaid 的vitepress插件，名字是 vitepress-plugin-mermaid。下面介绍如何安装和使用

插件的 Github 地址

插件使用文档

插件安装

npm i vitepress-plugin-mermaid mermaid -D

导入配置

在.vitepress 文件夹下的 config.js 文件中编辑，如下：

注意你原本的import { defineConfig } from "vitepress";和export default defineConfig要替换成vitepress-plugin-mermaid推荐的格式。下面注释 后面[!code --]表示删除该行，[!code ++]表示增加该行，帮助理解。

// .vitepress/config.js
//import { defineConfig } from "vitepress";// [!code --]
import {
    withMermaid } from "vitepress-plugin-mermaid";// [!code ++]

//export default defineConfig({// [!code --]
export default withMermaid({
   // [!code ++]
  // 你的原本配置
  // 可选地，可以传入MermaidConfig
  mermaid: {
   
    // 配置参考： https://mermaid.js.org/config/setup/modules/mermaidAPI.html#mermaidapi-configuration-defaults
  },
  // 可选地使用MermaidPluginConfig为插件本身设置额外的配置
  mermaidPlugin: {
   
    class: "mermaid my-class" // 为父容器设置额外的CSS类
  }
});

使用

直接在 markdown 文档中使用mermaid即可，语法规则见 mermaid 文档

mermaid 在线编辑地址，可以一边编辑，一边实时预览

示例

流程图

示例一：

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

示例二：</