Open maxfriedmann opened 6 years ago
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:
Testing browsers:
Diagram types:
So to sum up, this seems to affect flowcharts in a 4K monitor scaled to 2x with a chrome browser.
Some more comments:
<text>
element, whereas in my installation (and also https://mermaidjs.github.io/mermaid-live-editor/) the text is rendered inside a <div>
. 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.
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...
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.
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.
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.
I could have a look into this as I have a 4K monitor.
I got same issue... win10 scalling 200% chrome 81.0.4044.113 mermaid 8.5.0
Same issue here. kindly share your solution when found.
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
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 !!
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%.
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.
My diagrams seems overflowing exactly like in @Pronink screenshots on some displays.
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 🙃
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![100scale](https://user-images.githubusercontent.com/2809483/38915278-6db18b72-42e3-11e8-9d71-587ce6120643.PNG)
200% Scale![200scale](https://user-images.githubusercontent.com/2809483/38915288-741c0d48-42e3-11e8-8eaa-c66d4a0ab759.PNG)
Is it possible to let mermaid render the same on all scales?