Configure Mermaid

Environment: client

This setup function will only run on client side. Make sure the browser compatibility when importing packages.

Create ./setup/mermaid.ts with the following content:

setup/mermaid.ts

import {  } from '@slidev/types'

export default (() => {
  return {
    : 'forest',
  }
})

The return value should be the custom configs for Mermaid. Refer to the Mermaid documentation or the type definition for the full config list.

Custom theme/styles

In case you want to create your custom Mermaid themes or styles, you can do this by defining themeVariables like in the following example:

import {  } from '@slidev/types'

export default (() => {
  return {
    : 'base',
    : {
      // General theme variables
      : '#181d29',
      : '#F3EFF5cc',
      : '#404551',

      // Sequence diagram variables
      : '#0E131F',
      : '#44FFD2',
      : '#F3EFF5',
      : '#F3EFF5',
      : '#F3EFF5',
      : '#F3EFF5',
    }
  }
})

You can find all theme variables on the Mermaid Theme Configuration page.