JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 587
  • Score
    100M100P100Q103055F
  • License ISC

Package Exports

  • gatsby-remark-mermaid

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gatsby-remark-mermaid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

gatsby-remark-mermaid

npm

Create mermaid graphs and diagrams in your markdown files.

Install

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

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

Name Default Description
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