🌿 Про Obsidian и ширину mermaid-схем

На стримах у Павла Бучнева увидел, как LLM генерирует диаграммы последовательности. Получается очень наглядно. Не редко такой диаграммой можно отобразить процесс гораздо лучше, чем текстом. Вручную такие схемы делать так себе удовольствие, но теперь есть LLM, которые отлично справляются с этой задачей. Тоже начал их использовать 😏

Базу знаний я уже долгое время веду в Obsidian. Mermaid-схемы в нём поддерживаются, но есть один нюанс. Ширина контента в Obsidian 700 пикселей и это очень удобно для текста. Диаграммы же, как правило, шире и появляется горизонтальная прокрутка. Дошли руки это поправить.

Интерфейс Obsidian реализован с помощью HTML+CSS и поддерживаются пользовательские стили. Пару запросов к LLM, DevTools, небольшая доводка ручками и CSS-фикс готов:

.cm-scroller {
    container-type: inline-size;
}
.markdown-source-view .markdown-rendered.cm-lang-mermaid,
.markdown-reading-view .el-pre:has(.mermaid) {
    width: 100cqw;
    max-width: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
}
.markdown-source-view .mermaid,
.markdown-reading-view .el-pre:has(.mermaid) {
    text-align: center;
}

Теперь контейнер под mermaid-схемы растягивается на всю доступную ширину, а сама схема располагается по центру. По-моему неплохо вышло 🙂