From ff6e9ed824473aa324de99d888af200ac9a59036 Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Tue, 9 Jan 2024 09:29:41 +0100
Subject: [PATCH] fix: use selector loop to manually render all charts on a
 page (#765)

---
 package-lock.json |  3 ++-
 package.json      |  3 ++-
 src/js/mermaid.js | 29 +++++++++++++++++++----------
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6870f79..6624dad 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index f4228bf..7b11fe6 100644
--- a/package.json
+++ b/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",
diff --git a/src/js/mermaid.js b/src/js/mermaid.js
index f730364..39cbddf 100644
--- a/src/js/mermaid.js
+++ b/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))
+  })
 })