✨ Feat: enhance Mermaid configuration and fix initialization bug (#617)

* 🐛 Fix: Mermaid initialization conflict error

* ✨ Feat: enhance Mermaid configuration with security level, look, and font family options

assets/css/_partials/_single/_code.scss

@@ -4,7 +4,7 @@ code {
 }
 
 // indented code
-pre:not(.mermaid[data-processed='true']) {
+pre:not(.mermaid[data-processed]) {
   margin: 0;
   line-height: 1.45em;
   padding: 0.5rem;

assets/css/_partials/_single/_diagram-copy-btn.scss

@@ -1,3 +1,8 @@
+// Diagram container
+.diagram-container {
+  position: relative;
+}
+
 // Diagram copy button styles
 .diagram-copy-btn {
   position: absolute;
@@ -50,8 +55,15 @@
   }
 }
 
-// Diagram containers
-.mermaid-container,
-.echarts-container {
-  position: relative;
+@media only screen and (min-width: 1201px) {
+  .diagram-container {
+    .diagram-copy-btn {
+      display: none;
+    }
+    &:hover {
+      .diagram-copy-btn {
+        display: block;
+      }
+    }
+  }
 }

assets/css/_shortcodes/_mermaid.scss

@@ -1,7 +1,8 @@
 .mermaid {
   position: relative;
+  overflow: hidden !important;
 
-  &[data-processed='true'] {
+  &[data-processed] {
     text-align: center;
   }
 

assets/js/lib/mermaid.js

@@ -0,0 +1,10 @@
+{{- $mermaid := .Param "mermaid" -}}
+{{- $mermaidCDN := $mermaid.cdn | default "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs" -}}
+
+import mermaid from "{{ $mermaidCDN }}";
+{{- with $mermaid.zenuml }}
+import zenuml from "{{ . }}";
+await mermaid.registerExternalDiagrams([zenuml]);
+{{- end }}
+mermaid.startOnLoad = false;
+window.mermaid = mermaid;

assets/js/theme.js

@@ -665,30 +665,39 @@ class FixIt {
 
     const loadMermaid = async () => {
       processing = true;
+      // https://mermaid.js.org/config/schema-docs/config.html
       window.mermaid.initialize({
-        securityLevel: 'loose',
         startOnLoad: false,
+        darkMode: this.isDark,
         theme: this.isDark ? themes[1] : themes[0],
+        securityLevel: this.config.mermaid.securityLevel,
+        look: this.config.mermaid.look,
+        fontFamily: this.config.mermaid.fontFamily,
+        altFontFamily: this.config.mermaid.fontFamily
+      });
+      await window.mermaid.run({
+        querySelector: '.mermaid',
+        suppressErrors: true,
       });
-      await window.mermaid.run();
       processing = false;
       if (delayTask && typeof delayTask === 'function') {
-        await delayTask();
+        delayTask();
         delayTask = null;
+        // console.log('Delayed task executed');
       }
     };
 
     const reloadMermaid = async () => {
       await this.util.forEach(document.querySelectorAll('.mermaid[data-processed]'), (el) => {
-        el.replaceChild(el.nextElementSibling.content.cloneNode(true), el.firstChild);
         el.removeAttribute('data-processed');
+        el.parentElement.replaceChild(el.nextElementSibling.content.cloneNode(true), el);
       });
       await loadMermaid();
     };
 
     this.switchThemeEventSet.add(() => {
       if (processing) {
-        // console.log('delay the reload');
+        console.warn('Mermaid is still processing, delaying the reload.');
         delayTask = reloadMermaid;
         return;
       }