#27

Are you sure the graphs are produced with exactly the same code?

#28

@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.

#29

@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.

#30

  1. 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.

  2. There are isn’t any mac user giving feedback. You can count yourself

  3. 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…

  4. If you want to get massive feedback, just use voting pool…

#31

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

Zoom level 0:

Screenshot 2020-12-22 at 16.58.31
Screenshot 2020-12-22 at 16.58.312154×1664 295 KB

Zoom level +2:

Screenshot 2020-12-22 at 16.58.44
Screenshot 2020-12-22 at 16.58.442272×1640 280 KB

Zoom level +4:

Screenshot 2020-12-22 at 16.58.55
Screenshot 2020-12-22 at 16.58.552382×1664 273 KB

:man_shrugging:

#32

We collect feedback on discord too. I am move this back, let’s see if someone else has your problem.

#33

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.

#34

what is the source code of the graph?

#35

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

  • 2560 x 1440
  • 100% scale
  • Default Obsidian zoom

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).

#36

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.

#37

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.)

#38

Laptop 1 - Resolution 2560 x 1440 - Scale 100%
Zoom 0 (default)

2021-01-05-obsidian-mermaid-2560x1440-100scale-0zoom
2021-01-05-obsidian-mermaid-2560x1440-100scale-0zoom793×70 6.59 KB

Zoom -1

2021-01-05-obsidian-mermaid-2560x1440-100scale-neg1zoom
2021-01-05-obsidian-mermaid-2560x1440-100scale-neg1zoom697×75 6.09 KB

Zoom +4

2021-01-05-obsidian-mermaid-2560x1440-100scale-plus4zoom
2021-01-05-obsidian-mermaid-2560x1440-100scale-plus4zoom1488×139 10.6 KB

#39

Laptop 2 - 2160 x 1440 - Scale 150%
Zoom 0

2021-01-05-obsidian-mermaid-2160x1440-150scale-0zoom
2021-01-05-obsidian-mermaid-2160x1440-150scale-0zoom1584×145 11.2 KB

Zoom -4

2021-01-05-obsidian-mermaid-2160x1440-150scale-neg4zoom
2021-01-05-obsidian-mermaid-2160x1440-150scale-neg4zoom852×79 7.08 KB

Zoom +1

2021-01-05-obsidian-mermaid-2160x1440-150scale-plus1zoom
2021-01-05-obsidian-mermaid-2160x1440-150scale-plus1zoom1864×168 13.3 KB

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.

#40

what are the obsidian installer version and obsidian version and OS in each laptop?

Mermaid Text Cutoff Issues
#41

Windows 10 (20H2)
Obsidian 10.0.1
Installer 0.9.1

Same setup for both laptops

#42

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.

1 Like
#43

image
image2028×528 63.7 KB

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

#44

image
image940×1016 126 KB

I also noticed that the themeCSS property in mermaid.initialize contains some wrong styles.

#45

New issue here: Mermaid: Text gets cut off

#46