Wave changes

assets/scripts/script.js

@@ -225,3 +225,64 @@ document.addEventListener("DOMContentLoaded", () => {
 });
 
 
+// Make Mermaid diagrams zoomable
+window.addEventListener('load', function() {
+  // Initialize Mermaid (if not already)
+  mermaid.initialize({ startOnLoad: false, theme: 'neutral' });
+
+  // Find all Mermaid divs
+  document.querySelectorAll('.mermaid').forEach(el => {
+    // Decode HTML entities
+    el.innerHTML = el.innerHTML
+      .replace(/>/g, '>')
+      .replace(/&lt;/g, '<')
+      .replace(/&amp;/g, '&');
+
+    // Wrap in container if not already wrapped
+    if (!el.parentElement.classList.contains('mermaid-container')) {
+      const container = document.createElement('div');
+      container.classList.add('mermaid-container');
+
+      // Add zoom controls
+      const controls = document.createElement('div');
+      controls.classList.add('mermaid-zoom-controls');
+      controls.innerHTML = `
+        <button class="zoom-in">+</button>
+        <button class="zoom-out">-</button>
+      `;
+      container.appendChild(controls);
+
+      // Move the mermaid diagram into container
+      container.appendChild(el.cloneNode(true));
+      el.replaceWith(container);
+
+      // Select the SVG inside
+      const svg = container.querySelector('.mermaid svg');
+      let scale = 1;
+
+      // Zoom functions
+      controls.querySelector('.zoom-in').addEventListener('click', () => {
+        scale += 0.1;
+        svg.style.transform = `scale(${scale})`;
+      });
+
+      controls.querySelector('.zoom-out').addEventListener('click', () => {
+        scale = Math.max(0.1, scale - 0.1);
+        svg.style.transform = `scale(${scale})`;
+      });
+
+      // Optional: scroll wheel zoom
+      container.addEventListener('wheel', (e) => {
+        if (e.ctrlKey) { // zoom only with ctrl+wheel
+          e.preventDefault();
+          if (e.deltaY < 0) scale += 0.05;
+          else scale = Math.max(0.1, scale - 0.05);
+          svg.style.transform = `scale(${scale})`;
+        }
+      });
+    }
+  });
+
+  // Finally, render Mermaid diagrams
+  mermaid.run({ querySelector: '.mermaid' });
+});