@beoe/rehype-mermaid

Rehype plugin to generate Mermaid diagrams in place of code fences. Example:

Diagram

Use two fingers to pan and zoom

+ ↺ -

Markdown

```mermaid
flowchart LR
start --> stop
```

Installation

npm

npm i @beoe/rehype-mermaid playwright

pnpm

pnpm add @beoe/rehype-mermaid playwright

yarn

yarn add @beoe/rehype-mermaid playwright

You may want also add this to package.json:

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

Usage

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

const html = await unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeMermaid, {
    /* options */
  })
  .use(rehypeStringify)
  .process(`markdown`);

Check out other options.

Configuration

You probaly want to use file strategy and one of dark schemes (class or media). Unless you need interactivity.

Other

Accepts other options like, css and mermaidConfig, which are documented in mermaid-isomorphic.

rehype-mermaid

There is battle-tested and well maintained plugin rehype-mermaid. Both plugins use the same mermaid-isomorphic behind the scene.