Overflowing graph + wrapped node text

[wjm41]

I was trying to generate these mermaid flowcharts when I found that the nodes don't get resized properly in order to show all of the text - badly cropped text follows:

mermaid graph TD; coords("(2N,M) particle coordinates")-->dist_mat(Distance matrix D); coords -- PCA --> one_d("(2N, 1) One Dimensional Projection") one_d -- sort --> approx_soln(Approximate Pairing) dist_mat --> obj(Approximate target value) approx_soln --> obj

When trying to fix this, I also found that making the graph go from left to right causes it to overflow:

mermaid graph LR; coords("(2N,M) particle coordinates")-->dist_mat(Distance matrix D); coords -- PCA --> one_d("(2N, 1) One Dimensional Projection") one_d -- sort --> approx_soln(Approximate Pairing) dist_mat --> obj(Approximate target value) approx_soln --> obj

These issues don't occur when rendering the mermaid graphs elsewhere (eg VSCode, on Gitlab) so it shouldn't be an issue with native mermaid.

[github-actions[bot]]

Thank you for your contribution! This is very appreciated.

[fralau]

Hi, that would like a css problem (in that case that might really connected to the plugin).

Are you using Read the Docs Theme? Do you have any specific css?

What happens if you use the Material theme?

[wjm41]

Yes I am using the Read The Docs theme with no extra css - the same issue also occurs if I use the Material theme:

Curiously, this only happens when running mkdocs serve locally - building and publishing the docs on GitLab (following https://squidfunk.github.io/mkdocs-material/publishing-your-site/) the mermaid graphs show up fine!

[fralau]

I am not sure exactly what happens, thought it seems to me a css problem.

Perhaps, the best thing would be to ask the question directly to the mermaid issue list, showing what you get in the final html/css?