Gatsby-remark-mermaid NPM

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.

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.