Skip to content

配置 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 主题配置 上找到全部的主题变量。

Released under the MIT License.