| 1 | # Configure Mermaid Renderer |
| 2 | |
| 3 | <Environment type="client" /> |
| 4 | |
| 5 | 1. The user installs the Mermaid library they want to use. e.g.) `npm install beautiful-mermaid` |
| 6 | 2. Create `./setup/mermaid-renderer.ts` with the following content: |
| 7 | |
| 8 | ```ts |
| 9 | // setup/mermaid-renderer.ts |
| 10 | import { defineMermaidRendererSetup } from '@slidev/types' |
| 11 | // example. https://github.com/lukilabs/beautiful-mermaid?tab=readme-ov-file#readme |
| 12 | import { renderMermaid } from 'beautiful-mermaid' |
| 13 | |
| 14 | export default defineMermaidRendererSetup(() => { |
| 15 | return (code, _options) => renderMermaid(code) |
| 16 | }) |
| 17 | ``` |
| 18 | |
| 19 | This setting allows you to use the 3rd party Mermaid library. Replace the `renderMermaid()` part with the render function of the library. |
| 20 |