Skip to content

Add fullscreen lightbox for dense Mermaid diagrams - #77

Merged
SylonZero merged 1 commit into
masterfrom
feat/mermaid-diagram-lightbox
Sep 13, 2026
Merged

SylonZero merged 1 commit into
masterfrom
feat/mermaid-diagram-lightbox

Conversation

@SylonZero

Copy link
Copy Markdown
Owner

Summary

  • Follow-up to Add Mermaid diagram rendering to Specs #76: dense diagrams (large flowcharts, sequence diagrams) can be hard to read at their inline size.
  • Adds an "Expand" button to rendered MermaidDiagram widgets that opens a large, scrollable Dialog lightbox with the same SVG scaled up.
  • Button only appears once the diagram has rendered successfully (not during the raw-source fallback or on a render error).

Test plan

  • pnpm run test — 299/299 passing (extended markdown-content.test.tsx to assert the "Expand" control isn't present in the pre-hydration source fallback)
  • tsc --noEmit clean on touched files
  • Manual check: open a spec with a dense mermaid diagram, click Expand, confirm it renders larger and scrolls

🤖 Generated with Claude Code

https://claude.ai/code/session_01R9PZooiLFe7kPQjWS7xk4V

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
@SylonZero
SylonZero merged commit b83ddd9 into master Sep 13, 2026
1 check passed
@SylonZero
SylonZero deleted the feat/mermaid-diagram-lightbox branch September 13, 2026 02:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant