fix: use selector loop to manually render all charts on a page (#765)

package-lock.json

@@ -15,7 +15,8 @@
         "katex": "0.16.9",
         "lodash": "4.17.21",
         "mermaid": "10.6.1",
-        "store2": "2.14.2"
+        "store2": "2.14.2",
+        "uuid": "9.0.1"
       },
       "devDependencies": {
         "@babel/eslint-parser": "7.23.3",

package.json

@@ -39,7 +39,8 @@
     "katex": "0.16.9",
     "lodash": "4.17.21",
     "mermaid": "10.6.1",
-    "store2": "2.14.2"
+    "store2": "2.14.2",
+    "uuid": "9.0.1"
   },
   "devDependencies": {
     "@babel/eslint-parser": "7.23.3",

src/js/mermaid.js

@@ -1,6 +1,9 @@
 const Storage = require("store2")
+const { v4: uuidv4 } = require("uuid")
 const { COLOR_THEME_DARK, THEME, COLOR_THEME_AUTO } = require("./config.js")
 
+import mermaid from "mermaid"
+
 document.addEventListener("DOMContentLoaded", function (event) {
   let lstore = Storage.namespace(THEME)
   let currentMode = lstore.get("color-theme") || COLOR_THEME_AUTO
@@ -16,15 +19,21 @@ document.addEventListener("DOMContentLoaded", function (event) {
     theme = "dark"
   }
 
-  import("mermaid")
-    .then(({ default: md }) => {
-      md.initialize({
-        flowchart: { useMaxWidth: true },
-        theme: theme,
-        themeVariables: {
-          darkMode: darkMode
-        }
-      })
+  mermaid.initialize({
+    startOnLoad: false,
+    flowchart: { useMaxWidth: true },
+    theme: theme,
+    themeVariables: {
+      darkMode: darkMode
+    }
+  })
+
+  document.querySelectorAll(".mermaid").forEach(function (el) {
+    let id = "graph-" + uuidv4()
+
+    mermaid.render(id, el.innerText).then(({ svg, bindFunctions }) => {
+      el.innerHTML = svg
+      bindFunctions?.(el)
     })
-    .catch((error) => console.error(error))
+  })
 })