Zoom/Pan Support for Mermaid Diagrams

Problem

Large Mermaid diagrams render at a fixed scale within the article body. When a diagram exceeds the content width, it is scaled down to fit — often to the point of being unreadable.

Current Behavior

Mermaid diagrams are static images within articles. No zoom or pan interaction is available. Diagrams with many nodes or long labels become illegible at the reduced size.

Proposed Behavior

• Diagrams should support zoom

• Users should be able to pan/drag the diagram once zoomed in

• A reset/fit-to-window control should restore the original view

• Optionally: a fullscreen/expand button to view the diagram in a modal overlay at full viewport size

Why This Matters

Mermaid is particularly well-suited for complex network diagrams, flowcharts, and architecture documentation — exactly the type of content MSPs need to document client environments. These diagrams are inherently large, and the value is lost if users can't read them.

Suggested Implementation Reference

Many Mermaid integrations (GitLab, Notion, Confluence) handle this via an SVG pan/zoom library (e.g., svg-pan-zoom) or by rendering diagrams in a scrollable, zoomable container.