TIL: Mermaid diagrams work in Astro with rehype-mermaid

rehype-mermaid with strategy: inline-svg renders Mermaid code blocks as inline SVG at build time. No client-side JavaScript required.

Install:

npm install -D rehype-mermaid playwright
npx playwright install --with-deps chromium

Add to astro.config.mjs:

import rehypeMermaid from 'rehype-mermaid';

// inside defineConfig:
markdown: {
  rehypePlugins: [[rehypeMermaid, { strategy: 'inline-svg' }]],
}

Example diagram — the post rendering pipeline:

graph LR
    A[Markdown source] --> B[rehype-mermaid]
    B --> C[Playwright / Chromium]
    C --> D[Inline SVG in HTML]