Mermaid: Text is cut off in SVG exported from live editor

[p3k]

The following Mermaid markup generates this live view:

graph TD
A[Something] -->|begets| B[Something]

(Config is {}.)

However, in the exported SVG all text boxes are cropped on the right side:

Am I missing something?

[CalvinRodo]

I'm running into this same issue currently

[jcpst]

I also run into this same issue when using the library in a web application, where config is {}.

[Uinelj]

Issue present in the generated SVG from the live demo too (tested on Chrome, Firefox):

Edit: By changing the font-size in the svg file you can get a readable output.

[hexblot]

In some cases text is cropped even in the live editor, see a very basic example here

Exporting to SVG makes the issue more pronounced.

[trueskawka]

I was able to address this issue when using the CLI to generate PNG by adding CSS to the parent element for edgeLabel. The foreignObject width is too narrow for labels to be properly displayed, so it should allow for overflow (I think the math might be slightly off when calculating the label width).

.label foreignObject {
    overflow: visible;
}

It doesn't seem to be working for SVG, but it might be a similar issue.

Edit:
Oh, interesting, it does work if I pass the themeCSS, but not when I'm using a CSS file for the -C flag.

If you add this to the config, it should fix the label width:

"themeCSS": ".label foreignObject { overflow: visible; }"

[FiyaFly]

I was able to address this issue when using the CLI to generate PNG by adding CSS to the parent element for edgeLabel. The foreignObject width is too narrow for labels to be properly displayed, so it should allow for overflow (I think the math might be slightly off when calculating the label width).

.label foreignObject {
    overflow: visible;
}

It doesn't seem to be working for SVG, but it might be a similar issue.

To add to this, in the SVG every class is marked with an ID, which is noted at the top, e.g. svg id="mermaid-1556643060555". Also, if you add font-size: 90%; as well, it looks almost perfect (at least on my screen, haven't tested elsewhere). Which would make the css similar to this, using the svg line as an example:

#mermaid-1556643060555 .label foreignObject {
    font-size: 90%;
    overflow: visible;
}

I stumbled across this issue trying to figure out why my SVG's were coming out poor, but I've only been using mermaid for a day lol. Hopefully this helps others, and eventually helps to fix it in the editor/mermaid itself. I don't know about using this via CLI. Still working on getting the CLI working for me at all lol.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[happycollision]

Well, it's not stale! ;-)

We dig the library. Great work on it!

[Drunkman]

I add this to config, and it work well.

{
    "themeCSS": ".label foreignObject { font-size: 14px; }"
}

But I still don't know why mermaid add a style that make the font-size large so that graph label be cut off.

[pdxjohnny]

I still get clipping on the export

[IOrlandoni]

Note that right now the project has a lot more requests piled up than it can handle.
We would be happy to accept new collaborators!

[GDFaber]

This issue seems to be solved in mermaid 8.4.4 as the svg download of the new live editor does not show the problem anymore:

https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbkFbU29tZXRoaW5nXSAtLT58YmVnZXRzfCBCW1NvbWV0aGluZ10iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ==

[p3k]

confirmed! great, thanks a lot. closing this issue.