diff --git a/docs/_assets/style.css b/docs/_assets/style.css
index 2198f98..bd00888 100644
--- a/docs/_assets/style.css
+++ b/docs/_assets/style.css
@@ -132,6 +132,7 @@ main article img {
   display: block;
   margin: 1.25rem 0;
   border-radius: 4px;
+  cursor: zoom-in;
 }
 
 a { color: var(--accent); }
diff --git a/docs/_template/page.html b/docs/_template/page.html
index aad5e5f..f8c29b1 100644
--- a/docs/_template/page.html
+++ b/docs/_template/page.html
@@ -84,6 +84,16 @@ for (const diagram of document.querySelectorAll('.mermaid')) {
   });
 }
 
+for (const img of document.querySelectorAll('article img')) {
+  img.addEventListener('click', () => {
+    overlay.innerHTML = '';
+    const clone = img.cloneNode();
+    clone.style.cssText = 'max-width:95vw;max-height:95vh;width:auto;height:auto;border-radius:6px;';
+    overlay.appendChild(clone);
+    overlay.classList.add('open');
+  });
+}
+
 document.getElementById('theme-toggle').addEventListener('click', () => {
   const next = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
   document.documentElement.dataset.theme = next;