Introduce UI components (similar to the ones present on GitHub) to pan and zoom a Mermaid diagram.
This assumes all mermaid diagrams are rendered to fill the available horizontal space of the page (line width) and the user zooms and pans via buttons.
This FR is orthogonal to:
This would be amazing and would solve all my problems with Mermaid!
I think it would also be good to add a button expanding the diagram into something like a full-screen popup allowing the user to pan and zoom using their mouse and scroll wheel. The buttons and popup on Github are a little annoying to use, especially for long timelines, as the buttons don’t have enough granularity and the viewer is too thin to easily use.
My current setup:
.mermaid svg {
max-width: 100%;
height: auto;
}
.scale1000 .mermaid:hover svg {
max-width: 1000%
}
.scale500 .mermaid:hover svg {
max-width: 500%
}
.scale250 .mermaid:hover svg {
max-width: 250%
}
This is mainly for really large graphs that end up getting cropped. The graph gets restricted to 100% width normally, then expands to either its original width or whatever max-width is on hover. This gets combined with obsidian stylist to set the scale class:
`classname:scale250`
```mermaid
classDiagram
...
It’s a bit chunky but it makes sure that I can at least get both a full-picture view as well as a zoomed view when necessary.
I was looking for this options as well. Meanwhile you can use the new functionality of Excalidraw to import / render mermaid graphs.
If found a workaround (in Obsidian 1.5.3 at least) by using ![[mermaid graph note]] embedded in another note, and you can scroll left and right to see the complete graph.
It’s cool
Pan and zoom would be awesome!
+1 given that Breadcrumbs now relies alot on Mermaid
I’d love to hear what the devs think about this.
Almost a year. Is there any progress on this?
̵I̵ ̵w̵i̵s̵h̵ ̵t̵h̵e̵ ̵G̵i̵t̵H̵u̵b̵ ̵t̵e̵a̵m̵ ̵j̵u̵s̵t̵ ̵o̵p̵e̵n̵-̵s̵o̵u̵r̵c̵e̵ ̵t̵h̵e̵i̵r̵ ̵m̵e̵r̵m̵a̵i̵d̵ ̵p̵a̵n̵ ̵a̵n̵d̵ ̵z̵o̵o̵m̵ ̵f̵e̵a̵t̵u̵r̵e̵ ̵s̵o̵ ̵w̵e̵ ̵c̵a̵n̵ ̵s̵e̵e̵ ̵s̵o̵m̵e̵ ̵p̵r̵o̵g̵r̵e̵s̵s̵.̵
Okay, maybe not, because moving around with a clicking button just feels weird.
Can’t we zoom in and out and pan with the mouse? Would that be better? Like Excalidraw.
Here is what I currently use as a temporary fix for “too wide” & “too small text” mermaid flowchart.
.mermaid svg {
max-width: 100%;
height: auto;
}
.mermaid {
overflow: scroll;
}
.mermaid:hover svg {
max-width: 250%
}
Maybe more like this would be better?
This works perfectly. Minimal and fast, amazing!
Added a transition effect for this snippet:
.mermaid {
overflow: scroll;
>svg {
transition: max-width 0.5s;
max-width: 100%;
height: auto;
}
&:hover>svg {
max-width: 250%;
}
}