Mermaid diagram boxes "chopped off" and text spills out on the right

Bug graveyard
1

Steps to reproduce

Make a Mermaid diagram:

graph LR;
	TheFirstBox-->TheSecondBox;

Switch to preview mode.

Expected result

Boxes large enough to contain their text, with uniform margins all around.

Actual result

Boxes have uniform margins on top, bottom, and left side, but on the right side it’s like the box is “cut off” and the text spills out beyond the box. Like the right margin is negative, maybe?

Environment

  • Operating system: Windows 10
  • Obsidian version: 0.9.6

Additional information

Here’s how it looks in Obsidian:

image

For comparison, here’s how VS Code renders the same diagram:

image

1 Like
2

Are you using a custom css?

3

Yes, but I turned it off and got the same result.

4

We updated mermaid in 0.9.7. Let me know if you stll have this problem when you get it.

5

Oh, that’s 0.9.7? I remembered reading that in the release notes, but I must’ve confused the version number and thought it happened in 0.9.6, because that version fixed a different Mermaid bug where the boxes’ bottom margin was huge. I’ll make a note to check again with 0.9.7. Thanks.

6

Just updated to 0.9.10; sadly, the box size issue is not fixed.

8

I can’t reproduce. Diable all 3rd party plugins. Switch to default css. Close and reopen the app. Make screenshot again.

9

What is your screen resolution?

10

8 posts were merged into an existing topic: Mermaid generates huge boxes

11

what happens if you use scaling 1x?

12

OK, set built-in display scaling to 100%; quit and restarted app; same result, on both screens: the text spills off the right end of the boxes.

14

what is your installer version?

18

ok, we figured out the problem. It’s better to rescale things with css, but I’ll look into this too.

1 Like
20

Using body { font-size } ?

23

Good to know, and at least it works at 100% on the external display.

So, about scaling with CSS instead of Ctrl+-, is there a specific recommended method? Can I just set body { font-size }, or is there more to it than that? (I’m comfortable with CSS, so if there’s a known-good code snippet somewhere, just point me to it.)

Thanks so much for helping sort this out!

24
25

I merged this report with

26