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.

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">

+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.

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.

+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.

+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.

+1. Please considering it.

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.

+1

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.

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!

GitHub provides the lovely zoom control (recently?)!

sequenceDiagram
  autonumber
  Alice->>John: Hello John, how are you?
  loop Healthcheck
      John->>John: Fight against hypochondria
  end
  Note right of John: Rational thoughts!
  John-->>Alice: Great!
  John->>Bob: How about you?
  Bob-->>John: Jolly good!

Really. Gitlab is lacking that feature, but having a copy button at least

You can use

1. Obsidian app (markdown editor)
2. Create a canvas file
3. Add the markdown file (having the big flowchart) into the canvas file
4. Then you can zoom into the flowchart (including zoom out, drag left, right, up, down etc) :)

This directive worked for me:
%%{
init: {
"flowchart":{
"useMaxWidth": 0
}
}
}%%

There's just no need for that 100%, just remove it..

You can use

1. Obsidian app (markdown editor)
2. Create a canvas file
3. Add the markdown file (having the big flowchart) into the canvas file
4. Then you can zoom into the flowchart (including zoom out, drag left, right, up, down etc) :)

Great idea. And now you can even import a Mermaid Flowchart into Obsidian Excalidraw, which gives even a better experience. Just make sure your mermaid code is 100% correct as I spent one day searching around why it would fraw the flowchart in Notion and Typora just fine but not in Obsidian or Excalidraw. (Spoiler, it was the last empty comment-sign I had, so really in the last line.) Nearly killed me...

I know this topic is kinda old, but how this was implemented yet? My guess it's that is not that hard given that Mermaid Editor already have that feature:

In fact, the Mermaid Editor and GitHub support for zoom were the reasons that I started to script my diagram only to find out that it doesn't have zoom in the final diagram.

this is working as well:

<script type="module">
    
   const defaultConfig = {
   startOnLoad: true,
   securityLevel: 'loose',
   flowchart: {
   useMaxWidth: 0,
   },
   gantt: {
   useMaxWidth: 0,
   },
   }
   import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
   mermaid.initialize(defaultConfig);
    
   </script>

this is working as well:

<script type="module">
    
   const defaultConfig = {
   startOnLoad: true,
   securityLevel: 'loose',
   flowchart: {
   useMaxWidth: 0,
   },
   gantt: {
   useMaxWidth: 0,
   },
   }
   import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
   mermaid.initialize(defaultConfig);
    
   </script>

Am I correct in my understanding that this is essentially the same as what @DmitryGalyuk suggested here: #1860 (comment)

In other words, we can apparently use the %%{ ... }%%% syntax within the mermaid code to pass a config?
(This appears to work well also in markdown preview (nvim) but not in Gitlab (actually in Gitlab the size is ok, but there are no scrollbars for the content, which makes only part of the diagram visible))
Is this documented somewhere and is there a documentation reference for the possible config attributes?