Fix usage of mermaid in ExUnit &co

Author: sabiwara

lib/elixir/scripts/mix_docs.exs

@@ -13,5 +13,41 @@ canonical = System.fetch_env!("CANONICAL")
     logger: "https://hexdocs.pm/logger/#{canonical}",
     mix: "https://hexdocs.pm/mix/#{canonical}"
   ],
-  formatters: ["html", "epub"]
+  formatters: ["html", "epub"],
+  before_closing_body_tag: fn
+    :html ->
+      """
+      <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script>
+      <script>
+        let initialized = false;
+
+        window.addEventListener("exdoc:loaded", () => {
+          if (!initialized) {
+            mermaid.initialize({
+              startOnLoad: false,
+              theme: document.body.className.includes("dark") ? "dark" : "default"
+            });
+            initialized = true;
+          }
+
+          let id = 0;
+          for (const codeEl of document.querySelectorAll("pre code.mermaid")) {
+            const preEl = codeEl.parentElement;
+            const graphDefinition = codeEl.textContent;
+            const graphEl = document.createElement("div");
+            const graphId = "mermaid-graph-" + id++;
+            mermaid.render(graphId, graphDefinition).then(({svg, bindFunctions}) => {
+              graphEl.innerHTML = svg;
+              bindFunctions?.(graphEl);
+              preEl.insertAdjacentElement("afterend", graphEl);
+              preEl.remove();
+            });
+          }
+        });
+      </script>
+      """
+
+    _ ->
+      ""
+  end
 ]