vitepress中使用mermaid

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
相关推荐
灵感__idea2 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴3 小时前
Mix
前端·webgl
代码续发3 小时前
前端组件梳理
前端
试图让你心动4 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码4 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记4 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏4 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数5 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante5 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam5 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript