feat: add mermaid diagram rendering with interactive zoom overlay to mdbook docs

docs/book.toml

@@ -8,11 +8,13 @@ description = "Generate SQL queries from natural language using AI - Documentati
 [build]
 build-dir = "book"
 
+[preprocessor.mermaid]
+command = "mdbook-mermaid"
+
 [output.html]
 default-theme = "light"
 preferred-dark-theme = "navy"
 smart-punctuation = true
 mathjax-support = false
-copy-fonts = true
-additional-css = []
-additional-js = []
+additional-css = ["mermaid-zoom.css"]
+additional-js = ["mermaid.min.js", "mermaid-init.js", "mermaid-zoom.js"]

docs/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(darkTheme).addEventListener('click', () => {
+            if (lastThemeWasLight) {
+                window.location.reload();
+            }
+        });
+    }
+
+    for (const lightTheme of lightThemes) {
+        document.getElementById(lightTheme).addEventListener('click', () => {
+            if (!lastThemeWasLight) {
+                window.location.reload();
+            }
+        });
+    }
+})();

docs/mermaid-zoom.css

@@ -0,0 +1,116 @@
+.mermaid-zoom-hint {
+  cursor: pointer;
+  position: relative;
+}
+
+.mermaid-zoom-hint:hover {
+  outline: 2px solid rgba(0, 120, 212, 0.4);
+  outline-offset: 4px;
+  border-radius: 4px;
+}
+
+/* Overlay */
+.mermaid-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: var(--overlay-bg, rgba(30, 30, 30, 0.7));
+  backdrop-filter: blur(2px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.mermaid-overlay.active {
+  opacity: 1;
+}
+
+.mermaid-overlay-open {
+  overflow: hidden !important;
+}
+
+/* Content viewport */
+.mermaid-overlay-viewport {
+  position: relative;
+  width: 75vw;
+  height: 78vh;
+  background: var(--bg);
+  color: var(--fg);
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+/* Toolbar - top right, compact */
+.mermaid-overlay-toolbar {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 2;
+  display: flex;
+  gap: 2px;
+  background: var(--sidebar-bg);
+  border: 1px solid var(--table-header-bg);
+  border-radius: 4px;
+  padding: 2px;
+}
+
+.mermaid-overlay-toolbar button {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: 3px;
+  color: var(--fg);
+  font-size: 16px;
+  cursor: pointer;
+  line-height: 1;
+  padding: 0;
+}
+
+.mermaid-overlay-toolbar button:hover {
+  background: rgba(0, 0, 0, 0.08);
+}
+
+.mermaid-overlay-toolbar button svg {
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* Pannable/zoomable canvas */
+.mermaid-overlay-canvas {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  cursor: grab;
+  touch-action: none;
+  position: relative;
+}
+
+.mermaid-overlay-canvas.grabbing {
+  cursor: grabbing;
+}
+
+.mermaid-overlay-inner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: center center;
+  padding: 40px;
+}
+
+.mermaid-overlay-inner svg {
+  display: block;
+  max-width: none;
+  height: auto;
+}