Pan and Zoom on Mermaid Diagrams

Introduce UI components (similar to the ones present in GitHub) to pan and zoom a Mermaid diagram.

This assumes all mermaid diagrams are rendered to fill the available horizontal space of the page (line width) and the users zooms and pans via buttons.

This FR is orthogonal to:


This would be amazing and would solve all my problems with Mermaid!

I think it would also be good to add a button expanding the diagram into something like a full-screen popup allowing the user to pan and zoom using their mouse and scroll wheel. The buttons and popup on Github are a little annoying to use, especially for long timelines, as the buttons don’t have enough granularity and the viewer is too thin to easily use.

1 Like