Integrate with mermaid-js

Author: cotes2020

_includes/mermaid.html

@@ -0,0 +1,28 @@
+<!--
+  mermaid-js loader
+-->
+<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+<script>
+
+  let initTheme = "default";
+
+  if ($("html[mode=dark]").length > 0
+    || ($("html[mode]").length == 0
+      && window.matchMedia("(prefers-color-scheme: dark)").matches ) ) {
+    initTheme = "dark";
+  }
+
+  let mermaidConf = {
+    theme: initTheme  /* <default|dark|forest|neutral> */
+  };
+
+  /* Markdown converts to HTML */
+  $("pre").has("code.language-mermaid").each(function() {
+    let svgCode = $(this).children().html();
+    $(this).addClass("unloaded");
+    $(this).after(`<div class=\"mermaid\">${svgCode}</div>`);
+  });
+
+  mermaid.initialize(mermaidConf);
+
+</script>

_includes/mode-toggle.html

@@ -33,8 +33,8 @@
 
       /* always follow the system prefers */
       this.sysDarkPrefers.addListener(function() {
-        if (self.mode != null) {
-          if (self.mode == ModeToggle.DARK_MODE) {
+        if (self.hasMode) {
+          if (self.isDarkMode) {
             if (!self.isSysDarkPrefer) {
               self.setDark();
             }
@@ -47,6 +47,8 @@
 
           self.clearMode();
         }
+
+        self.updateMermaid();
       });
 
     } /* constructor() */
@@ -79,6 +81,33 @@
 
     get mode() { return sessionStorage.getItem(ModeToggle.MODE_KEY); }
 
+    /* get the current mode on screen */
+    get modeStatus() {
+      if (this.isDarkMode
+        || (!this.hasMode && this.isSysDarkPrefer) ) {
+        return ModeToggle.DARK_MODE;
+      } else {
+        return ModeToggle.LIGHT_MODE;
+      }
+    }
+
+    updateMermaid() {
+      if (mermaid !== undefined) {
+        let expectedTheme = (this.modeStatus === ModeToggle.DARK_MODE? "dark" : "default");
+        let config = { theme: expectedTheme };
+
+        /* re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
+        $(".mermaid").each(function() {
+          let svgCode = $(this).prev().children().html();
+          $(this).removeAttr("data-processed");
+          $(this).html(svgCode);
+        });
+
+        mermaid.initialize(config);
+        mermaid.init(undefined, ".mermaid");
+      }
+    }
+
     flipMode() {
       if (this.hasMode) {
         if (this.isSysDarkPrefer) {
@@ -104,14 +133,18 @@
         }
       }
 
+      this.updateMermaid();
+
     } /* flipMode() */
 
   } /* ModeToggle */
 
   let toggle = new ModeToggle();
 
   $(".mode-toggle").click(function() {
+
     toggle.flipMode();
+
   });
 
 </script>

_layouts/default.html

@@ -40,6 +40,10 @@
 
     </div> <!-- #main-wrapper -->
 
+    {% if page.mermaid %}
+      {% include mermaid.html %}
+    {% endif %}
+
     <div id="mask"></div>
 
     <a id="back-to-top" href="#" aria-label="back-to-top" class="btn btn-lg btn-box-shadow" role="button">