Enable Mermaid Zoom

Use case or problem

Larger Mermaid graphs are currently very hard to read. There is also a design conflict between the size of the graph (which may need to be wide) and the available real estate in a note, in simple terms:

  • a note might be the equivalent of a portrait A4 page, but –
  • the Mermaid graph might actually be the equivalent of a landscape A3 page

In order to make them fit together in the current setup, something has to give. Either:

  • the Mermaid graph is shrunk down to the width of the note (this makes the graph unreadable) - OR
  • the Mermaid graph is rendered at actual size, breaking the flow of the note

I see there is a feature request for dynamic diagram resizing, but I don’t think that will actually break the fundamental tension between these two.

Proposed solution

What we need is a simple CTA (similar to the </> that appears in the sidebar on hover) that does one of the following:

  • enables the user to render the diagram as a pop-up SVG. A close icon is pinned permanently to the top of the window, no matter where the user scrolls, enabling them to quickly tab back out of the pane
  • creates an on-diagram magnifying glass that “pops up” the content of the diagram as a cursor hovers over it. This second option would work well in desktop but I am not sure how it would translate to mobile. There is a really nifty example of this idea here - see the Outer Drag example & notice what happens with the box below.

Current workaround (optional)

This is a screenshot (RL) of me trying to read a large SVG in Obsidian. I have used ctrl+ to zoom in because I know of no other way to make the text legible(ish):

The screenshot is taken from the whole of my screen. The circled bit is what I am trying to read.

Related feature requests (optional)

This: Can we make mermaid renders a little bigger, just like typora did? — but it’s not entirely clear what came of it.
Also this: Ability to resize and align mermaid diagrams - #34 by Durant