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

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.

License

MIT © Remco Haszing