Better UX to view and navigate large Mermaid Diagrams
Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.
Proposal
Mermaid diagrams can be complex to visualize, especially once they grow above a certain size horizontally and the framing starts to shrink the overall display. Since the diagram elements are immovable, and the layout precalculated, it means the viewport should move around the diagram to improve navigation, for zooming in and moving around the diagram space.
Very recently, Github has developed a new experience for mermaid diagrams. There is now a navigation section, where the user can zoom in and out (and move around), and a full-screen mode (perhaps a bit basic, keeps the same height but allows full width).
You can go through the README of the mermaid project on Github to see how all the diagrams are getting rendered with the new navigation now.
There is thus the following features for Gitlab to be on-par UX wise:
| Rendering | Zooming in | Full Screen |
|---|---|---|
 |
 |
 |
- Allow to zoom into the diagram viewport, and reset zoom
- Allow to move around the diagram viewport, and reset to center (probably reset should work as in Github, with a single button to return to original render)
- Allow to full screen a diagram in a modal or similar (full width + height & disappear if click away from the full screen panel)
I would add the following as stretch goals
- Allow to copy as a picture, and not just as a string
- Move around the viewport by dragging the diagram instead of buttons which are less modern or elegant
- To prevent vertical layouts from becoming huge when rendered, perhaps some argument to define the viewport size, since we can now zoom in if it is too small.
```mermaid height=medium
flowchart TD
<some big vertical diagram>
```