From b833806ec74db758d52f8a92a1923df1f50ea83f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 22 Jul 2025 20:05:29 +0300
Subject: [PATCH] feat(share): render inline mermaid (closes #5438)

---
 apps/client/src/share.ts         | 11 +++++++++--
 apps/client/src/share/mermaid.ts | 17 +++++++++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 apps/client/src/share/mermaid.ts

diff --git a/apps/client/src/share.ts b/apps/client/src/share.ts
index 692f9f5dd..c97f18c49 100644
--- a/apps/client/src/share.ts
+++ b/apps/client/src/share.ts
@@ -29,6 +29,14 @@ async function formatCodeBlocks() {
     await formatCodeBlocks($("#content"));
 }
 
+async function setupTextNote() {
+    formatCodeBlocks();
+    applyMath();
+
+    const setupMermaid = (await import("./share/mermaid.js")).default;
+    setupMermaid();
+}
+
 /**
  * Fetch note with given ID from backend
  *
@@ -50,8 +58,7 @@ document.addEventListener(
         const noteType = determineNoteType();
 
         if (noteType === "text") {
-            formatCodeBlocks();
-            applyMath();
+            setupTextNote();
         }
 
         const toggleMenuButton = document.getElementById("toggleMenuButton");
diff --git a/apps/client/src/share/mermaid.ts b/apps/client/src/share/mermaid.ts
new file mode 100644
index 000000000..123f3816c
--- /dev/null
+++ b/apps/client/src/share/mermaid.ts
@@ -0,0 +1,17 @@
+import mermaid from "mermaid";
+
+export default function setupMermaid() {
+    for (const codeBlock of document.querySelectorAll("#content pre code.language-mermaid")) {
+        const parentPre = codeBlock.parentElement;
+        if (!parentPre) {
+            continue;
+        }
+
+        const mermaidDiv = document.createElement("div");
+        mermaidDiv.classList.add("mermaid");
+        mermaidDiv.innerHTML = codeBlock.innerHTML;
+        parentPre.replaceWith(mermaidDiv);
+    }
+
+    mermaid.init();
+}