Guides

Mermaid Diagrams

Dev Portal supports rendering Mermaid diagrams in two ways:

Approach	Pros	Cons
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:

Code
npm install mermaid

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


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

Outside of MDX, import from zudoku/mermaid:


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

See the Mermaid component documentation for full details.

Build-Time Rendering

Install dependencies:

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

Add to zudoku.build.ts:


zudoku.build.ts
import rehypeMermaid from "rehype-mermaid";

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

Use in markdown with code blocks:

Code
```mermaid
graph TD;
    A-->B;
```

Edit this page

Last modified on May 29, 2026

Custom pages Multiple APIs

Guides

Mermaid Diagrams

Dev Portal supports rendering Mermaid diagrams in two ways:

Approach	Pros	Cons
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:

Code
npm install mermaid

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


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

Outside of MDX, import from zudoku/mermaid:


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

See the Mermaid component documentation for full details.

Build-Time Rendering

Install dependencies:

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

Add to zudoku.build.ts:


zudoku.build.ts
import rehypeMermaid from "rehype-mermaid";

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

Use in markdown with code blocks:

Code
```mermaid
graph TD;
    A-->B;
```

Edit this page

Last modified on May 29, 2026

Custom pages Multiple APIs