Hello and welcome, to another one of my posts geared towards amateurs with a head-first mentality to website development. In this post, I will try to implement, explain and illustrate how to display a graphviz graph on your very own website… using jekyll and liquid ofcourse… 😬

I. Using quickchart.io

Down below, is an non-interactive graphviz graph from quickcharts.io.

I simply embedded the graph into my markdown file as shown below;

![quickchart.io graph](https://quickchart.io/graphviz?graph=graph{a--b})

Here we can see the result;

quickchart.io graph

For more complex charts –or rather all charts– (better safe than sorry) we should adopt a more distributed approach where our .dot graph file lives outside the bounds of our markdown file.

Here I’ve placed my digraph_eg.dot file under the _posts>graphs directory. Using the liquid capture tag I stored the graph in my_graph variable, like so;

{% capture my_graph%}
{% include /charts/digraph_eg.dot %}
{% endcapture %}

if I print out my_graph here is what I get;

digraph {
  bgcolor="transparent"
  main->parse->execute;
  main->init;
  main->cleanup;
  execute->make_string;
  execute->printf;
  init->make_string;
  main->printf;
  execute->compare;
}

and since quickcharts.io asks for a url encoded link, I use jekyll’s uri_escape filter to encode it. Could have used liquid’s encode_url filter as well, I guess… idk, idc 😁 but here’s my_graph in url encoded version;

%0Adigraph%20%7B%0A%20%20bgcolor=%22transparent%22%0A%20%20main-%3Eparse-%3Eexecute;%0A%20%20main-%3Einit;%0A%20%20main-%3Ecleanup;%0A%20%20execute-%3Emake_string;%0A%20%20execute-%3Eprintf;%0A%20%20init-%3Emake_string;%0A%20%20main-%3Eprintf;%0A%20%20execute-%3Ecompare;%0A%7D%0A

and here is the result once we tie it all together;

complex_chart

At this point, we could also get rid of our external graphviz graph and simply capture it in a liquid variable as such;

{% capture dot_graph %} 
digraph {
  bgcolor="transparent"
  main->parse->execute;
  main->init;
  main->cleanup;
  execute->make_string;
  execute->printf;
  init->make_string;
  main->printf;
  execute->compare;
}
{% endcapture %}

and it will still render;

complex_chart

II. Using d3.js & d3-graphviz & hpcc-js/wasm libraries

This method is… I would say, is a bit more complex but does not rely on a 3rd-party service such as quickcharts. It uses d3 & d3-graphviz & d3-graphviz libraries –which are all open source– to render the graphviz chart.

a tester using magjac’s bl.ocks.org example

To test out the method we head over to magjac’s and check-out this example

As you may have noticed, the svg is clipped within the div and I haven’t delved too deeply into the code (because I don’t want to, and I can’t… since I’ve decided to take a head-first approach to all of this 😬) to figure out a way to properly display it within the parent <div>, but fear not, we haven’t ran out of ammo…

Jacob Okamoto’s snippet to the rescue

I’ve found out about okamoto’s way of doing graphviz in markdown while cruising the interwebs. My first attempt at adopting his code worked pretty well except for the fact that the D3ize function would append all the rendered graphviz-svg divs to the bottom of the post, since post-content is the parent-element to our .dot code snippet highlight.

To get around this issue, I’ve taken a different route. I insert the graphviz-div inside the div created by the markdown code-block, and once the for-loop D3izes over each of the elements, I hide the highlight div of the language-dot code-block div. It’s not prettiest, but it gets the job done.

Let’s see a few examples of how the charts actually look like down 👇.

A graphviz chart example

digraph G {
  bgcolor="transparent"
  rankdir = LR;
  a -> b
  b -> c
}

digraph G {
  bgcolor="transparent"
  rankdir = LR;
  a -> b
}

digraph G {
  bgcolor="transparent"
  b -> c 
}

credit : https://oko.io/howto/graphviz-in-markdown/

III. Using viz.js modules

This method works too I guess 😃 I’m using viz.js locally and have to serve to the website, which is a heavy thing to do… so this would not be my go to method for serving graphviz.

Here is the code for the graph below, and of course, I’m loading viz.js locally with a liquid link tag in the <head> section.

<div id="vizJS-graph"></div>

<script>
var viz = new Viz();

viz.renderSVGElement('digraph { a -> b; b -> c }')
.then(function(element) {
  document.getElementById('vizJS-graph').appendChild(element);
})
.catch(error => {
  // Create a new Viz instance (@see Caveats page for more info)
  viz = new Viz();

  // Possibly display the error
  console.error(error);
});
</script>

IV. Using Dagre?

Haven’t looking into yet, and don’t think I will soon. 😄