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