Resize and align mermaid diagrams

Feature requests
, ,
51

Hi there, I’ve created this small hack for big mermaid C4 models, maybe it helps some others with problems reading large mermaid diagrams. This zooms in mermaid diagrams by default, uses all the screen estate to render the diagram and allows you to use mouse scroll to pan the view. Create a css snippet with the following code in .obsidian/snippets, enable it in settings/appearance/css snippets and you can at least read your large mermaid diagrams.

div:has(> .mermaid) {
    width: auto !important;
}
.mermaid {
    overflow: scroll;
}
.mermaid svg {
    width: 2000px;
}
2 Likes