Add GitHub-style pan and zoom controls to Mermaid diagrams in HTML output

[ar-puuk]

Description

What I want to achieve

I am requesting interactive pan and zoom controls for Mermaid diagrams rendered in Quarto HTML outputs.

Currently, large Mermaid diagrams in Quarto HTML often overflow the page or scale down until the text is unreadable. Manual workarounds like setting fig-width aren't fully responsive for web readers, and the existing lightbox extension doesn't natively support these generated inline SVGs.

Proposed Solution

It would be amazing to eventually see a pan/zoom UI overlay for Mermaid diagrams, similar to how GitHub natively renders them. As shown in the reference file image_ca591f.png, GitHub uses dedicated control panels floating over the diagram container.

If possible, it would be incredibly helpful if Quarto could offer similar capabilities, such as:

• A navigation pad with arrows to pan across the diagram.
• Dedicated zoom in (+) and zoom out (-) buttons.
• A reset icon to snap the diagram back to its default scale.
• Toggles to adjust pan/scroll behavior or copy the diagram.

Why it is important

• Accessibility: Drastically improves readability for complex flowcharts and architecture diagrams.
• Parity: Brings Quarto's Mermaid integration closer to modern documentation platforms like GitHub.
• Ease of Use: Alleviates a major authoring pain point regarding diagram overflow and cropping without requiring hardcoded dimensions.

Thank you to the Quarto team for the amazing tool, and I appreciate your consideration of this enhancement!