@tianheg/gatsby-remark-mermaid v2.1.1

gatsby-remark-mermaid

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:

Options

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.