From 7dde0eb75176385b8b14a1a6f44293fed5702882 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BF=81=E4=BD=B3=E6=9E=97?= <christry.stool@gmail.com>
Date: Sat, 17 Oct 2026 18:50:48 +0000
Subject: [PATCH] feat: add expandable Mermaid diagram viewer

---
 src/components/DiagramViewer.astro | 148 +++++++++++++++++++++++++++++
 src/pages/blog/[slug].astro        |  16 +++-
 src/styles/markdown.css            |  24 ++++-
 3 files changed, 186 insertions(+), 2 deletions(-)
 create mode 100644 src/components/DiagramViewer.astro

diff --git a/src/components/DiagramViewer.astro b/src/components/DiagramViewer.astro
new file mode 100644
index 0000000..084882a
--- /dev/null
+++ b/src/components/DiagramViewer.astro
@@ -0,0 +1,148 @@
+<dialog id="diagram-viewer" aria-labelledby="diagram-viewer-title">
+  <div class="viewer-panel">
+    <header class="viewer-toolbar">
+      <h2 id="diagram-viewer-title">Diagram</h2>
+      <div class="viewer-controls">
+        <button type="button" data-action="out" aria-label="Zoom out">−</button>
+        <output aria-live="polite" aria-label="Zoom level">100%</output>
+        <button type="button" data-action="in" aria-label="Zoom in">+</button>
+        <button type="button" data-action="fit">Fit</button>
+        <button type="button" data-action="actual">100%</button>
+        <button type="button" data-action="close" aria-label="Close diagram" autofocus>Close ×</button>
+      </div>
+    </header>
+    <p class="viewer-help">Zoom in for details. Scroll to explore. Press Esc to close.</p>
+    <div class="viewer-viewport" tabindex="0" role="region" aria-label="Scrollable diagram">
+      <img alt="Expanded article diagram" draggable="false" />
+    </div>
+  </div>
+</dialog>
+
+<script>
+  function setupDiagramViewer() {
+    const dialog = document.querySelector<HTMLDialogElement>('#diagram-viewer');
+    if (!dialog) return;
+    const viewport = dialog.querySelector<HTMLElement>('.viewer-viewport')!;
+    const image = dialog.querySelector('img')!;
+    const output = dialog.querySelector('output')!;
+    const zoomOut = dialog.querySelector<HTMLButtonElement>('[data-action="out"]')!;
+    const zoomIn = dialog.querySelector<HTMLButtonElement>('[data-action="in"]')!;
+    const controller = new AbortController();
+    const { signal } = controller;
+    let width = 1;
+    let height = 1;
+    let zoom = 1;
+    let fitting = true;
+    let source: string | undefined;
+    let previousOverflow = '';
+
+    function setZoom(value: number) {
+      const oldZoom = zoom;
+      const centerX = (viewport.scrollLeft + viewport.clientWidth / 2) / oldZoom;
+      const centerY = (viewport.scrollTop + viewport.clientHeight / 2) / oldZoom;
+      zoom = Math.min(4, Math.max(0.1, value));
+      image.style.width = `${width * zoom}px`;
+      image.style.height = `${height * zoom}px`;
+      output.value = `${Math.round(zoom * 100)}%`;
+      zoomOut.disabled = zoom <= 0.1;
+      zoomIn.disabled = zoom >= 4;
+      viewport.scrollLeft = centerX * zoom - viewport.clientWidth / 2;
+      viewport.scrollTop = centerY * zoom - viewport.clientHeight / 2;
+    }
+
+    function fit() {
+      fitting = true;
+      setZoom(Math.min(1, (viewport.clientWidth - 32) / width, (viewport.clientHeight - 32) / height));
+      viewport.scrollTo(0, 0);
+    }
+
+    document.addEventListener('click', (event) => {
+      const trigger = event.target instanceof Element
+        ? event.target.closest<HTMLButtonElement>('[data-diagram-open]') : null;
+      const svg = trigger?.querySelector('svg');
+      if (!svg || dialog.open) return;
+      const viewBox = svg.viewBox.baseVal;
+      width = viewBox.width || svg.getBoundingClientRect().width;
+      height = viewBox.height || svg.getBoundingClientRect().height;
+      const copy = svg.cloneNode(true) as SVGSVGElement;
+      copy.setAttribute('width', String(width));
+      copy.setAttribute('height', String(height));
+      copy.style.maxWidth = 'none';
+      copy.style.width = `${width}px`;
+      copy.style.height = `${height}px`;
+      // An isolated SVG image preserves Mermaid styles without duplicating DOM IDs.
+      source = URL.createObjectURL(new Blob([new XMLSerializer().serializeToString(copy)], { type: 'image/svg+xml' }));
+      image.src = source;
+      previousOverflow = document.documentElement.style.overflow;
+      document.documentElement.style.overflow = 'hidden';
+      dialog.showModal();
+      fit();
+    }, { signal });
+
+    dialog.addEventListener('click', (event) => {
+      if (event.target === dialog) dialog.close();
+      const action = event.target instanceof Element
+        ? event.target.closest<HTMLButtonElement>('[data-action]')?.dataset.action : undefined;
+      if (action === 'close') dialog.close();
+      if (action === 'fit') fit();
+      if (action === 'in' || action === 'out' || action === 'actual') {
+        fitting = false;
+        setZoom(action === 'actual' ? 1 : zoom * (action === 'in' ? 1.25 : 0.8));
+      }
+    }, { signal });
+
+    function release() {
+      document.documentElement.style.overflow = previousOverflow;
+      if (source) URL.revokeObjectURL(source);
+      source = undefined;
+      image.removeAttribute('src');
+    }
+    dialog.addEventListener('close', release, { signal });
+    window.addEventListener('resize', () => {
+      if (dialog.open && fitting) fit();
+    }, { signal });
+    document.addEventListener('astro:before-swap', () => {
+      if (dialog.open) {
+        dialog.close();
+        release();
+      }
+      controller.abort();
+    }, { once: true, signal });
+  }
+  document.addEventListener('astro:page-load', setupDiagramViewer);
+</script>
+
+<style>
+  dialog {
+    width: calc(100vw - 2rem);
+    max-width: 1600px;
+    height: calc(100dvh - 2rem);
+    max-height: 100dvh;
+    margin: auto;
+    padding: 0;
+    border: 1px solid #e3e3e0;
+    border-radius: 12px;
+    background: #fff;
+    color: #37352f;
+  }
+  dialog::backdrop { background: rgb(0 0 0 / 65%); }
+  :global(.dark) dialog { background: #191919; color: #e5e5e5; border-color: #444; }
+  .viewer-panel { display: flex; flex-direction: column; height: 100%; }
+  .viewer-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #8884; }
+  h2 { font-size: 1rem; font-weight: 600; }
+  .viewer-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
+  button { padding: 6px 10px; min-height: 44px; min-width: 44px; border: 1px solid #8885; border-radius: 6px; font-size: 14px; cursor: pointer; }
+  button:hover { background: #8882; }
+  button:disabled { opacity: .4; cursor: default; }
+  button:focus-visible, .viewer-viewport:focus-visible { outline: 2px solid #7c5cff; outline-offset: -2px; }
+  output { min-width: 48px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
+  .viewer-help { margin: 0; padding: 8px 16px; font-size: 12px; opacity: .7; }
+  .viewer-viewport { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 16px; }
+  img { display: block; max-width: none; margin: auto; }
+  @media (max-width: 640px) {
+    dialog { width: 100vw; height: 100dvh; max-width: 100vw; border-radius: 0; border: 0; }
+    .viewer-toolbar { padding: 8px; }
+    .viewer-controls { gap: 4px; }
+    .viewer-help { padding: 8px; }
+  }
+</style>
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
index bf7302b..8ac0039 100644
--- a/src/pages/blog/[slug].astro
+++ b/src/pages/blog/[slug].astro
@@ -1,6 +1,7 @@
 ---
 import BaseLayout from "../../layouts/BaseLayout.astro";
 import TableOfContents from "../../components/TableOfContents";
+import DiagramViewer from "../../components/DiagramViewer.astro";
 import PostTagStrip from "../../components/PostTagStrip";
 import { getPosts } from "../../utils/posts";
 import { render } from "astro:content";
@@ -101,6 +102,7 @@ const isoDate =
       <TableOfContents headings={headings} client:load />
     </div>
   </div>
+  <DiagramViewer />
 </BaseLayout>
 
 <script>
@@ -180,7 +182,18 @@ const isoDate =
       const id = `mermaid-${Math.random().toString(36).slice(2, 9)}`;
       try {
         const { svg } = await mermaid.render(id, diagram.definition);
-        diagram.element.innerHTML = svg;
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'mermaid-expand';
+        button.dataset.diagramOpen = '';
+        button.setAttribute('aria-label', 'Expand diagram');
+        button.setAttribute('aria-haspopup', 'dialog');
+        button.innerHTML = svg;
+        const hint = document.createElement('span');
+        hint.className = 'mermaid-expand-hint';
+        hint.textContent = '⤢ Expand diagram';
+        button.append(hint);
+        diagram.element.replaceChildren(button);
       } catch (e) {
         console.error('Mermaid rendering failed:', e);
       }
@@ -197,6 +210,7 @@ const isoDate =
       }
     });
     observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+    document.addEventListener('astro:before-swap', () => observer.disconnect(), { once: true });
   }
 
   document.addEventListener("astro:page-load", () => {
diff --git a/src/styles/markdown.css b/src/styles/markdown.css
index dcd122e..48a2d15 100644
--- a/src/styles/markdown.css
+++ b/src/styles/markdown.css
@@ -101,7 +101,29 @@
 }
 
 .prose .mermaid-diagram {
-  @apply my-8 flex justify-center;
+  @apply my-8;
+}
+
+.prose .mermaid-expand {
+  @apply w-full rounded-xl border border-slate-200 dark:border-slate-700 p-3 sm:p-5;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  cursor: zoom-in;
+}
+
+.prose .mermaid-expand:hover {
+  @apply bg-surface-secondary dark:bg-surface-dark-secondary;
+}
+
+.prose .mermaid-expand:focus-visible {
+  outline: 2px solid #7c5cff;
+  outline-offset: 4px;
+}
+
+.prose .mermaid-expand-hint {
+  @apply text-xs text-ink-secondary dark:text-ink-dark-secondary;
 }
 
 .prose .mermaid-diagram svg {