grm

gatsby-remark-mermaid

Add pretty graphs using mermaid and server-side rendering.

Showing:

Popularity

Downloads/wk

1.7K

GitHub Stars

14

Maintenance

Last Commit

1yr ago

Contributors

3

Package

Dependencies

2

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Gatsby Graph

Readme

gatsby-remark-mermaid

npm

Create mermaid graphs and diagrams in your markdown files.

This plugin uses server-side rendering. This means the svg is rendered on build time instead of having a runtime dependency on mermaid.

Install

npm install --save gatsby-remark-mermaid gatsby-transformer-remark puppeteer

How to Use

This plugin processes markdown code blocks. If you have any other plugins which do that such as syntax highlighters, make sure you import this before those plugins.

Add the plugin to your gatsby-config.js.

{
  plugins: [
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          'gatsby-remark-mermaid'
        ]
      }
    }
  ]
}

Now you can use markdown:

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

To generate:

example

Options

NameDefaultDescription
language"mermaid"Set this value to the identifier which will replace the code block. If you set it to "graph" then you can create graphs using ```graph ....
theme"default"Set this value to one of "dark", "neutral", "forrest", or "default". You can preview the themes in the Live Editor
viewport.width200Set this value to the desired viewport width while rendering the svg
viewport.height200Set this value to the desired viewport height while rendering the svg
mermaidOptions{}This object specifies the configuration options passed to mermaid.initialize()

Defaults

{
  plugins: [
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
             resolve: 'gatsby-remark-mermaid',
             options: {
                 language: 'mermaid',
                 theme: 'default',
                 viewport: {
                     width: 200,
                     height: 200
                 },
                 mermaidOptions: {
                     themeCSS: ".node rect { fill: cornflowerblue; }"
                 }
             }
          }
        ]
      }
    }
  ]
}

Credits

This package was originally developed by Thomas Biesaart.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial