How to set rendered Mermaid diagrams width to be based on screen size in Obsidian?

Question

By default, Obsidian is overflowing my large Mermaid diagrams on vertical (small width) screens:

This is quite inconvenient for users with vertical screens. For example, I place my Obsidian window on a vertical screen and large diagrams becomes unreadable as result.

I am aware Obsidian allows setting CSS.

How can I leverage this to set my Mermaid diagrams to render 100% screen width by default?

Answer 1

You can apply the following CSS to fix the problem:

/** Set Mermaid Diagrams to 100% width of screen by default */

.mermaid svg {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

/** On hover, make the diagram full width and enable horizontal scrolling */

div:has(> .mermaid):hover {
    width: auto !important;
}

.mermaid:hover {
    overflow: scroll;
    padding: 0;
    margin: 0;
    text-align: left;
}

.mermaid:hover svg {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
}

This will do the following changes to your theme:

1. By default, Mermaid diagrams will now be sized to 100% of the screen width.
2. When you hover on a diagram, it will resize to it's actual computed width and enable horizontal scrolling.