My rendered mermaid graph dont show the whole word

[Ronny]

Hi im using Version 2.4.12 and my rendered mermaid graphs look this:

Any tips for me?

[joteff]

Hi Ronny,

graph LR
	word --> words
	words --> 3["more (words)"]

The indentation at the second line and following lines... and maybe 'more(words)' is only an example - but for peranthesis you have to use a special syntax.

Take a look on the mermaid site - there is also a link to a live-editor-website: GitHub - mermaid-js/mermaid-live-editor: Edit, preview and share mermaid charts/diagrams. New implementation of the live editor.

And the mermaid tutorial: mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.

[Ronny]

@joteff

The indentation at the second line and following lines... and maybe 'more(words)' is only an example - but for peranthesis you have to use a special syntax.

Sure, thats clear, my point is that in my rendered version the letter "d" from the word "word" and the letter "s" from the word "words" is like cut of. And i dont know why.

[dpoulton]

@Ronny welcome to the forum.

There was a post some time ago when another user was suffering what appears to be the same issue with cut off words in Mermaid charts. Other users could not duplicate the problem. A work-around was found by changing the font Mermaid uses to a condensed variant. The work-around in the below link is based on a font available by default on a Windows OS machine. If you want to try this and are not using Windows you will need to identify a condensed font installed on whatever OS you are using.

Incomplete rendering of text in the mermaid code block

@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 …

EDIT:
The css mentioned is placed in userstyle.css. Go to the Joplin settings page and navigate to Appearance > Show Advanced Settings and press " Custom stylesheet for rendered Markdown " (which opens userstyle.css ).