remark-mermaidjs

A remark plugin to render mermaid diagrams using puppeteer.

Installation

npm install remark-mermaidjs

Since this package uses Google Chrome, You have to make sure it’s available on your system. You may also need to install some additional packages, such as fonts, depending on your system. For more information, see the Puppeteer troubleshooting guide.

Usage

This plugin takes all code blocks marked as mermaid and renders them as an inline SVG.

import { readFile } from 'node:fs/promises';

import { remark } from 'remark';
import remarkMermaid from 'remark-mermaidjs';

const { value } = await remark()
  .use(remarkMermaid, {
    launchOptions: {
      executablePath: 'path/to/chrome/executable',

      /* More puppeteer launch options */
    },

    /* More options */
  })
  .process(await readFile('readme.md'));

console.log(value);

Options

`errorFallback`

Create a fallback node if processing of a mermaid diagram fails. If nothing is returned, the code block is removed. The function receives the following arguments:

node: The mdast code node that couldn’t be rendered.
error: The error message that was thrown.
file: The file on which the error occurred.

`launchOptions`

These options are passed to puppeteer.launch().

Note: This options is required in Node.js. In the browser this option is unused.

`svgo`

These options are passed to the SVGO constructor. Set to false to disable minifying using SVGO completely.

Note: This options is only supported in Node.js. In the browser this option is unused.

`mermaidOptions`

The mermaid options to use.

Note: This options is only supported in Node.js. In the browser this option is unused. If you use this in a browser, call mermaid.initialize() manually.

Frando / remark-mermaidjs