#1

I am having an issue with mermaid where the vertical allocation for the graph is far exceeding what is needed, creating a large amount of white space.

If I remove all text to appear in the elements, the vertical render is correct.

See below code to reproduce.
This rendering issue does not appear to be unique to Obsidian.
The same issue is present on gitlab. It is not present in Typora, Devonthink or mermaid-js

graph TD;

AA[bbbbb bb]
AB{bbb<br>bbbbbb bbb bbb<br>bb bbbb?}
AC{bbb<br>bbbbbb bbb bbb<br>bb bbbb?}
AAC(bbbb bbbb bbbbb)
AD{bbbb bbbbbbb?}
AF(bbb bbbb bb bbbbbbbbb<br>bbbbbb bbbbbbbbbb bbbbbb)
AG(bbb bbbb bb bbbbbbbbb<br>bbbbbb bbbbbbbbbb bbbbbb)
CA(bbbb bbbbbb bbbbbbbbb)

AA-->AB
AB--Yes-->AG
AC--Yes----->AG
AD--Yes---->AF
AB--No-->AC
AC--No-->AAC-->AD

BB{bbbb<br>bbbbbb bbb bbb<br>bb bbbb?}
BC{bbbb<br>bbbbbb bbb bbb<br>bb bbbb?}
BAC(bbbb bbbb bbbbb)
BD{bbbb bbbbbbb?}
BF(bbb bbbb bb bbbbbbbbb<br>bbbbbb bbbbbbbbbb bbbbbb)
BG(bbb bbbb bb bbbbbbbbb<br>bbbbbb bbbbbbbbbb bbbbbb)

AA-->BB
BB--No-->BC
BC--No-->BAC
BB--Yes------>BG
BC--Yes-->BG
BD--No-->CB
BD--Yes---->BF

AAC-->CA
BAC-->CA
BAC-->BD

CB[bbbb bbbbbb bbbbbbb]
CC[bbbbbb bbb bbbbbbbbb]

AD--No-->CB
CB-->CC
AH[bbbbb b bbbbb]

BH[bbbbb b bbbbb]

AF & AG --> AH
BF & BG --> BH

AH & BH --> CH(bbbb)
#2

So this issue remains, it was an error I created with a snippet.

As I intend to export my notes as PDF, I added the following css snippet.

div.mermaid svg {
  width: 100%;
}

.markdown-source-view.is-live-preview div.mermaid svg {
  width: 100%;
}

Without this, the mermaid frame would be clipped on the right.
With this, the clipping on the right is gone, but the whitespace above and below the graph is introduced.

Can anyone help with how to fix both issues?

#3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.