介绍

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

插件的 Github 地址

插件使用文档

插件安装

npm i vitepress-plugin-mermaid mermaid -D

导入配置

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

// .vitepress/config.js
import { defineConfig } from "vitepress";// [!code --]
import { withMermaid } from "vitepress-plugin-mermaid";// [!code ++]export default defineConfig({// [!code --]
export default withMermaid({// [!code ++]// 你的原本配置// 可选地，可以传入MermaidConfigmermaid: {// 配置参考： 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 LRStart --> Stop
```

示例二：

```mermaid
flowchart TDA[Christmas] -->|Get money| B(Go shopping)B --> C{Let me think}C -->|One| D[Laptop]C -->|Two| E[iPhone]C -->|Three| F[fa:fa-car Car]
```

类图

示例 1：

```mermaid
classDiagram
class Shape
<<interface>> Shape
Shape : noOfVertices
Shape : draw()```

示例二：

```mermaid
classDiagramAnimal <|-- DuckAnimal <|-- FishAnimal <|-- ZebraAnimal : +int ageAnimal : +String genderAnimal: +isMammal()Animal: +mate()class Duck{+String beakColor+swim()+quack()}class Fish{-int sizeInFeet-canEat()}class Zebra{+bool is_wild+run()}
```

饼图

```mermaid
pie title Pets adopted by volunteers"Dogs" : 386"Cats" : 85"Rats" : 15
```

总结

本文主要介绍了 在VitePress中安装插件并使用 mermaid语法来扩展VitePress画一些图，有收获的话可以点赞哟。