Mermaid diagrams

Render Mermaid flowcharts and diagrams directly in Markdown.

The mermaid feature marks Mermaid fenced code blocks at build time. zfb replaces the code block with a <div class="mermaid">; diagram rendering happens client-side when your Mermaid runtime processes that element.

Enable

// zfb.config.ts
export default defineConfig({
  markdown: {
    features: {
      mermaid: true,
    },
  },
});

Usage

Write a fenced code block with the mermaid language tag:

```mermaid
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
```

At build time, the plugin replaces the <pre><code class="language-mermaid"> block with:

<div class="mermaid" data-mermaid="">graph TD; ...</div>

The data-mermaid attribute and mermaid class signal a client-side Mermaid renderer to process the block. The raw diagram source is embedded verbatim (angle brackets and other characters are NOT HTML-escaped) so the renderer receives the unmodified Mermaid DSL.

Visitor ordering

MermaidPlugin runs before SyntectPlugin in the hast phase. This ensures syntect does not attempt to syntax-highlight mermaid blocks; once the <pre> is replaced by a <div class="mermaid">, syntect's <pre><code> selector no longer matches it.