Add support for rendering Graphviz diagrams

I tried to add some Mermaid diagrams, but they simply do not look good.
Graphviz offers much better control over the layout.

Unfortunately, unlike Mermaid (which is a JavaScript library), Graphviz
is a command-line program, and therefore not available in the browser.

Fortunately, some helpful people maintain a WebAssembly version of
Graphviz, which _is_ a JavaScript library:
https://github.com/mdaines/viz-js

Unfortunately, unlike Mermaid (which weighs ~25kB), the GraphViz
WebAssembly weighs 1.4MB. But that's not quite correct, as Mermaid then
loads another half megabyte, whereas `viz-js` does not load anything.

The `viz-global.js` file was downloaded via:

  npm pack @viz-js/[email protected]
  tar Oxvf viz-js-viz-3.17.0.tgz package/dist/viz-global.js \
    >static/js/viz-global.js

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

Author: dscho

layouts/_default/baseof.html

@@ -12,4 +12,19 @@
     {{ .Content }}
     {{ end }}
   </body>
+{{- if .Store.Get "hasGraphviz" }}
+  <script src="{{ relURL "js/viz-global.js" }}"> </script>
+  <script type="text/javascript">
+    let vizInstance
+    window.addEventListener("DOMContentLoaded", async () => {
+      [...document.querySelectorAll("pre[class=graphviz]")].forEach(async (x) => {
+        if (!vizInstance) vizInstance = await Viz.instance()
+        if (x.style.display === 'none') return
+        const svg = (await Viz.instance()).renderSVGElement(x.innerText, { engine })
+        x.parentNode.insertBefore(svg, x)
+        x.style.display = 'none'
+      })
+    })
+  </script>
+{{- end }}
 </html>

layouts/_markup/render-codeblock-graphviz.html

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