TLDR: https://github.com/TrevorSundberg/inviz

Early on in my quest to learn compilers I started by implementing some of the core parsing algorithms. At some point, I ran into a bug that I couldn’t make sense of. I decided quickly that my tool-set was lacking and if I wanted to debug the problem, I needed to visualize the entire graph.

My first thought was “I can make this tool”. Turns out I’m not alone as many have tried. You quickly realize that laying out a graph is a non-trivial problem and requires solvers and constraints. Being pragmatic and not wanting to debug two algorithms, I set search for an existing tool.

Enter GraphViz. This command line tool was made to accept a language that describes any graph and has quite a bit of customization / styling options. For example, the above graph is described as:

digraph {
    rankdir=LR;
    node [shape="circle"]
    0[shape="square"]
    4[shape="doublecircle"]
    0 -> 1
    1 -> 2
    1 -> 3
    3 -> 4
    0 -> 4
    2 -> 2
    2 -> 4
}

Fast forward 10 years and GraphViz is still one of the best tools out there.

Recently I started writing my compiler series and ran into an annoyance. Do I really go through the arduous task of running the command line to produce each graph and then patiently wait for the upload? Keep in mind these blog posts go through many revisions!

I’m a programmer. Hell no.

With the recent influx of C/C++ projects being compiled to asmjs or WebAssembly, we’re now seeing these command line tools made callable directly on the web. Enter Viz.js, a port of GraphViz to JavaScript.

Looking around Viz.js does almost everything we need, including render directly to svg. In recent versions, they even added WebWorkers to ensure that the page is not blocked by the generation of graphs.

I set out on a mission, to create an embedded version of GraphViz that I can modify directly on the web:

https://github.com/TrevorSundberg/inviz

Taking a look at other embedded examples, such as GitHub’s gists I realized that the pattern of using a script tag that internally calls document.write was quite common. Dealing with CORS was quite a PITA, but hey at least someone’s trying to make the world a more secure place!

Using WebPack and the SriPlugin I added an integrity check to ensure that if my domain was ever compromised it would not also compromise any who embedded the script.

To embed onto your page (see the README for more details):

<script src='https://trevorsundberg.github.io/inviz/inviz-lite-1.0.0.js'
        integrity="sha256-QovDThk2+wF/x72ecMlxvLg+8D0Pn8L3/+evm9iXf+E="
        crossorigin="anonymous"
        data-graph='
digraph
{
  a -> b
}
'></script>

I also added an iframe version that allows using the sandbox attribute. This also enables sites that allow using an iframe but don’t allow custom script tags. Unfortunately, iframe does not yet support integrity.

As a little added bonus, you can use the data-graph-url to link to raw files, such as this Gist:

digraph
{
rankdir=LR;
I -> n;
n -> v;
v -> i;
i -> z;
I -> z;
i -> i;
v -> I
}
view raw demo.gv hosted with ❤ by GitHub

And the following script snippet can link directly to the raw file:

<script src="https://trevorsundberg.github.io/inviz/inviz-lite-1.0.0.js"
        integrity="sha256-QovDThk2+wF/x72ecMlxvLg+8D0Pn8L3/+evm9iXf+E="
        crossorigin="anonymous"
        data-graph-url="https://gist.githubusercontent.com/TrevorSundberg/0d7344511320dd4bdf83f70715da8373/raw"></script>

And viola!

Happy visualizing!