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

    56

    Version

    1.0.16

    License

    MIT

    Unpacked Size

    9.88 kB

    Total Files

    5

    Last publish

    Collaborators

    • rhanekom