Mermaid SVG Cutting Off

[lousytrybrian]

Things I have tried

I’ve tried setting the height to ‘auto’ and ‘100%’, but no matter what the bottom gets cut off.

What I’m trying to do

I just started getting into Mermaid charts, but some charts continually seem to cut off some of the chart and I don’t know why. The bottom of this screenshot you can see it getting cut off.

[gregp]

Add a snippet such as:

.mermaid-large svg[id^="m"][width][height][viewBox] {
    min-width: 900px;
    max-width: 1400px;
    width: 110%;
    height: auto;
    width: auto;
}

.mermaid-medium svg[id^="m"][width][height][viewBox] {
    min-width: 800px;
    max-width: 1200px;
    width: 99%;
    height: auto;
}

.mermaid-small svg[id^="m"][width][height][viewBox] {
    min-width: 300px;
    max-width: 750px;
    width: 95%;
    height: auto;
}

and reference the class in your front-matter

I am uncertain if this will help you?

Some themes actually play nicely with mermaid. Try out some of the top ones.