gatsby-remark-mermaid

Create mermaid graphs and diagrams in your markdown files.

This plugin uses remark-mermaidjs to generate SVG diagrams at build time. The mermaid code blocks are replaced with an inline SVG in the generated HTML. This prevents any runtime dependencies on mermaid.

Table of COntents

• Installation
• Usage
• Options
  • browser
  • css
  • errorFallback
  • launchOptions
  • mermaidConfig
  • prefix
• Credits
• License

Installation

npm install gatsby-remark-mermaid gatsby-transformer-remark

Usage

Configure this plugin as a plugin of gatsby-transformer-remark.

NOTE: Make sure you add this plugin before any other plugins that process code blocks.

Example configuration

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-mermaid`,
            options: /** @type {import('gatsby-remark-mermaid').Options} */ ({
              mermaidConfig: {
                theme: 'neutral',
                themeCSS: '.node rect { fill: #fff; }'
              }
            })
          }
        ]
      }
    }
  ]
}

Options

browser

The Playwright browser to use. (object, default: chromium)

css

A URL that points to a custom CSS file to load. Use this to load custom fonts. This option is ignored in the browser. You need to include the CSS in your build manually. (string | URL)

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

The options used to launch the browser. (object)

mermaidConfig

The mermaid config to use.

prefix

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

Credits

This package was originally developed by Thomas Biesaart.

License

MIT © Thomas Biesaart