Load mermaid asynchronously

workspace/mix.exs

@@ -117,28 +117,29 @@ defmodule Workspace.MixProject do
 
   defp before_closing_body_tag(:html) do
     """
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script>
     <script>
-      document.addEventListener("DOMContentLoaded", function () {
-        mermaid.initialize({
-          startOnLoad: false,
-          theme: document.body.className.includes("dark") ? "dark" : "default"
-        });
-        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();
+      function mermaidLoaded() {
+        document.addEventListener("DOMContentLoaded", function () {
+          mermaid.initialize({
+            startOnLoad: false,
+            theme: document.body.className.includes("dark") ? "dark" : "default"
           });
-        }
-      });
+          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>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js" onload="mermaidLoaded();"></script>
     """
   end