From 70e21c2eaa1a10be16312592937d993e7f3273cb Mon Sep 17 00:00:00 2001
From: PJ <ipriyanshujain@gmail.com>
Date: Thu, 23 Apr 2026 00:25:44 +0700
Subject: [PATCH] feat(docs): click-to-zoom for mermaid diagrams

---
 docs/_assets/style.css   | 27 +++++++++++++++++++++++++++
 docs/_template/page.html | 17 +++++++++++++++++
 2 files changed, 44 insertions(+)

diff --git a/docs/_assets/style.css b/docs/_assets/style.css
index 46531e6..50e065d 100644
--- a/docs/_assets/style.css
+++ b/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) {
diff --git a/docs/_template/page.html b/docs/_template/page.html
index 111c13c..32bb0f2 100644
--- a/docs/_template/page.html
+++ b/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>