Zoom feature for diagrams and charts (Mermaid, etc) in Quarto HTML (lightbox click to zoom and drag)

[MurzNN]

Description

Charts pretty often contain a lot of elements, so when Quarto renders them using full width, usually the elements and text become too small to read. Therefore, we should provide the ability to zoom in and drag the diagrams and charts, to allow readers to read the content.

Would be great to implement this by reusing the lightbox feature, which is already available for images, so display in the document a small thumbnail of the diagram, with the ability to click to zoom in on a modal window.

[mcanouil]

Lightbox and mermaid are two third party JavaScript libraries.
That's very unlikely the Quarto team will take on such development.

Note that you can use mermaid-format and target png or svg instead of JS rendering, then you can easily integrate with lightbox as you would do for any images.

You can also create your own Quarto extension implementing whatever custom solution you want.
There are already 300+ from the community.
Extensions are the mechanism in place to allow users to add features.

[MurzNN]

I am not experienced enough yet in creating Qarto extensions (yet?), and described this feature request as a common feature that users would expect by default, because in almost every document with large charts, the chart components and texts are too small to read, and almost everyone wants to zoom them in to see the detals.

Also, pretty often the chart has a small width but a large height, and it is rendered with 100% width on the full page, and to fix this users insert them into 25% width container, and again - this makes the chart elements hard to read without zooming.

So, I think it's worth investing some time into making this feature work by default, or documenting how to achieve this with simple manual steps.

So, if we can switch mermaid-format to PNG, then it should simplify the integration with the Lightbox task? Could you please provide an example on how to do this? I already tried to switch mermaid to PNG, but faced a bug #14457

[mcanouil]

As I said, you only have to set the format, then lightbox will take care of it without anything from you.

---
format: html
mermaid-format: png
lightbox: true
---

```{mermaid}
graph TD
    A[Start] --> B{Is it working?}
    B -- Yes --> C[Great!]
    B -- No --> D[Check the code]
    D --> E{Is the code correct?}
    E -- Yes --> F[Check dependencies]
    E -- No --> G[Fix the code]
    F -- Yes --> H[Try again]
    F -- No --> I[Install missing dependencies]
    G --> H
    I --> H
```