Mermaid SVG Cutting Off

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.

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.

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