@gnomad-cloud/gridsome-plugin-remark-diagrams v0.2.8

Draw diagrams in markdown

This gridsome plugin allows you to draw diagrams by sketching the symbols using markdown. We embed the mermaid libary to do the drawing itself.

Once installed, we can embed mermaid code blocks in our markdown.

To generate a simple diagram, we can write:

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

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

• See mermaid for more examples.

• Try out the mermaid editor.

Install

Follow the generic instructions for gridsome first.

bash
npm install gridsome-plugin-remark-diagrams

Usage

Configure gridsome.config.js to use the plugin.

  transformers: {
    remark: {
      plugins: [
        'gridsome-plugin-remark-diagrams',
        // existing plugins //
      ]
    }
  }

Advanced 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.

Options

The default options are:

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

Provenance / Credits

This plugin was forked, upgraded and adopted with gratitude to the original authors.

You can find the original versions here:

• Forked and upgraded from gridsome-remark-mermaid
• Originally inspired by gatsby-remark-mermaid