配置 Mermaid
环境: client
此配置仅在客户端环境下运行。在引入包时,请确保浏览器的兼容性。
创建一份包含以下内容的 ./setup/mermaid.ts
文件:
ts
import { defineMermaidSetup } from '@slidev/types'
export default defineMermaidSetup(() => {
return {
theme: 'forest',
}
})
在配置时,你可以为 Mermaid 提供一些自定义的设置。关于更多配置详情,请参考其类型定义和相关文档。
配置 theme/styles
如果你想要创建自定义的 Mermaid 主题或样式,可以通过定义 themeVariables
实现,如下例所示:
ts
import { defineMermaidSetup } from '@slidev/types'
export default defineMermaidSetup(() => {
return {
theme: 'base',
themeVariables: {
// General theme variables
noteBkgColor: '#181d29',
noteTextColor: '#F3EFF5cc',
noteBorderColor: '#404551',
// Sequence diagram variables
actorBkg: '#0E131F',
actorBorder: '#44FFD2',
actorTextColor: '#F3EFF5',
actorLineColor: '#F3EFF5',
signalColor: '#F3EFF5',
signalTextColor: '#F3EFF5',
}
}
})
你可以在 Mermaid 主题配置 上找到全部的主题变量。