Ability to resize and align mermaid diagrams

[tctco]

I’ve done some research and copied and assembled some css snippets to make mermaid diagrams resizable. Since I’m not an expert in css, there could be some bugs, though it works well for me.

svg[id^="m"][width][height][viewBox] {
    max-width: 95%;
    max-height: 95%;
}

div.mermaid {
    margin-left: 0 !important;
    text-align: center;
    resize:both;
    overflow:auto;
    margin-bottom: 2px;
    position:relative;
    max-height: 600px;
    max-width: 100%;
}

div.mermaid::after {
    content:'';
    display:block;
    width:10px;
    height:10px;
    background-color:yellowgreen;
    position:absolute;
    right:0;
    bottom:0;
}

[Craig]

@smcllns

.mermaid svg { 
  max-width: 100%; 
  height: auto;
}

Thank you so much for this! I’ve been wrestling with Mermaid diagrams pushing off the side of the page. This works perfectly.

[Salamander23]

@smcllns You are absolutely right. Using .mermaid svg { *desired code* } works perfectly. Funny how I missed that. Will be using this from now on instead.

[Hunanbean]

Brilliant! Thank you very much. It is working perfectly for me.

I just made an empty file, CustomMermaid.css, in my vaults snippet directory. I then copy pasted your css into it, saved, and told Obsidian(settings) to rescan the Snippets folder. Then I just enabled it by clicking the toggle to enable. I did not need to reload Obsidian.

[kngautham]

obsidian renders mermaid in Android badly. Long text is getting cut off and shorter text overflows the Rectangle boundary.

Are there any solutions or css workarounds to overcome this issue.

These two issues don’t happen with windows 10 desktop app