diff --git a/assets/js/mermaid.js b/assets/js/mermaid.js
index cd41e5ad..7df77a21 100644
--- a/assets/js/mermaid.js
+++ b/assets/js/mermaid.js
@@ -2,6 +2,17 @@ function css(name) {
   return "rgb(" + getComputedStyle(document.documentElement).getPropertyValue(name) + ")";
 }
 
+document.addEventListener("DOMContentLoaded", () => {
+  const mermaidDivs = document.querySelectorAll("div.mermaid");
+
+  for (const div of mermaidDivs) {
+    const preElement = div.querySelector("pre");
+    if (preElement) {
+      div.textContent = preElement.textContent;
+    }
+  }
+});
+
 mermaid.initialize({
   theme: "base",
   themeVariables: {
@@ -17,4 +28,4 @@ mermaid.initialize({
       "ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif",
     fontSize: "16px",
   },
-});
\ No newline at end of file
+});
diff --git a/layouts/shortcodes/mermaid.html b/layouts/shortcodes/mermaid.html
index 7246bf82..e7d4ef24 100644
--- a/layouts/shortcodes/mermaid.html
+++ b/layouts/shortcodes/mermaid.html
@@ -1,3 +1,3 @@
 <div class="mermaid" align="center">
-  {{ .Inner }}
+  <pre>{{ .Inner | safeHTML }}</pre>
 </div>