Как настроить ширину отображаемых диаграмм Mermaid в зависимости от размера экрана в Obsidian?

Чтобы решить проблему, вы можете применить следующий CSS:

/** 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;
}

Это приведет к следующим изменениям в вашей теме:

1. По умолчанию диаграммы Mermaid теперь будут иметь размер, равный 100 % ширины экрана.
2. Когда вы наводите курсор на диаграмму, ее размер изменяется до фактической вычисленной ширины и включается горизонтальная прокрутка.