feat(docs): click-to-zoom for mermaid diagrams

docs/_assets/style.css

@@ -184,6 +184,33 @@ footer a { color: var(--muted); }
 .mermaid {
   text-align: center;
   margin: 1.5rem 0;
+  cursor: zoom-in;
+}
+
+.diagram-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.9);
+  z-index: 9999;
+  cursor: zoom-out;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.diagram-overlay.open {
+  display: flex;
+}
+
+.diagram-overlay svg {
+  max-width: 95vw;
+  max-height: 95vh;
+  width: auto;
+  height: auto;
+  background: var(--bg);
+  border-radius: 6px;
+  padding: 1.5rem;
 }
 
 @media (max-width: 768px) {

docs/_template/page.html

@@ -51,6 +51,23 @@ for (const pre of document.querySelectorAll('pre.mermaid, pre > code.language-me
   node.replaceWith(div);
 }
 await mermaid.run();
+
+const overlay = document.createElement('div');
+overlay.className = 'diagram-overlay';
+document.body.appendChild(overlay);
+overlay.addEventListener('click', () => overlay.classList.remove('open'));
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') overlay.classList.remove('open');
+});
+for (const diagram of document.querySelectorAll('.mermaid')) {
+  diagram.addEventListener('click', () => {
+    const svg = diagram.querySelector('svg');
+    if (!svg) return;
+    overlay.innerHTML = '';
+    overlay.appendChild(svg.cloneNode(true));
+    overlay.classList.add('open');
+  });
+}
 </script>
 </body>
 </html>