ZOOM!!!

[zjslqshqz]

look！

live-edito

look this live-edito

I want

When I made a more reproducible flowchart, I wanted a zoom function. Otherwise, I can only save it as a picture for zooming. .

[maelstrom256]

The main problem of flowcharts is hardnailing width=100% attribute and style={max-width: …px} that render any diagram in completely useless unreadable unscrollable and unzoomable mess.

Internet full of broken recipes how to force mermaid to not forcing, but they are obsolete.

[yringler]

The markup puts a width="100%" - that ensures that if you have a massive flowchart, it will only be readable never be readable. It should be removed.
It could be placed in a wrapper with width:100%, which would give you scrollbars.

<svg id="graph-div" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="2283.43505859375" style="max-width: 3595.38232421875px;" viewBox="0 0 3595.38232421875 2283.43505859375">

[segunak]

+1 on this. Have created some pretty massive diagrams only to be disappointed when it's so zoomed out nobody can really see it properly. I've played around with directives but haven't been able to find anything that affects the zoom level of a large diagram.

[dgbittner-sb]

Agreed. Please include zoomable results.
I love this tool, but it only works with small diagrams.
A medium to large database schema is completely unreadable.

[oxijas]

+1 also. Nice tool but not suitable for any serious flowcharts as you can not properly see the results if you have more than a few steps in your chart.

[segunak]

+1 also. Nice tool but not suitable for any serious flowcharts as you can not properly see the results if you have more than a few steps in your chart.

I've found the only real way around this is to make the chart vertical, and then within it have some sub graphs that you force left to right for things that must be shown horizontally. It results in some pretty gnarly diagrams code wise, but that's the only solution I've been able to employ.

[0x7FFFFFFFFFFFFFFF]

+1. Please considering it.

[Jaciss]

If you're desperate you can use d3.js to do this quickly, but it's a huge graphing/data document lib on its own so I wouldn't recommend it for regular use. Mentioned in #535 (comment) See this fiddle for a working demo: https://jsfiddle.net/zu_min_com/2agy5ehm/26/
Using only the zoom module (https://github.com/d3/d3-zoom) reduces size greatly but it's still not an ideal solution.

[otaviosgoncalves]

+1

[corentinleberre]

I've made a little plugin using d3 to zoom in mermaid diagram rendered in Docsify.

https://corentinleberre.github.io/docsify-mermaid-zoom/#/
https://github.com/corentinleberre/docsify-mermaid-zoom

Maybe you can reuse piece of code for your own need.

[segunak]

I've made a little plugin using d3 to zoom in mermaid diagram rendered in Docsify.

https://corentinleberre.github.io/docsify-mermaid-zoom/#/ https://github.com/corentinleberre/docsify-mermaid-zoom

Maybe you can reuse piece of code for your own need.

Dude, that's awesome. Good work!