Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


github actions npm prettier

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.


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


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; }'


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:

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

Generates the following SVG image:



This package was originally developed by Thomas Biesaart.


MIT © Thomas Biesaart

© 2023 Gatsby, Inc.