gridsome-plugin-remark-mermaid v1.0.1

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

The default options are:

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