Add support for Graphviz dot diagrams

While Mermaid diagrams are more and more common on the internet, thanks
to GitHub's support in their GitHub-flavored Markdown codeblocks, it is
often frustratingly difficult to make elegant diagrams with them and to
avoid overlapping or unnecessarily long edges.

Graphviz, in contrast, allows much more control over the layout. The
downside is that Graphviz is a command-line program, not a JavaScript
library, and would require the diagrams to be pre-rendered and committed
into the repository (a recipe for out-of-sync files).

Enter `viz.js` (https://github.com/mdaines/viz-js). Essentially, it is a
WebAssembly build of Graphviz. Therefore, it _does_ run in the browser.

The downside, compared to Mermaid, is the size: While `mermaid.min.js`
weighs around 25 kB, `viz-global.js` weighs around 1.4 MB.

And I did not find any CDN that serves a current version, therefore I
had to download it:

  VIZ_VERSION=3.17.0
  npm pack @viz-js/viz@$VIZ_VERSION
  tar Oxvf viz-js-viz-$VIZ_VERSION.tgz package/dist/viz-global.js \
    >static/js/viz-global.js

With this commit, Graphviz dot diagrams can be added like this:

  {{< graphviz >}}
  digraph {
    a -> b -> c
  }
  {{< /graphviz >}}

While I tried to make it as painless to work on these diagrams locally,
there are more efficient ways than editing the HTML files, running Hugo
and then reloading the page, for example Graphviz Online:
https://dreampuf.github.io/GraphvizOnline/?engine=neato. This page works
entirely in the browser, and uses a slightly outdated version of
`viz.js`.

Signed-off-by: Johannes Schindelin <johannes.schindelin@gmx.de>

Author: dscho

assets/js/application.js

@@ -782,6 +782,18 @@ var PostelizeAnchor = {
   },
 }
 
+var Graphviz = {
+  render: function() {
+    let vizInstance
+    [...document.querySelectorAll("pre[class=graphviz]")].forEach(async (x) => {
+      if (!vizInstance) vizInstance = await Viz.instance()
+      const svg = vizInstance.renderSVGElement(x.innerText)
+      x.parentNode.insertBefore(svg, x);
+      x.style.display = 'none'
+    });
+  }
+}
+
 // Scroll to Top
 $('#scrollToTop').removeClass('no-js');
 $(window).on('scroll', function() {

layouts/_default/baseof.html

@@ -191,5 +191,9 @@ <h1 data-pagefind-meta="title">About{{ if (isset .Params "subtitle") }} - {{ .Pa
   {{ end }}
 
 </body>
+{{ if .Page.Store.Get "hasGraphviz" -}}
+<script src="{{ relURL "js/viz-global.js" }}"> </script>
+<script type="text/javascript">Graphviz.render();</script>
+{{ end -}}
 </html>
 {{ end }}

layouts/shortcodes/graphviz.html

@@ -0,0 +1,4 @@
+<pre class="graphviz">
+  {{ .Inner | htmlEscape | safeHTML }}
+</pre>
+{{ .Page.Store.Set "hasGraphviz" true }}