Community Plugin

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.js.

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: {
              launchOptions: {
                executablePath: 'path/to/chrome/executable'
              },
              svgo: {
                plugins: [{ name: 'removeTitle', active: false }]
              },
              mermaidOptions: {
                theme: 'neutral',
                themeCSS: '.node rect { fill: #fff; }'
              }
            }
          }
        ]
      }
    }
  ]
}

Options

The configuration options for this plugin are the same as for remark-mermaidjs.

launchOptions.executablePath: String path to the chrome executable that puppeteer uses to render the mermaid diagrams to SVGs. (Required)
mermaidOptions: Configuration object for customizing themes, styles, and properties of all mermaid diagrams. See mermaidAPI configuration options. (Optional)
svgo: Override default optimizations for the generated SVG files. Set to false to disable minifying using SVGO completely. See defaultSVGOOptions).) (Optional)

NOTE: You can use the Mermaid Live Editor to preview the theme options described below.

How it works

This plugin processes markdown code blocks set with mermaid as the language. It relies

For example, this mermaid code block:

```mermaid
graph LR
  install[Install Plugin]
  install --> configure[Configure Plugin]
  configure --> draw[Draw Fancy Diagrams]
```

Generates the following SVG image:

example

Credits