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

package-lock.json

@@ -25,7 +25,7 @@
         "eslint-plugin-prettier": "5.1.3",
         "favicons": "7.1.5",
         "favicons-webpack-plugin": "6.0.1",
-        "html-validate": "^8.9.1",
+        "html-validate": "8.9.1",
         "npm-run-all": "4.1.5",
         "postcss-loader": "7.3.4",
         "prettier": "3.2.2",
@@ -34,6 +34,7 @@
         "shx": "0.3.4",
         "svg-sprite": "2.0.2",
         "svgtofont": "4.1.1",
+        "uuid": "9.0.1",
         "webpack": "5.89.0",
         "webpack-cli": "5.1.4",
         "webpack-manifest-plugin": "5.0.0",

package.json

@@ -58,6 +58,7 @@
     "shx": "0.3.4",
     "svg-sprite": "2.0.2",
     "svgtofont": "4.1.1",
+    "uuid": "9.0.1",
     "webpack": "5.89.0",
     "webpack-cli": "5.1.4",
     "webpack-manifest-plugin": "5.0.0",

src/js/mermaid.js

@@ -1,30 +1,39 @@
 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 currentColorTheme = lstore.get("color-theme") || COLOR_THEME_AUTO
+  let currentMode = lstore.get("color-theme") || COLOR_THEME_AUTO
   let darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)")
   let darkMode = false
   let theme = "default"
 
   if (
-    currentColorTheme === COLOR_THEME_DARK ||
-    (currentColorTheme === COLOR_THEME_AUTO && darkModeQuery.matches)
+    currentMode === COLOR_THEME_DARK ||
+    (currentMode === COLOR_THEME_AUTO && darkModeQuery.matches)
   ) {
     darkMode = true
     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))
+  })
 })