plugin-mermaid
@renovamen/vuepress-plugin-mermaid@next 插件，用于在 VuePress 2 的 Markdown 中使用 Mermaid，从而在文章中加入流程图、状态图、时序图、甘特图等。
安装
pnpm install @renovamen/vuepress-plugin-mermaid@next
yarn add @renovamen/vuepress-plugin-mermaid@next
npm install @renovamen/vuepress-plugin-mermaid@next
然后在 .vuepress/config.js 中引入这个插件：
const { mermaidPlugin } = require("@renovamen/vuepress-plugin-mermaid");
module.exports = {
plugins: [
mermaidPlugin()
]
}
配置项
token
类型：
string默认值：
"mermaidjs"详情：自定义代码块的 token
theme
类型：
string默认值：
"default"详情：主题（这里是所有 Mermaid 支持的主题）
darkTheme
类型：
string默认值：
"dark"详情：夜间模式主题，只在 darkSelector 和 darkClass 都被设置了的情况下有效
darkSelector
类型：
string默认值：
undefined详情
- 一个 CSS 选择器，插件会根据它选择一个 HTML 元素，然后通过 darkClass 来判断当前是否为夜间模式
- 对于默认主题和 Gungnir 主题，这一项需要被设为
html
darkClass
类型：
string默认值：
undefined详情
- 一个类名，插件会根据它来判断当前是否为夜间模式
- 对于默认主题和 Gungnir 主题，这一项需要被设为
dark
提示
在启用夜间模式时，默认主题和 Gungnir 主题会在 html 元素上添加一个类名 dark。
点击右下角的模式切换按钮，体验 Mermaid 的主题切换。
使用
代码块的 token info 需要为 mermaidjs（如果你使用了自定义代码块 token，则需要为 options.token），例子：
代码
```mermaidjs
sequenceDiagram
Alice->John: Hello John, how are you?
loop Every minute
John-->Alice: Great!
end
```
更详细的用法可以参考 Mermaid 文档。