Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


Greenkeeper badge

Travis Status

Make nice graphs in your markdown files in gatsbyjs, using mermaid.

Here is a basic demo, which also uses my starter template.


npm install --save gatsby-transformer-remark gatsby-remark-graph

How to use

// In your gatsby-config.js
plugins: [
    resolve: 'gatsby-transformer-remark',
    options: {
      plugins: [
          resolve: 'gatsby-remark-graph',
          options: {
            // this is the language in your code-block that triggers mermaid parsing
            language: 'mermaid', // default
            theme: 'default' // could also be dark, forest, or neutral

Make sure you put it before other plugins (especially those that work with code blocks, like prism.)

Usage in Markdown

graph LR
    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D

Will give you a graph that looks like this:


© 2023 Gatsby, Inc.