Graphviz Exec Loader

This Webpack loader calls external Graphviz binaries to process Graphviz files into any format that the Graphviz tools can emit.

If you want a pure JavaScript solution, you may want to investigate graphviz-loader, which uses an Emscripten compiled version of Graphviz.

Installation

You will need the Graphviz binaries, such as dot, installed on your system. How you do that is distribution dependent, but usually involves installing a package named something like graphviz.

From there, this is just a standard NPM package:

yarn add -D graphviz-exec-loader

Usage

You can use this for .dot files like any other loader. Here's a sample block from a Webpack configuration I have:

{
  test: /\.dot$/,
  loader: "graphviz-exec-loader",
  options: {
    command: "dot"
  }
}

The command option is mandatory, and is the command that will be run (typically one of dot, neato, et cetera). You may also provide an optional format option, which will override the -T parameter given to the tool; this defaults to svg.

The output of the loader is a data URI that would generally be included directly into an <img /> element or a background: url(...) style definition.

Known issues

I've only tested this with Webpack 3. It may well work with 4, but someone will have to test that.