large TD flowcharts are too wide, and have huge empty space at top and bottom

[luvcraft]

Describe the bug As more nodes are added to a flowchart, mermaid adds extra empty space padding to the top and bottom of the SVG, and spaces nodes further and further apart horizontally, resulting in a flowchart where the nodes are too small to read.

To Reproduce Steps to reproduce the behavior:

1. Enter the following mmd in the mermaid live editor:

graph TD
0(node 0)
0 --> 1
1(node 1)
1 --> 2
2(node 2)
2 --> 3
3(node 3)
3 --> 4
3 --> 5
3 --> 6
4(node 4)
4 --> 7
4 --> 8
4 --> 9
4 --> 10
4 --> 11
5(node 5)
5 --> 14
6(node 6)
7(node 7)
7 --> 17
7 --> 29
8(node 8)
8 --> 30
9(node 9)
9 --> 13
9 --> 17
9 --> 31
10(node 10)
10 --> 17
10 --> 24
10 --> 52
11(node 11)
11 --> 12
11 --> 17
11 --> 32
12(node 12)
12 --> 17
13(node 13)
13 --> 14
13 --> 15
13 --> 19
14(node 14)
14 --> 17
15(node 15)
15 --> 16
15 --> 17
15 --> 36
15 --> 59
16(node 16)
16 --> 17
17(node 17)
17 --> 18
18(node 18)
18 --> 19
19(node 19)
19 --> 20
20(node 20)
20 --> 21
20 --> 22
21(node 21)
21 --> 27
22(node 22)
22 --> 23
23(node 23)
23 --> 24
23 --> 25
24(node 24)
24 --> 25
25(node 25)
25 --> 26
26(node 26)
26 --> 27
27(node 27)
27 --> 28
27 --> 42
28(node 28)
28 --> 29
28 --> 30
28 --> 31
28 --> 32
28 --> 39
29(node 29)
29 --> 35
29 --> 40
29 --> 44
29 --> 64
30(node 30)
30 --> 33
30 --> 64
31(node 31)
31 --> 34
31 --> 40
31 --> 44
31 --> 64
32(node 32)
32 --> 48
32 --> 64
33(node 33)
33 --> 49
34(node 34)
34 --> 37
34 --> 38
34 --> 43
35(node 35)
35 --> 36
35 --> 39
36(node 36)
36 --> 42
37(node 37)
37 --> 41
38(node 38)
38 --> 43
38 --> 50
38 --> 59
39(node 39)
39 --> 40
39 --> 44
39 --> 64
40(node 40)
40 --> 49
40 --> 72
41(node 41)
41 --> 47
42(node 42)
42 --> 45
43(node 43)
43 --> 55
44(node 44)
44 --> 46
44 --> 48
45(node 45)
45 --> 64
45 --> 71
46(node 46)
46 --> 71
46 --> 72
47(node 47)
47 --> 50
47 --> 59
48(node 48)
48 --> 64
49(node 49)
49 --> 51
49 --> 56
50(node 50)
50 --> 53
51(node 51)
51 --> 52
52(node 52)
52 --> 54
53(node 53)
53 --> 64
53 --> 72
54(node 54)
54 --> 55
54 --> 56
55(node 55)
55 --> 58
55 --> 59
56(node 56)
56 --> 57
57(node 57)
57 --> 60
58(node 58)
58 --> 61
59(node 59)
59 --> 61
60(node 60)
60 --> 62
60 --> 63
61(node 61)
61 --> 64
62(node 62)
62 --> 65
63(node 63)
63 --> 66
64(node 64)
65(node 65)
65 --> 67
65 --> 70
66(node 66)
66 --> 68
66 --> 69
67(node 67)
67 --> 69
68(node 68)
68 --> 70
69(node 69)
69 --> 71
70(node 70)
70 --> 72
71(node 71)
72(node 72)

2. Observe the large areas of whitespace above and below the flowchart
3. Observe that nodes are horizontally spaced much further apart than they need to be
4. Observe that the nodes are too small to read

Expected behavior

• Large areas of empty space should not be present above and below the flowchart
• The flowchart should economize horizontal space, and should keep nodes a legible size

[becca-tiessen]

Also observing this when there are more than 4 participants in a sequence diagram; large areas of whitespace are visible above and below the diagram.

[luvcraft]

Issue is still present in mermaid 10.0.2. Compare this 190-node graph generated with mermaid:

...with the same data graphed by graphviz-react: