Render with mermaid and kroki, with support for mdbook

kroki.js

// <script type="module">
var server = "https://kroki.io";
var libraries = [
  "bytefield",
  "c4plantuml",
  "d2",
  "ditaa",
  "erd",
  "graphviz",
  "dot",
  "nomnoml",
  "pikchr",
  "lantuml",
  "structurizr",
  "svgbob",
  "umlet",
  "vega",
  "vegalite",
  "wavedrom",
];
import pako from "https://cdn.jsdelivr.net/npm/pako@2/+esm";
import { Base64 } from "https://cdn.jsdelivr.net/npm/js-base64@3/base64.mjs";
function getLanguage(classList) {
  for (let i = 0; i < classList.length; i++) {
    if (classList[i].startsWith("language-")) {
      return classList[i].replace("language-", "");
    }
  }
}
document.addEventListener("DOMContentLoaded", function () {
  var selector = libraries.map((i) => ".language-" + i).join(", ");
  var nodes = document.querySelectorAll(selector);
  for (let i = 0; i < nodes.length; i++) {
    var data = new TextEncoder("utf-8").encode(nodes[i].innerText);
    var buffer = pako.deflate(data, { level: 9 });
    var result = Base64.fromUint8Array(buffer, true);
    var language = getLanguage(nodes[i].classList);
    var graph = document.createElement("object");
    graph.width = "100%";
    graph.data = `${server}/${language}/svg/${result}`;
    nodes[i].parentElement.replaceWith(graph);
  }
});
// </script>

mdbook-support.md

Just copy and paste one of the two files in theme/head.hbs and uncomment the script tags.

mermaid.js

// <script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: false, securityLevel: 'loose' });
await mermaid.run({
  nodes: document.querySelectorAll('.language-mermaid'),
});
// </script>