Mermaid diagrams in Markdown

There are many diagramming languages (see text-to-diagram ↗). Mermaid ↗ seems to be popular, as it is supported by GitHub.

There are two options:

rehype-mermaid - the original plugin. Battle-tested and well supported.
@beoe/rehype-mermaid ↗ - my experiment. It is based on mermaid-isomorphic (the same one used by rehype-mermaid). It also adds:
- Selector-based dark mode ↗. Used by Starlight and others.
- Cache to prevent the permanent launch of a headless browser.
- Out-of-the-box compatibility with pan and zoom "plugin".

@beoe/rehype-mermaid

Installation

Install dependencies

pnpm add @beoe/rehype-mermaid playwright

Update package.json

"scripts": {
  "postinstall": "playwright install chromium"
}

Configure Astro. See note about Rehype Plugins for Code.

import { rehypeMermaid } from "@beoe/rehype-mermaid";

export default defineConfig({
  markdown: {
    rehypePlugins: [
      [
        rehypeMermaid,
        {
          strategy: "file",      // alternatively use "data-url"
          fsPath: "public/beoe", // add this to gitignore
          webPath: "/beoe",
          darkScheme: "class",
        },
      ],
    ],
  },
});

Add line to .gitignore:
```
public/beoe
```

Add CSS for dark mode:

html[data-theme="light"] .beoe-dark {
  display: none;
}

html[data-theme="dark"] .beoe-light {
  display: none;
}

Optional install dependency for cache
Terminal window
```
pnpm add @beoe/cache
```

Optional configure cache

import { getCache } from "@beoe/cache";

const cache = await getCache();

export default defineConfig({
  markdown: {
    rehypePlugins: [
      [
        rehypeMermaid,
        {
          strategy: "file",
          fsPath: "public/beoe",
          webPath: "/beoe",
          darkScheme: "class",
          cache,
        },
      ],
    ],
  },
});

Optional add pan and zoom for diagrams

Example

```mermaid alt="example of the Mermaid diagram"
flowchart LR
    Start --> Stop
```