Add Mermaid Diagrams to Starlight

This guide helps you add Mermaid Diagrams to Starlight.

Step-by-step Guide

Section titled Step-by-step Guide

1. Start by installing the rehype-mermaid ↗ and playwright ↗:

   npm

   npm add rehype-mermaid playwright playwright-chromium

   pnpm

   pnpm add rehype-mermaid playwright playwright-chromium

   Yarn

   yarn add rehype-mermaid playwright playwright-chromium

   Bun

   bun add rehype-mermaid playwright playwright-chromium

2. Set up Astro configuration:

   astro.config.mjs

   // ...
   import rehypeMermaid from "rehype-mermaid";
   
   export default defineConfig({
     markdown: {
       syntaxHighlight: {
         type: "shiki",
         excludeLangs: ["mermaid", "math"],
       },
       rehypePlugins: [rehypeMermaid],
     },
     integrations: [
       starlight({
         // ...
         customCss: ["./src/styles/mermaid.css"],
       })
     ],
   })

Example

Section titled Example

src/content/docs/example.mdx

```mermaid
graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
```

The code above generates the following on the page:

Resources

Section titled Resources

1. Mermaid diagrams in markdown ↗