remark-mermaid

A remark plugin to render mermaid diagrams. No playwright!

This plugin is heavily based on the original (now archived) remark-mermaidjs and is designed to work more easily with the latest versions of mermaid.

Table of Contents

• Installation
• Usage
• API
  • unified().use(remarkMermaid, options?)
• Related Projects

Installation

npm install remark-mermaid

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, {
    /* Options */
  })
  .process(await readFile("readme.md"));

console.log(value);

API

This package has a default export remarkMermaid.

unified().use(remarkMermaid, 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.

mermaidConfig

The mermaid config to use.

prefix

A custom prefix to use for Mermaid IDs. (string, default: mermaid)

Related Projects

• mermaid is the library that's used to render the diagrams.
• remark-mermaidjs is the original plugin that this project is based on.
• rehype-mermaid is a more powerful plugin that does the same as remark-mermaidjs, but as a rehype plugin. It also uses Playwright to render the diagrams.