Make nice graphs in your markdown files in gatsbyjs, using mermaid
Clone or download
Latest commit f1f4297 Apr 14, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore siplified. babel isn;t doing anything Nov 15, 2017
.travis.yml Create .travis.yml Apr 1, 2018 travis badge Apr 1, 2018
gatsby-browser.js Update gatsby-browser.js Mar 2, 2018
graph.png github screwed up svg, use png Nov 15, 2017
index.js better theming Nov 15, 2017
package-lock.json 0.2.2 Apr 13, 2018
package.json 0.2.2 Apr 13, 2018


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: