mermaid: make zoom configurable

[McShelby]

It may be preferable to turn the mermaid zoom on/off thru configuration.

If we are implementing this we have to provide multiple configuration settings to set the zoom behaviour:

• global (default: true)
• per page (overrides global if set)
• per graph (overrides global and page if set; only available for shortcode usage; not available for codefences)

[The-going]

If the option is to remove the zoom, is it possible to put the final image in a separate window with scrolling (horizontal/vertical)? If this happens, it will be a very good option.

[McShelby]

Having the option to open the graph in another window may result in further configuration parameters. Every additional parameter complicates configuration, so I am a bit reluctant to go this way.

Display in a separate window is technically difficult because the rendered graph SVG is generated and embedded in the site by client site JS code. Maybe a scrollable lightbox is more "theme-like" (because a lightbox is already in use with normal images) but also results in non trival (as in: just display an URL) code.

Nevertheless I don't plan to work on this issue in the foreseeable future. It's just a reminder to consider the scope if this is really implemented.

Also: Since Hugo 0.89 the default Markdown generator Goldmark comes with a built-in mermaid extension. This doesn't seem to be active in the Hugo shipment at the moment, but this may change soon.

If it will be activated and be supported by this theme, handling for Mermaid graphs will change dramatically. That's the reason I don't want to invest to much time in Mermaid features at the moment, as they are expected to change anyways.

[The-going]

Thanks for the clarification.

[thenktor]

I've noticed, that on a mobile device (iPhone) I cannot scroll anymore when I'm looking at a mermaid chart. Furthermore zoom is also not possible.
On desktop browsers it's also quite annoying when scrolling a page and you get stuck on a big mermaid flow chart.

Disabling mermaid zoom should fix both and therefore is a good idea 😉

[McShelby]

After removing jQuery and replacing the jQuery dependend zoom implementation by something different (here d3), the new zoom libaray now interferes with interactive Mermaid graphs (like the variant generator in the exampleSite).

So now, we are in the need to make the behavior configurable.

Although the idea of a lightbox isn't off the table, at the moment it is sufficient just turn off by configuration.