gatsby-remark-graphviz

Processes graphviz (dot and circo) code blocks in your markdown files and replaces them with the rendered SVG using viz.js

Install

npm install gatsby-remark-graphviz

Note that you do not need graphviz installed on your machine as this project depends on viz.js which is a pure JavaScript port of graphviz.

How to use

// In your gatsby-config.js
plugins: [
  {
    resolve: 'gatsby-transformer-remark',
    options: {
      plugins: [
        'gatsby-remark-graphviz',
        // place before other plugins that modify code blocks (such as prismjs)
        // 'gatsby-remark-prismjs',
      ]
    }
  }
],

Then, add dot code blocks to your markdown. E.g

```dot
digraph graphname {
  a -> b;
  b -> c;
  a -> c;
}
```

Which will be rendered using viz.js and the output html will replace the code block with the actual SVG.

Custom attributes can be passed to the rendered SVG:

```dot id="my-id" class="my-class"
digraph graphname {
  a -> b;
  b -> c;
  a -> c;
}
```

By default, the following inline style is applied to all rendered SVGs in order to make them responsive:

max-width: 100%;
height: auto;

This can be overwritten by using the custom attributes feature:

```dot style=""
digraph graphname {
  a -> b;
  b -> c;
  a -> c;
}
```

Caveats

In your gatsby-config.js, make sure you place this plugin before other remark plugins that modify code blocks (like prism).

Alternatives

If you want a broader range of drawing options, checkout gatsby-remark-draw. It provides SvgBobRus, Graphviz, and Mermaid, but note that you must have these already installed on your system

If you’re simply looking for a normal (not Gatsby) remark plugin for graphviz, see remark-graphviz which inspired this plugin.