itch.io

Unfortunately I cannot add screenshots, as the maximum body size is 20kB.

Hi,

when a Mermaid graph becomes to complex that its width exceeds the width of the preview (or export) page, the graph is scaled down symmetrically. However the original height of the graph remains and is not scaled down, and the Mermaid is kept vertically and centered, resulting in paddings above and below the graph.

Example:

This causes the graph to be scaled down horizontally to fit the page width and causes huge gaps between "above text" and the actual graph, and between the graph and "below text":

Above text
```
graph TD
  start((a))  ==>  boolGZ{a}
  boolGZ == true  ==> wqFN_P_Ansage>a]
    wqFN_P_Ansage ==> ansageFN_P[a]
    ansageFN_P ==> rtimeout_FN_P{a}
      rtimeout_FN_P == true ==> wqFN_P_I>a]
      rtimeout_FN_P == false ==>  dtmfFN_P{a}
         dtmfFN_P == 1 ==> wqFN_P_I>a]
        wqFN_P_I ==> boolGZPI{a}
        boolGZPI == true ==> rrFN_P_I((1234567890))
          grFN_P_I[/a/] -.-> rrFN_P_I
        boolGZPI -- false --> wqFN_P_I_Feierabend>1234567890]
          wqFN_P_I_Feierabend --> ansageFN_P_I_Absage[a]
          ansageFN_P_I_Absage --> beenden
      dtmfFN_P == 2 ==> wqFN_P_A>a]
        wqFN_P_A ==> boolGZPA{a}
        boolGZPA == true ==> rrFN_P_A((1234567890))
          grFN_P_A[/a/] -.-> rrFN_P_A
        boolGZPA -- false --> wqFN_P_A_Feierabend>1234567890]
          wqFN_P_A_Feierabend --> ansageFN_P_A_Absage[a]
          ansageFN_P_A_Absage --> beenden
      dtmfFN_P -- Timeout --> ansageFN_P[a]
  boolGZ -- false --> wqFN_Feierabend>1234567890]
    wqFN_Feierabend --> ansageFN_Absage[a]
    ansageFN_Absage --> beenden((a))
```
Below text

However this renders well, as the graph is not scaled because it is slightly slimmer because the node text is shorter:

Above text
```
graph TD
  start((a))  ==>  boolGZ{a}
  boolGZ == true  ==> wqFN_P_Ansage>a]
    wqFN_P_Ansage ==> ansageFN_P[a]
    ansageFN_P ==> rtimeout_FN_P{a}
      rtimeout_FN_P == true ==> wqFN_P_I>a]
      rtimeout_FN_P == false ==>  dtmfFN_P{a}
         dtmfFN_P == 1 ==> wqFN_P_I>a]
        wqFN_P_I ==> boolGZPI{a}
        boolGZPI == true ==> rrFN_P_I((a))
          grFN_P_I[/a/] -.-> rrFN_P_I
        boolGZPI -- false --> wqFN_P_I_Feierabend>a]
          wqFN_P_I_Feierabend --> ansageFN_P_I_Absage[a]
          ansageFN_P_I_Absage --> beenden
      dtmfFN_P == 2 ==> wqFN_P_A>a]
        wqFN_P_A ==> boolGZPA{a}
        boolGZPA == true ==> rrFN_P_A((a))
          grFN_P_A[/a/] -.-> rrFN_P_A
        boolGZPA -- false --> wqFN_P_A_Feierabend>a]
          wqFN_P_A_Feierabend --> ansageFN_P_A_Absage[a]
          ansageFN_P_A_Absage --> beenden
      dtmfFN_P -- Timeout --> ansageFN_P[a]
  boolGZ -- false --> wqFN_Feierabend>a]
    wqFN_Feierabend --> ansageFN_Absage[a]
    ansageFN_Absage --> beenden((a))
```
Below text

The issue is already known and can be triggered in different ways:

https://github.com/mermaid-js/mermaid/issues/1984

A workaround is discussed here, affecting R:

https://stackoverflow.com/questions/52925479/mermaid-diagrams-adjust-white-space...

The workaround is to explicitly set height (and width) to 100%.

deepdwn 0.36.1 on Linux