mermaid data flow diagram

.github/workflows/pages.yml

@@ -32,6 +32,12 @@ jobs:
         with:
           tool: mdbook@0.5.4
 
+      - name: Install Mermaid preprocessor
+        uses: extractions/setup-crate@v1
+        with:
+          owner: badboy
+          name: mdbook-mermaid
+
       - name: Build
         run: mdbook build
 

book.toml

@@ -9,3 +9,9 @@ site-url = "/"
 git-repository-url = "https://github.com/ashlar-display"
 git-repository-icon = "fab-github"
 edit-url-template = "https://github.com/ashlar-display/ashlar-display.github.io/edit/main/{path}"
+additional-js = ["mermaid.min.js", "mermaid-init.js"]
+
+[preprocessor]
+
+[preprocessor.mermaid]
+command = "mdbook-mermaid"

mermaid-init.js

@@ -0,0 +1,39 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+(() => {
+    const darkThemes = ['ayu', 'navy', 'coal'];
+    const lightThemes = ['light', 'rust'];
+
+    const classList = document.getElementsByTagName('html')[0].classList;
+
+    let lastThemeWasLight = true;
+    for (const cssClass of classList) {
+        if (darkThemes.includes(cssClass)) {
+            lastThemeWasLight = false;
+            break;
+        }
+    }
+
+    const theme = lastThemeWasLight ? 'default' : 'dark';
+    mermaid.initialize({ startOnLoad: true, theme });
+
+    // Simplest way to make mermaid re-render the diagrams in the new theme is via refreshing the page
+
+    for (const darkTheme of darkThemes) {
+        document.getElementById('mdbook-theme-' + darkTheme).addEventListener('click', () => {
+            if (lastThemeWasLight) {
+                window.location.reload();
+            }
+        });
+    }
+
+    for (const lightTheme of lightThemes) {
+        document.getElementById('mdbook-theme-' + lightTheme).addEventListener('click', () => {
+            if (!lastThemeWasLight) {
+                window.location.reload();
+            }
+        });
+    }
+})();