vitepress中使用mermaid

Epicurus2025-03-25 15:02

vitepress中使用mermaid

使用方法

安装依赖

css 复制代码

npm i vitepress-plugin-mermaid mermaid -D

config.ts文件修改如下：

javascript 复制代码

// import { defineConfig } from 'vitepress'
import { withMermaid } from 'vitepress-plugin-mermaid'

// export default defineConfig({
//   
// })

export default withMermaid({
  // 将defineConfig下的配置内容放在此处即可正常使用mermaid
})

.md文件中使用mermaid页面即可绘制流程

css 复制代码

```mermaid
graph LR
    A[源代码] -->|Rollup 打包| B[优化后的静态资源]
    C[依赖库] -->|代码分割| B
```

页面展示效果

graph LR A[源代码] -->|Rollup 打包| B[优化后的静态资源] C[依赖库] -->|代码分割| B