From d02653593b7ad3ab55c2de314591e16ebf44842a Mon Sep 17 00:00:00 2001
From: Sai Prakash <sai@mindstaq.com>
Date: Sat, 12 Sep 2026 22:42:21 -0400
Subject: [PATCH] Add fullscreen lightbox for dense Mermaid diagrams

An "Expand" button on rendered diagrams opens a large Dialog showing
the same SVG scaled up and scrollable, so dense flowcharts/sequence
diagrams are readable without leaving the spec.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01R9PZooiLFe7kPQjWS7xk4V
---
 components/mermaid-diagram.tsx             | 55 +++++++++++++++++-----
 tests/components/markdown-content.test.tsx |  1 +
 2 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/components/mermaid-diagram.tsx b/components/mermaid-diagram.tsx
index d12d256..9652a91 100644
--- a/components/mermaid-diagram.tsx
+++ b/components/mermaid-diagram.tsx
@@ -1,8 +1,9 @@
 'use client'
 
 import { isValidElement, useEffect, useId, useState, type ReactNode } from 'react'
-import { Code2, GitBranch } from 'lucide-react'
+import { Code2, GitBranch, Maximize2 } from 'lucide-react'
 import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
 
 /** Renders Mermaid source to sanitized SVG on the client, with a toggle back to the raw source for copying/editing. */
 export function MermaidDiagram({ source }: { source: string }) {
@@ -10,6 +11,7 @@ export function MermaidDiagram({ source }: { source: string }) {
   const [svg, setSvg] = useState<string | null>(null)
   const [error, setError] = useState<string | null>(null)
   const [showSource, setShowSource] = useState(false)
+  const [expanded, setExpanded] = useState(false)
 
   useEffect(() => {
     let cancelled = false
@@ -31,23 +33,39 @@ export function MermaidDiagram({ source }: { source: string }) {
 
   const failed = error !== null
   const displaySource = showSource || failed || svg === null
+  const canExpand = svg !== null && !failed && !showSource
 
   return (
     <div className="not-prose my-4 overflow-hidden rounded-lg border bg-card">
       <div className="flex items-center justify-between border-b bg-muted/40 px-3 py-1.5">
         <span className="text-xs font-medium text-muted-foreground">Diagram</span>
-        {!failed && svg !== null && (
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            className="h-6 gap-1.5 px-2 text-xs"
-            onClick={() => setShowSource((s) => !s)}
-          >
-            {showSource ? <GitBranch className="h-3 w-3" /> : <Code2 className="h-3 w-3" />}
-            {showSource ? 'View diagram' : 'View source'}
-          </Button>
-        )}
+        <div className="flex items-center gap-1">
+          {canExpand && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-6 gap-1.5 px-2 text-xs"
+              onClick={() => setExpanded(true)}
+              title="View fullscreen"
+            >
+              <Maximize2 className="h-3 w-3" />
+              Expand
+            </Button>
+          )}
+          {!failed && svg !== null && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-6 gap-1.5 px-2 text-xs"
+              onClick={() => setShowSource((s) => !s)}
+            >
+              {showSource ? <GitBranch className="h-3 w-3" /> : <Code2 className="h-3 w-3" />}
+              {showSource ? 'View diagram' : 'View source'}
+            </Button>
+          )}
+        </div>
       </div>
       <div className="p-3">
         {failed && (
@@ -59,6 +77,17 @@ export function MermaidDiagram({ source }: { source: string }) {
           <div className="overflow-x-auto [&_svg]:mx-auto" dangerouslySetInnerHTML={{ __html: svg }} />
         )}
       </div>
+      {canExpand && (
+        <Dialog open={expanded} onOpenChange={setExpanded}>
+          <DialogContent className="flex max-h-[92vh] w-full max-w-[96vw] flex-col overflow-hidden sm:max-w-[96vw]">
+            <DialogTitle className="sr-only">Diagram, fullscreen</DialogTitle>
+            <div
+              className="min-h-0 flex-1 overflow-auto [&_svg]:mx-auto [&_svg]:h-auto [&_svg]:max-w-none"
+              dangerouslySetInnerHTML={{ __html: svg }}
+            />
+          </DialogContent>
+        </Dialog>
+      )}
     </div>
   )
 }
diff --git a/tests/components/markdown-content.test.tsx b/tests/components/markdown-content.test.tsx
index 67ab099..7603401 100644
--- a/tests/components/markdown-content.test.tsx
+++ b/tests/components/markdown-content.test.tsx
@@ -28,5 +28,6 @@ describe('MarkdownContent', () => {
     expect(html).toContain('flowchart TD')
     expect(html).toContain('A --&gt; B')
     expect(html).not.toContain('language-mermaid')
+    expect(html).not.toContain('Expand')
   })
 })