Nicer Package Manager

    gridsome-plugin-remark-mermaid

    1.0.1 • Public • Published

    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: {}
    }

    Install

    npm i gridsome-plugin-remark-mermaid

    DownloadsWeekly Downloads

    67

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    37.4 kB

    Total Files

    11

    Last publish

    Collaborators

    • brainc0ke