gridsome-remark-mermaid

Use mermaid code blocks in your markdown file to generate diagrams with Gridsome and remark.

This plugin is heavily inspired by gatsby-remark-mermaid. It uses server-side rendering to generate inline SVG code during the build process.

Install

npm install gridsome-plugin-remark-mermaid

Usage

Configure gridsome.config.js to use the plugin. Make sure this plugin is imported before any other plugin that processes code blocks such as @gridsome/remark-prismjs or gridsome-plugin-remark-shiki.

module.exports = {
  siteName: 'Gridsome Blog',
  siteDescription: 'A simple blog designed with Gridsome',
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'content/posts/**/*.md',
        typeName: 'Post',
        route: '/blog/:slug'
      }
    }
  ],
  transformers: {
    remark: {
      plugins: [
        // Add remark-mermaid plugin
        'gridsome-plugin-remark-mermaid',
        '@gridsome/remark-prismjs'
      ]
    }
  },
}

Then use mermaid code blocks in your markdown to generate diagrams:

graph LR
  A --> B
  B --> C

Styling

The generated SVG is wrapped in <div class="mermaid"></div> to help you customize your styles.

When using the removeStyleTags attribute, you will need to import your Mermaid themes yourself. You can find an example project here.

Options

| Name | Default | Description | | --------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | language | "mermaid" | The code block language triggering a SVG generation. Change it to "graph" to create diagrams with ~~~graph. | | theme | "default" | This value can be set to "dark", "neutral", "forest" or "default". Try them on the mermaid editor. | | viewport.width | 200 | The desired viewport width | | viewport.height | 200 | The desired viewport height | | removeStyleTags | false | Remove all style tags from the generated SVG. If you use this option you will have to import the mermaid css at some point | | id | mermaid-<currentTime> | Sets the identifier of the SVG. Defaults to a unique ID based on the time of generation | | mermaidOptions | {} | Pass some custom mermaid configuration options to mermaid.initialize() |

The default options are:

{
  language: "mermaid",
  theme: "default",
  viewport: {
    width: 200,
    height: 200
  },
  id: null,
  removeStyleTags: false,
  mermaidOptions: {}
}