Joplin: Desktop: Mermaid rects are very tall

[svalaskevicius]

in a simple mermaid graph, the boxes are very tall. This is not the case in a standalone mermaid.

Environment

Joplin version: 1.0.200, rev 142976f
Platform: linux
OS specifics: nixos

Steps to reproduce

create a note with

graph TD
 A

Describe what you expected to happen

Box A should be of reasonable size

[coderrsid]

I see them like the exact size which is shown in the library here

[svalaskevicius]

Hmm. I'll play around a bit more then, will reopen the ticket if it looks it's not some other local config. Thanks :)

[svalaskevicius]

All default settings, not sure what else could impact it.

I'm using nixos btw - could packaging have affected it?

[coderrsid]

Maybe, i don't have much idea about Linux related stuff. But @bedwardly-down , can you please help him if it's related to nixos. Thanks.

[bedwardly-down]

@svalaskevicius, are you running the version released from the Joplin repo directly or one released by your package manager? If the latter, they may have done something funky with it that is beyond my personal knowledge.

I'm on Artix Linux and this is what I'm getting:

Another possibility is that your system's default font might not be monospaced. If that's the case, you would need to change it. I personally love the Hack Nerd Mono Font, but a favorite among many users is FiraCode. :D

[Westie1012]

I'm having the same issue on Linux Mint and my default font is ubuntu mono.

[Rahulm2310]

I can confirm this on Windows

Also, similar behavior is noticed on Android as well

[svalaskevicius]

Btw I checked the svg using inspector, it actually has high height values on the boxes. So would be natural to blame mermaid, however running mermaid alone works OK.

So are there any parameters/config passed to mermaid that confuse it? Also I only tried the latest mermaid from git, could it also be a problem in some earlier version that's used in joplin?

[bedwardly-down]

If it is that, it’d very likely be an issue with the library Joplin uses to integrate mermaid support.

[coderrsid]

Exactly! We're here just rendering the graphs using library named mermaid-js. All the internal style props of graphs are from there.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.