| 1 | # Configure Mermaid |
| 2 | |
| 3 | <Environment type="client" /> |
| 4 | |
| 5 | Create `./setup/mermaid.ts` with the following content: |
| 6 | |
| 7 | ```ts twoslash [setup/mermaid.ts] |
| 8 | import { defineMermaidSetup } from '@slidev/types' |
| 9 | |
| 10 | export default defineMermaidSetup(() => { |
| 11 | return { |
| 12 | theme: 'forest', |
| 13 | } |
| 14 | }) |
| 15 | ``` |
| 16 | |
| 17 | The return value should be the custom configs for [Mermaid](https://mermaid.js.org/). Refer to the [Mermaid documentation](https://mermaid.js.org/config/schema-docs/config.html) or the type definition for the full config list. |
| 18 | |
| 19 | ## Custom theme/styles |
| 20 | |
| 21 | In case you want to create your custom Mermaid themes or styles, you can do this by defining `themeVariables` like in the following example: |
| 22 | |
| 23 | ```ts twoslash |
| 24 | import { defineMermaidSetup } from '@slidev/types' |
| 25 | |
| 26 | export default defineMermaidSetup(() => { |
| 27 | return { |
| 28 | theme: 'base', |
| 29 | themeVariables: { |
| 30 | // General theme variables |
| 31 | noteBkgColor: '#181d29', |
| 32 | noteTextColor: '#F3EFF5cc', |
| 33 | noteBorderColor: '#404551', |
| 34 | |
| 35 | // Sequence diagram variables |
| 36 | actorBkg: '#0E131F', |
| 37 | actorBorder: '#44FFD2', |
| 38 | actorTextColor: '#F3EFF5', |
| 39 | actorLineColor: '#F3EFF5', |
| 40 | signalColor: '#F3EFF5', |
| 41 | signalTextColor: '#F3EFF5', |
| 42 | } |
| 43 | } |
| 44 | }) |
| 45 | ``` |
| 46 | |
| 47 | You can find all theme variables on the [Mermaid Theme Configuration](https://mermaid.js.org/config/theming.html) page. |
| 48 |