Pan and Zoom on Mermaid Diagrams

Feature requests
,
1

Introduce UI components (similar to the ones present on GitHub) to pan and zoom a Mermaid diagram.

chrome_iuAQmJIgOE
chrome_iuAQmJIgOE785×478 15.6 KB

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:

12 Likes
2

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.

1 Like
3

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.

2 Likes
4

I was looking for this options as well. Meanwhile you can use the new functionality of Excalidraw to import / render mermaid graphs.

5

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.

1 Like
6

It’s cool

7

Pan and zoom would be awesome!

8

+1 given that Breadcrumbs now relies alot on Mermaid

1 Like