Text cut off in Mermaid

[jeppevinkel]

Large Mermaid diagrams have parts that get cut off when generated as SVG.

This example diagram from Mermaid causes issues

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

Loading

[ggrossetie]

I believe this is a font issue, here's how it looks like with Kroki:

[ggrossetie]

By default, Mermaid is using the following font: "trebuchet ms",verdana,arial,sans-serif.

[ggrossetie]

Probably related to mermaid-js/mermaid#1540
It might be better to use "Noto" by default. My guess is that "trebuchet ms",verdana,arial,sans-serif will render (very) differently on Linux, macOS and Windows.

[ggrossetie]

For reference, here's how the font looks on the container:

As you can see, the font rendering is different and text is not cut off.
Not sure if there's a solution since as far as I know all fonts render differently depending on the OS. One idea would be to use something like https://github.com/vercel/satori to convert the (HTML) text to SVG (i.e., <path>)

[ggrossetie]

Mermaid could use something like https://github.com/danmarshall/google-font-to-svg-path which relies on https://maker.js.org/ to convert all text to SVG path that would be neat!

[ggrossetie]

I did some tests and unfortunately each solution has drawbacks.
I also feel like this "issue" should be fix upstream. I had decent results using https://github.com/shrhdk/text-to-svg with Noto Sans.

[codingluke]

I encountered this too! Would be great to have it fixed :) on mermaid.live and here on github it works correct. Anyway great tool!

[yuriykuzin]

I also have this issue with pie chart diagrams, while it's ok on mermaid.live.

pie title iPhone Usage Distribution
    "Social Media" : 35
    "Calls" : 15
    "Email" : 20
    "Gaming" : 10
    "Music & Podcasts" : 10
    "Photography" : 5
    "Navigation" : 5

[ggrossetie]

It's the same issue.
Rendering Mermaid server-side will produce these inconsistencies since the label width/height computation relies on fonts and fonts do not render exactly the same on two machines.

[boris-moduscreate]

Given that font is a configureable option in Mermaid.js would you consider making it an option which can be passed to Kroki?

[ggrossetie]

The problem is that the font might or might not exist server-side and might or might not render the same server-side. For now, the best workaround is to use a font that displays as uniformly as possible across all operating systems and web browsers.

[boris-moduscreate]

Yeah I absolutely agree, but the question is who decides what font to use? Do we wait for mermaid to fix it? Does Kroki set a default you believe is best? Should the Kroki docker image have the mermaid default font installed into it? Should the end user be able to provide an override font (assuming it is available)? We self-host Kroki so we don't really care which option is chosen, but we would like to fix it sooner rather than later if possible. Ultimately it's your project and we will defer to your preferred approach here.

[nithom]

A workaround for us is to tweak the margin settings for generated mermaid diagrams in https://github.com/yuzutech/kroki/blob/main/mermaid/src/task.js.

Within this.mermaidConfig, you can add something like

themeCSS: '.nodeLabel { margin: 3px 20px 3px; }'

This probably still might not work for some fonts, though.