Mermaid generates huge boxes

My mermaid diagrams have way too much vertical space.

I’m running Windows 10, and my screen is set to 200% scale.

Example Code:

graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D


I’m experiencing this same issue:

  • on Windows 10 at 200% scaling the boxes are huge, as pictured above.
  • on Windows 10 at 100% scaling it looks better, but not great.
  • on Ubuntu 20.04 it looks perfect at both regular scaling and “Large Text” accessibility mode.

It might be a Mermaid issue; I see a related issue on their GitHub.


I also have this issue. It does seem like a mermaid issue, and not a new one :disappointed:

There’s a temporary workaround, which is to override the scaling on obsidian. For those who have never done this:

  1. Right-click obsidian.exe
  2. Select Properties, then the Compatibility tab
  3. Click, “Change high DPI settings,” (near the bottom)
  4. Turn on “Override high DPI scaling behavior” and set it to “System”

Hit ok, and apply. Then relaunch Obsidian.

I say temporary, because it softens the appearance of the software which defeats the point of a 4k monitor, but then again, so do gigantic mermaid graphs.

As a bonus, it also address the issue of the the mouse overlapping the hovered node name in graph view on 4k monitors. I hope that helps!