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 >}}

Signed-off-by: Johannes Schindelin <[email protected]>

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 }}