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