Incomplete rendering of text in the mermaid code block

Support
6

@drSP

I have been having a rummage through how the Mermaid charts are displayed and it seems that Mermaid’s preferred font for the text is “Trebuchet MS”. It should be on your system as it is a default font for Win10. You haven’t uninstalled it by any chance?

If the font is present I also found that it is actually possible to change the font of the Mermaid chart text. I therefore wondered if using a narrower or condensed font may help you. This can be achieved by adding css like this.

/* For styling the rendered Markdown */

:root {
     --mermaid-font-family: "Bahnschrift SemiCondensed" !important;
 }

Example

Bahnschrift

I picked Bahnschrift because it is also a Win10 default font so you should have it on your system. It’s difficult for me to confirm that this will work for you as the charts display correctly for me. It could be that the chart just shrinks the box sizes! Hopefully not.

If this causes problems for any other charts you have you can, like before, just delete the above lines and all will revert to normal.

2 Likes