I
Integrated Hamster
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.