Text does not fit in nodes

[fkohrt]

Sometimes nodes are too small to fit the text inside them. Strangely, this is only an issue for mermaid.ink, but not for "Download SVG" at the Mermaid Live Editor.

Take, for example, the following code:

graph TD
    A("I don't know what to write here (brackets)")
    B("I need some more inspiration")
    C("What is it that I could write here?")
    D("This is the last piece of content")

    A --- B
    B --- C
    A --- D

Loading

The last text part of each node is cut off:

Links with this example:

• Mermaid Live Editor
• mermaid.ink

[jihchi]

Hi @fkohrt , Thanks for reporting!

I have taken a look and it seems to be an issue on mermaid.js side, see similar issues:

• Generated svg is different than live editor, text is cut off mermaid-js/mermaid#1485
• Truncated text and custom font families mermaid-js/mermaid#1540

There is a work-around by setting an extra CSS, please see here.

For example, add following code into Mermaid Configuration:

{
  "themeCSS": ".label foreignObject { font-size: 90% }"
}

It will looks like this:

• Mermaid Live Editor
• mermaid.ink

[fkohrt]

Hi @jihchi, thanks for following up and the quick fix! Closing this as it's an issue with upstream.