Summary

Support interactive image-viewer features (such as zoom in/out, pan/drag, and lightbox/full-screen preview) for rendered Mermaid diagrams in MarkText.

Problem it solves

When viewing complex or large Mermaid diagrams in MarkText, the rendered SVG is displayed at a fixed/static size within the editor. Unlike standard image previewers, users cannot zoom in to examine small text/details, zoom out for an overall view, or pan around large diagrams smoothly. This makes reading large flowcharts, sequence diagrams, or architecture diagrams difficult inside the editor.

Proposed solution

Treat rendered Mermaid diagrams similarly to images with full viewing interaction support:

1. Zoom & Pan Controls:
   • Ability to zoom in and zoom out (via mouse wheel, gesture, or toolbar buttons).
   • Drag to pan around the diagram when zoomed in.
   • A "Reset Zoom / Fit to Window" button to restore default scaling.
2. Lightbox / Full-screen Preview:
   • Double-clicking or clicking an "Enlarge / Full Screen" icon on the diagram block toolbar to open the rendered graphic in a dedicated lightbox modal window with complete zoom/pan controls.

Alternatives considered

• Exporting the document to HTML/PDF or opening rendered graphics in external vector tools, which interrupts the writing and reading workflow inside MarkText.
• Adjusting global editor container width settings, which changes the overall document layout rather than addressing diagram inspection specifically.

Additional context

Integrating an SVG pan/zoom or lightbox library (such as viewerjs or svg-pan-zoom) for rendered diagram blocks would provide a consistent, user-friendly image-viewing experience.