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?

[fralau]

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!

That case of difference between mkdocs serve and mkdocs build interesting indeed 🤔

I am, here, out of my depth, but if you are using the same browser in both cases, it would inevitably be some difference induced by the Python local web server, or the way it is implemented?

It is a kind of problem that might benefit from the MkDocs team's expertise (@pawamoy and @tomchristie), whose domain also extends to the ReadTheDocs theme. Perhaps we could ask some advice from @squidfunk (author of the Material theme) who knows both Mermaid and MkDocs?

[pawamoy]

Unfortunately I'm really bad at CSS and have no experience with the ReadTheDocs theme provided by MkDocs 😅 I would indeed suggest comparing the HTML and CSS generated by serve and build to see if there's any difference and how to fix them.

[squidfunk]

Thanks for tagging me 👋 Does this happen with our native integration of Mermaid.js or only with this plugin?

[fralau]

Thanks 🙂: with this plugin. Just in case you might see some obvious anomaly, or maybe say "oh, I remember that issue, that's the way I solved it".

Even without css, a minimally different choice or succession of HTML tags might (or might not) introduce a change.

[squidfunk]

We definitely fixed some things that were related to overflowing fonts, maybe you can check them out:

• Mermaid diagrams: text labels overflow since 9.0.13 squidfunk/mkdocs-material#5168
• Text in mermaid diagrams overflows in Firefox squidfunk/mkdocs-material#4429

[fralau]

@wjm41 It will help if you give us your version numbers of the mermaid library, as well as MkDocs and the Material theme?