I just now did a fresh install, and it (almost) fixed the scaling issue for me.
While the Mermaid flowchart nodes looks fine, the edges/arrows for horizontal graphs gets way too long when there is text in/on them.
For comparison, a preview on mermaid-js.github.io for the last flowchart looks like this:
Are you sure the graphs are produced with exactly the same code?
@WhiteNoise Seriously? You are closing this? What kind of testers you have???
You got feedback from Windows user… The MAC mermaid on mac are still broken.
@den we received positive feedback from both mac and windows users. I asked you fill as series of questions and do a couple of steps and you did half of them.
If you continue with your mocking attitude in the bug reports and feature requests I will stop engaging with you.
Brother if you look into thread I was first posting the details like resolution, OS, etc… the next feedback bellow is just yes…it work… the folks not providing any more information… and I don’t even see where you are asking something, it will be nice to point it out.
There are isn’t any mac user giving feedback. You can count yourself
As you see the mermaids are important for me and they just not works (overflow text, etc…) it is not about mocking something. I just want to have it fixed… True I got bit enoyed when you closed the issue like nothing. Im on latest 0.0.2 and the text is still overflowing…
If you want to get massive feedback, just use voting pool…
The mermaid source code: Knowledge Management Workflow Diagram
OS: Mac OS Big sur
DV: Macbook 12"
SW: Installer Obsidian 0.9.22
SW: Obsidian 0.10.2
CF: Custom CSS off
DS: 1440 x 900
We collect feedback on discord too. I am move this back, let’s see if someone else has your problem.
Yes. I wrote the graphs in Obsidian and copied it to the Mermaid Live Editor. I also tested with Typora, and there it looks almost identical to the MLE.
what is the source code of the graph?
Hi!
Sorry for my late reply; Christmas vacation and such.
The source code for the horizontal graph is:
graph LR
A["Textbox A"]
B["Textbox B"]
C["Short"]
D["A Really, Really Long Text"]
A -- "loooong arrow text A" --> B --> C --> D
I switch between different laptops and screens, and some configurations of resolution / Win10 scale / Obsidian zoom level creates weirder graphs than others.
For example, my current setup
does not give me an obnoxiously long arrow, but rather text boxes that are too short on the right side (text is rendered a bit outside of the boxes).
I have exactly your same setup. Windows/2560 x 1440/100% scale. And I can’t reproduce. I need you to be precise with all the variables and post screenshots for each system.
What is your obsidian version and the installer version, resolution, scaling, and zoom factor.
It seems that I had set Obsidian to negative 1 zoom without realizing. When resetting zoom with Ctrl + 0 and reloading the UI with Ctrl + R the graph is presented well.
That said, I’ve now taken 6 screenshots on two laptops with different combinations of resolution, scale and zoom, and there are some scaling issues with both boxes and arrows (nodes and edges).
All screenshots are taken after N levels of zoom (Ctrl + -/+) and a reload (Ctrl + R).
(As I’m not able to upload all images in a single post I will reply to myself with the screenshots.)
Laptop 2 - 2160 x 1440 - Scale 150%
Zoom 0
Zoom -4
Zoom +1
For laptop 1 the graph looks best on default zoom levels, but on my second laptop it’s better on negative 4.
Hope this helps.
what are the obsidian installer version and obsidian version and OS in each laptop?
Windows 10 (20H2)
Obsidian 10.0.1
Installer 0.9.1
Same setup for both laptops
As I mentioned in several previous posts in this thread, you should really update the installer version. Download and install a fresh copy of obsidian from the website and redo the tests.
MacBookPro (16-inch 2019)
macOS 12.0.1
Internal display
Default scale
Obsidian v0.13.14
Installer v0.13.14
Default theme
Default setting
No plugin
