scaling/rendering issues on 4K displays

[maxfriedmann]

My laptop has a ~4K display which requires me to work with a 200% scaled desktop. I noticed that mermaid renders the SVGs differently on normal and 200% scale.

Environment: Surface Book 2, Windows 10, Chrome 65

This is the chart I am rendering: https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggTFJcbkFBQSgoU1RBUlQpKSAtLT4gQns8Y2VudGVyPjxoMj5UZXN0PC9oMj48YnI-c29tZXRoaW5nIHNtYWxsPC9jZW50ZXI-fVxuQiAtLVRSVUUtLT4gQyhBREQpXG5CIC0tRkFMU0UtLT4gRihBREQpXG5cbmNsYXNzRGVmIG9yYW5nZSBmaWxsOiNmOTYsc3Ryb2tlOiMwMDAsc3Ryb2tlLXdpZHRoOjJweDtcbmNsYXNzIEMsRixHLEggb3JhbmdlXG5jbGFzc0RlZiBncmF5IGZpbGw6I0NDQyxzdHJva2U6IzAwMCxzdHJva2Utd2lkdGg6MnB4O1xuY2xhc3MgQSxBQUEgZ3JheVxuY2xhc3NEZWYgYWN0aW9ucyBmaWxsOiM5ZWQzZjcsc3Ryb2tlOiMwMDAsc3Ryb2tlLXdpZHRoOjJweDtcbmNsYXNzIEIsRSxEIGFjdGlvbnNcbiIsIm1lcm1haWQiOnsidGhlbWUiOiJkYXJrIn19

100% Scale

200% Scale

Is it possible to let mermaid render the same on all scales?

[dimrozakis]

I was just testing out mermaid today for the first time, when I came upon this problem. I performed some quick tests and here's some more info:

Testing monitors:

• It doesn't happen on my non-4K monitor.
• It doesn't happen on my 4K monitor if resolution is set to FHD instead of 4K.
• It only happens on my 4K monitor when resolution is set to 4K and display is scaled at 200% (HiDPI setting).

Testing browsers:

• It happens in chromium.
• It happens in google chrome.
• It doesn't happen in firefox.

Diagram types:

• It happens in flowcharts.
• It doesn't happen in sequence diagrams.
• It doesn't happen in gantt diagrams.

So to sum up, this seems to affect flowcharts in a 4K monitor scaled to 2x with a chrome browser.

[dimrozakis]

Some more comments:

1. I'm using Linux whereas @maxfriedmann is using Windows, so this doesn't seem to be OS specific.
2. In Gitlab's markdown-mermaid integration (which I assume is using an older or modified version?) I don't get this problem. But there, the text is rendered using a <text> element, whereas in my installation (and also https://mermaidjs.github.io/mermaid-live-editor/) the text is rendered inside a <div>.
3. The 2x scaling is standard for small 4K monitors, especially in laptops, otherwise everything is too small. What I'm trying to say is that this isn't some exotic setting, but pretty standard for people with laptops with 4K displays.

So I'd assume this affects most users seeing a flowchart from a laptop with a 4K monitor, using chrome. If the above hold true, it may make sense to prioritize fixing this one.

PS: On the other hand, this could actually be a chrome bug.

[maxfriedmann]

Another thing from my side : If you use a 1080p resolution and set the scaling to 200% it also happens. So it might be rather related to the DPI scaling than the resolution...

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[dimrozakis]

Commenting again so that the issue doesn't get automatically closed. Given the rising popularity of hidpi monitors, I think it makes sense to resolve this.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you are still interested in it, and it is still relevant, you can comment or remove the label to revive it.

[klemmchr]

I could have a look into this as I have a 4K monitor.

[k103hub]

I got same issue... win10 scalling 200% chrome 81.0.4044.113 mermaid 8.5.0

[iqmia]

Same issue here. kindly share your solution when found.

[iqmia]

mermaid on high resolution such as 4k or mobile screens even using edge on android is giving a shape much larger than text. I don't think that there is a solution for this issue so far unless a specific formatting is done based on the device and resolution

[Pronink]

In my case, text OVERFLOWS box:

Live editor v8.8.4 on Google Chrome 87.0.4280.66 (Build oficial) (64 bits) In firefox it works fine !! 4k monitor, hidpi, desktop scaled x2

As you can see, all text of diagram is overflowing his respective boxes. To resolve this issue, I have to scale webpage to 50% and refresh it, but its difficult to use it because Code is too small

---

To solve this, I thing you should multiply the <rect>s by window.devicePixelRatio (write it into chrome developer tools console)

or using Firefox.

In standards monitors, like fullhd, window.devicePixelRatio returns 1. In my case it returns 2 because my desktop system is scaled to 200%.

If you need more information, contact me. I will be happy to help

Big regards !!

[sean-parent]

My desktop scale is set to 150% and everything is similarly scaled incorrectly. This issue is currently blocking me from using mermaid :-( Comparing the generated SVG with and without monitor scaling, I believe it is a little more complex than just scaling the rects by devicePixelRatio. For example, the height of Christmas in the above flow chart is about 90 at 100% and comes at about 66 at 150%.

[dicta]

I run into the same issue where rects are mis-scaled (both width and height) by a factor of window.devicePixelRatio. In my case, window.devicePixelRatio is set to 1.25. Manually scaling the rects by multiplying by this value in the developer console results in diagrams that appear correct.

[LimmaPaulus]

My diagrams seems overflowing exactly like in @Pronink screenshots on some displays.

[jossemargt-3pillar]

Hi, I'm wild guessing here. Has anybody tried adding the preserveAspectRatio or adding CSS media queries for each pixel density to the resulting svg yet?

I have tried to workaround this issue by disabling htmlLabels, then transforming the svg text nodes to paths and it sorta works. Unfortunately, the end result isn't as pretty as it looks in the live-editor 🙃