Mermaid rendering is too tall

Support
1

I am using Joplin 1.0.241 (prod, linux) and I just encountered some issues in the Mermaid rendering.

Lets take the following example graph:

```mermaid
graph LR
A --> B
A --> C
```

The rendered version of this is quite tall, because the height of the mermaid boxes or the line height of the text is to big. Is this a Joplin bug or are their any settings which have to change to get even mermaid chats?

grafik
grafik1554×659 18.1 KB

2

image

This is how it looks on my computer. So I'm guessing you're using some custom css that is messing with the mermaid boxes?

You can override the line-height (or any other property) of mermaid charts using the following css

.mermaid {
	line-height: 1em;
}
3

I am not using any custom css. For testing I just added CSS for a line-height of 1em and 0.5em

1em gives me slightly smaller boxes:

grafik
grafik455×523 6.17 KB

0.5em gives me even smaller boxes:
grafik

As you can see there is still a relative difference between the top and the bottom border.

I havent really looked into the developer tools, but it seems that the height property for the mermaids nodes is not correct.

4

I dug around a little bit, trying to understand how Mermaid rendering works, it is quite messy. Thank you @dpoulton for the information on manipulating the rendering of Mermaid charts through userstyles.css

The issue is related to fractional scaling in Ubuntu. I am using 125% percent scaling which causes the mermaid rendering issues. If I go back to 100% the rendering is just fine. If I use 150% or 175% scaling the issue exists, too.
This seems to be a problem with electron and the chromium team is working on it.

As I stated above, mermaid rendering is quite messy and I dont fully understand it. But I would expect that fractional scaling influences the width and the height of mermaid nodes, which is not the case.

6

Got the same issue on my windows 10 with 175% scaling:

afbeelding

However, when I export the contents as HTML, it renders correctly in Firefox:

afbeelding
afbeelding399×631 11.3 KB

It does not render correctly in Chrome, oddly enough the boxes are now too small:

afbeelding
afbeelding375×561 11.3 KB

The issue may very well be in electron, but it doesn't seem to be OS-specific, so I suspect the linked issue is not the cause of it.

7

This seems to be the same issue: https://github.com/mermaid-js/mermaid/issues/1834

8

Attempting the workaround there does fix the exported html in the browser but not the view in Joplin, apparently.

9

As mentioned before, we depends on the fixes upstream. As soon as thery are available, we can upsate Mermaid in Joplin.
Sometimes it's just of our hands. But nothing keeps anyone from adding comments and pushing for fixes in the Mermaid bug tracker.