Zudoku
Guides

Mermaid Diagrams

Zudoku supports rendering Mermaid diagrams in two ways:

ApproachProsCons
Build-Time (rehype-mermaid)• Faster page loads
• No client-side JS needed
• SEO friendly		• Requires playwright
• Slower builds
• Static only
Client-Side (<Mermaid />)• Fast builds
• Can be dynamic
• No build dependencies		• Requires client-side JS
• Slight render delay

Client-Side Rendering

For the <Mermaid /> component, install the peer dependency:

TerminalCode
npm install mermaid

Then use in your MDX files (no import needed):

ReactCode
<Mermaid
  chart={`graph TD;
    A-->B;
    A-->C;`}
/>

Outside of MDX, import from zudoku/mermaid:

ReactCode
import { Mermaid } from "zudoku/mermaid";

See the Mermaid component documentation for full details.

Build-Time Rendering

  1. Install dependencies:

    TerminalCode
    npm install rehype-mermaid
npm install -D playwright
npx playwright install

  2. Add to zudoku.build.ts:

    ReactCode
    import rehypeMermaid from "rehype-mermaid";

export default {
  rehypePlugins: (plugins) => [[rehypeMermaid, { strategy: "inline-svg" }], ...plugins],
};

  3. Use in markdown with code blocks:

    MDXCode
    ```mermaid
graph TD;
    A-->B;
```
Last modified on
Custom pagesMultiple APIs