GraphViz Eleventy Plugin

The Eleventy plugin will read DOT script files and build output files of your choosing as if they were content.

This is almost exclusively a very thin wrapper around ts-graphviz to make it compatible with Eleventy out of the box. Pretty much all of the credit goes to them and their hard work, as well as the incredible people behind GraphViz.

Getting Started

Prerequisites

GraphViz must be installed in order to produce the output files. Eleventy should also probably be installed, obviously.

Installing

Install the plugin within your Eleventy repository

npm install eleventy-plugin-graphviz --save

Add the plugin to your configuration file (likely eleventy.config.js or .eleventy.js)

import graphVizPlugin from "eleventy-plugin-graphviz";

export default function (eleventyConfig) {
    eleventyConfig.addPlugin(graphVizPlugin)
};

Now create a file ending in .dot or .gv containing a DOT script.

# content/test-graph.gv
digraph example {
    node1 [
        label = "A",
    ]
    node2 [
        label = "B",
    ]
    node1 -> node2
    node2 -> node1
}

By default this will create an output file at _site/content/test-graph.png.

You can embed this file inside your other template files. With Liquid/Markdown this is done like this

# content/test-content.md
Note that we have to go up one directory, by default content/test-content.md
will generate its file at content/test-content/index.html.
![alt text](../test-graph.png)

You can also change the output file format in your eleventy config file.

import graphVizPlugin from "eleventy-plugin-graphviz";

export default function (eleventyConfig) {
    eleventyConfig.addPlugin(graphVizPlugin, { format: "svg" });
}

Supported file formats are:

• PNG
• SVG
• JSON
• JPG
• PDF
• XDOT
• DOT
• Plain
• DOT_JSON

Contributing

License

This project is licensed under the GPL 3.0 License - see the LICENSE.md file for details.