Incomplete rendering of text in the mermaid code block

Support
1

Hi,
These are the joplin specs. I’m running it on windows 10.
Joplin 1.0.227 (prod, win32)

Client ID: 5f8c0582c58b411aaa1c934b4ba722d1
Sync Version: 1
Profile Version: 30
Keychain Supported: Yes

Revision: 4913fdb8 (master)

The problem

The terminal few letters of whatever I write in the mermaid code block always get swallowed by the margin of the graphic within which the text is supposed to appear. I’ve attached a screenshot to illustrate this issue.

jop
jop1366×768 141 KB

I’ve looked through the mermaid related topics on the forum and haven’t found anything related to this.
I’m not a programmer at all and have zero coding abilities, but I love using this app to make notes and having them handy on other devices.
Any help will be greatly appreciated.
Thank you.

2

I am not a dev just a user but tried your chart to see if I got the same result as I use the same version on Win10.

In my case the chart displayed correctly.

I also tried it with my custom css which limits the width of mermaid charts and it still worked.

I then added characters to the “nodes” and it again worked.

chart

Does the chart scale the text properly as a “Top-Down” graph graph TD; ?

Also are you using any custom css in userstyle.css?

If anyone else wants to check this the code is:

```mermaid
graph LR;
    id1[Corpus striatum] --> id2[Caudate nucleus] --> id3{Neostratium};
    id1 --> id4[Lentiform nucleus];
    id4 --> id5[Putamen] --> id3;
    id4 --> id6[Globus pallidus] --> id7{Pallidum};
```
3

Tried it Top-Down and the problem persists.
jop1

I’ve never used any custom css. Don’t even know how to, in fact.
I didn’t know there was custom css to change mermaid chart widths… maybe I should try that?

Thanks for replying. While the problem is rather minor, it still bugs me. At least now I know this isn’t a universal problem and there must be a way to fix it.

4

Hi,
this is the result on archlinux

image
image685×933 34.6 KB

1 Like
5

If you want to try it...

In Joplin select Tools > Options

Then select

  1. "Appearance"
  2. "Show Advanced Settings"
  3. "Custom stylesheet for rendered Markdown [Edit]"

This should open up a text file that is empty apart from the line:

/* For styling the rendered Markdown */

Paste the additional text below into the file so that it now looks like:

/* For styling the rendered Markdown */

svg[id^="mermaid-"] {
    min-width: 200px;
    max-width: 500px;
}

Save and close the text file.

Quit Joplin and restart Joplin. That means you have to use File > Quit rather than the X in the top right corner of the Joplin window.

When restarted Mermaid diagrams will be limited to a minimum width of 200 pixels and a maximun width of 500 pixels. You can experiment with the values but you must restart Joplin every time you make a change.

I'm not overly convinced that this will solve your problem so if you want to go back to how it was before, just delete the text you added to that file, save it, and restart Joplin again.

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
7

It worked!
jop2

Thank you! I really appreciate you taking the time for this.