Massive whitespace above and below graph

Describe the bug Very large charts result in massive amounts of excess whitespace above and below the diagram making it practically unusable. I was using mermaid to chart a family tree with approximately 400 relationships/nodes. Performance is very acceptable for such an application, so it’s unfortunate that I’ve encountered this issue.

To Reproduce Steps to reproduce the behavior: The family tree contains confidential information so I cannot post it, but the problem can easily be reproduced by repeating the simple relationship below. I’m showing 5 repetitions below. The problem starts manifesting itself after about 50 repetitions and becomes extremely problematic at around 150, getting progressively worse as more elements are added to the graph.

flowchart BT
A-->B-->C-->D-->E
A-->B-->C-->D-->E
A-->B-->C-->D-->E
A-->B-->C-->D-->E
A-->B-->C-->D-->E

50 repetitions:

150 repetitions:

Here’s what I’m experiencing with the actual family tree. The first example is using the VS Code mermaid extension. Please note the size of the scrollbar handle on the right to get an idea how much empty space is above and below the diagram in addition to the empty space in the visible portion.

The second example is using mermaid in Joplin. Here’s what PDF output looks like, and the same amount of empty space is present in the live view.

The problem can also be reproduced in the Live Mermaid Editor. Here’s what happens with 500 repetitions of the aforementioned example:

Expected behavior The size should be limited to the visible extent of the graph.

Screenshots See above.

Desktop (please complete the following information):

• any OS

Smartphone (please complete the following information):

• any device

Additional context Add any other context about the problem here.

[tessus]

We have the same problem in Joplin. People have found a workaround by adding the following css:

.mermaid svg { height: auto; }

@knsv ^^^

[listx]

For context, there was a fix for this in #2312 but it was reverted in 38ef0611753fcc1e8ef7de024300614cd4768b8a (presumably because it broke other things).