Meet npm Pro: unlimited public & private packages + package-based permissions.Learn more »

gatsby-remark-draw

1.0.16 • Public • Published

gatsby-remark-draw

npm version Build Status Maintainability Dependencies

A wrapper around some popular graph tools to generate diagrams from embedded code blocks in Markdown with Gatsby.js and Remark.

This package currently supports:

TODO:

  • Enable options to be passed to executables
  • Mermaid support
  • Other GraphViz layout engines like neato
  • Embed as img tag option
  • Tranform links to graph files

This package uses a simple (naive) mechanism - by default, read the code block, pass it the selected process and replace the current code block with the generated SVG wrapped in a div. For styling purposes the class names are the following:

  • remark-draw
  • remark-draw-dot (for GraphViz graphs)
  • remark-draw-svgbob (for SvgBobRus graphs)

In order to avoid conflicts with syntax highligters the language is postfixed with "-svg".

To rather write the files to disk and replace the code block with an <img> tag you can specify the strategy: img option inside options. The generated SVG files will be written to the public directory and linked from there. For styling purposes the generated image title starts with remark-draw.

Usage

npm install gatsby-remark-draw --save

In your gatsby-config.js add this plugin under the gatsby-transformer-remark plugin:

resolve: "gatsby-transformer-remark",
      options: {
        "strategy": "img",
        "plugins": [
          "gatsby-remark-draw"
        ]
      }
// ...

It's important to add this plugin before any other plugin that processes code blocks like gatsby-remark-prismjs.

Since v1.0.8 options can now be passed through to the rendering engine to change default settings. For example,

resolve: 'gatsby-remark-draw',
    options: {
        dot: {
            edgeAttributes: {
                'arrowtail': 'empty',
                'arrowhead': 'empty'
            }
        },
        bob: {
            fontFamily: 'verdana'
        },
        mermaid: {
            theme: 'forest'
        }
    }
}

Please see the Skyrta documentation for details on the options available.

Diagrams

SvgBobRus diagrams

This package expects svgbob_cli to available in the system path. Installation:

cargo install svgbob_cli

You can find specific instructions on the repo page.

In Markdown you can use a normal code-block with language set to "bob-svg":

Bob markup

Which will provide the following (rendered) inline SVG diagram:

Bob diagram

Graphviz

Graphviz can be installed in most cases via your package manager. See the download page for manual downloads and installation instruction instructions.

In Markdown you can use a normal code-block with language set to "dot-svg" which will use the dot engine to produce the image:

Graphviz markup

will provide the following (rendered) inline SVG diagram:

Graphviz output

Mermaid

To render Mermaid graphs you need to install both the mermaid and the cli packages:

npm install mermaid mermaid.cli --save

Note the . in the cli package name - the package with a - that shall not be named here has been deprecated.

A sample flowchart from the main Mermaid repository:

Graphviz markup

will provide the following (rendered) SVG diagram:

Mermaid output

Demo

Demos can be found here.

Install

npm i gatsby-remark-draw

DownloadsWeekly Downloads

81

Version

1.0.16

License

MIT

Unpacked Size

9.88 kB

Total Files

5

Last publish

Collaborators

  • avatar