Используйте вложенные подграфы блок-схемы для контейнеров с заголовками, включая конечные блоки. Если пустые контейнеры отображаются некорректно, добавьте невидимый заполнитель внутрь каждого конечного блока. Так сохранится видимая иерархия; проверьте результат в установленной у вас версии Obsidian.

В этом руководстве создается нейтральная диаграмма: внешний блок с заголовком Collection, содержащий Group A и Group B, а внутри каждой группы — конечные контейнеры с заголовками. Задача — сохранить конечные блоки в виде контейнеров с заголовками, а не заменять их обычными прямоугольниками с подписями.

Что должно представлять конечный блок с заголовком?

Представляйте каждый видимый контейнер как subgraph независимо от того, содержит ли он другой значимый блок. В примерах блок-схем Mermaid описаны подграфы, явные идентификаторы подграфов и вложенность. Обычное объявление узла, например leafA["Block A"], создает узел с подписью, но не объявляет контейнер с заголовком. См. Блок-схемы — базовый синтаксис.

В этом примере отделяйте видимую модель от элементов, нужных для ее компоновки. Collection, группы и конечные блоки — значимые элементы. Заполнитель — техническая деталь, которая нужна, чтобы у конечного контейнера было содержимое для компоновки. Добавление такого вспомогательного элемента не меняет объявление конечного блока с подграфа на узел.

Это различие также определяет границы такого подхода: он создает диаграмму, в которой видимые конечные блоки остаются контейнерами с заголовками, но в исходном коде присутствуют обычные вспомогательные узлы. Если ваше требование запрещает любые объявления узлов, включая невидимые вспомогательные элементы, этот обходной путь ему не соответствует.

Проверьте, какой рендерер использует установленная на Mac версия

В Obsidian откройте в боковой панели Settings, затем выберите General и запишите версию приложения. В документации Obsidian по настройкам указано, что сведения о версии находятся в разделе General. При выборе подходящих заметок о выпуске ориентируйтесь на эту версию.

Есть важное различие между рендерерами. В официальных заметках о выпуске от 22 октября 2026 года версия Desktop 1.15.0 помечена как ранний доступ; там говорится, что синтаксис Mermaid отображается с помощью библиотеки Pele в Obsidian, совместимой с синтаксисом Mermaid 12.1.0. В том же выпуске классы, генерируемые для диаграмм, заменены классами Pele. Не предполагайте, что в более старой установке используется Pele или что совместимость означает идентичный результат в Mermaid.js. См. Obsidian 1.15.0 для Desktop (ранний доступ).

В документации Mermaid, использованной для этого руководства, указана версия 12.2.0. Она отличается от уровня совместимости, названного в заметках о выпуске Obsidian. Считайте документацию, онлайн-редактор и установленное приложение отдельными средами, пока не проверите в каждой один и тот же пример.

Для первой попытки не добавляйте в диаграмму настройки, зависящие от конкретного рендерера, и внешние селекторы таблиц стилей. В примере ниже используются подграфы и локальные стили диаграммы — это простая отправная точка для проверки в вашей установке.

Создайте вложенные контейнеры в заметке Obsidian

Откройте заметку в режиме редактирования и вставьте весь блок ниже вместе с открывающими и закрывающими ограничителями. В документации Obsidian диаграммы Mermaid оформляются как блоки кода с ограничителями и идентификатором языка mermaid. Для такого формата заметки дополнительный плагин диаграмм не требуется. См. Расширенный синтаксис форматирования.

```mermaid
flowchart TB
    subgraph collection["Collection"]
        subgraph groupA["Group A"]
            subgraph blockA["Block A"]
                spacerA[" "]
            end
            subgraph blockB["Block B"]
                spacerB[" "]
            end
        end
        subgraph groupB["Group B"]
            subgraph blockC["Block C"]
                spacerC[" "]
            end
        end
    end

    classDef spacer fill:transparent,stroke:transparent,color:transparent;
    class spacerA,spacerB,spacerC spacer;
```

Нажмите Cmd+E, чтобы переключаться между редактированием и Reading view. В режиме чтения можно посмотреть готовую диаграмму, не отвлекаясь на исходный код под курсором редактирования. Эти элементы управления описаны в разделе Obsidian Режимы просмотра и редактирования.

В результате должны быть видны шесть контейнеров с заголовками: одна коллекция, две группы и три конечных блока. В каждом конечном блоке есть вспомогательный элемент с подписью из одного пробела. Класс spacer задает прозрачные заливку, границу и текст. Здесь сочетается документированный механизм классов Mermaid с обходным решением для компоновки; Mermaid описывает classDef и назначение классов в справочнике по стилям блок-схем.

Пример проверен на соответствие документированному синтаксису, но для этой статьи не отображался в Obsidian на Mac. Поэтому критерии приемки нужно проверить визуально у себя: должны отображаться все шесть заголовков, в каждой группе должны находиться назначенные ей конечные блоки, а прямоугольники-заполнители не должны быть видны. Точное расстояние и расположение соседних блоков не являются критериями приемки.

Меняйте подписи, не меняя иерархию

Для начала меняйте только заголовки в кавычках. Оставьте collection, groupA, blockA и остальные идентификаторы разными. Так будет проще сравнить измененную версию с исходным примером.

Чтобы добавить еще один конечный блок, скопируйте подграф целиком, задайте новые идентификаторы и подграфу, и заполнителю, а новый идентификатор заполнителя добавьте в последнее назначение класса. Разместите его перед end закрывающего его подграфа группы. Например, четвертый конечный блок в Group B должен находиться рядом с blockC внутри groupB.

Проверяйте закрывающие операторы изнутри наружу: сначала закройте конечный блок, затем группу, потом коллекцию. Отступы помогают увидеть эту структуру при редактировании, но именно положение каждого end должно быть правильно указано в исходном коде.

Зачем использовать заполнители вместо пустых подграфов?

Поведение пустых контейнеров различалось в разных рендерерах и версиях. В задаче Mermaid 5402 сообщается, что пустой подграф не работает с ELK в Mermaid 10.8.0, тогда как приведенный пример с Dagre работает. Это исторический отчет о конкретной конфигурации, а не свидетельство того, что все современные рендереры отклоняют пустые подграфы. См. Рендерер Elk не работает с пустым подграфом.

Практический вывод: если диаграмма предназначена для неизвестной установки, не стоит делать ее зависимой только от того, как обрабатываются пустые контейнеры. Подход с заполнителями задает явное содержимое для каждого конечного блока, сохраняя значимый заголовок на подграфе.

При выборе подходящего подхода воспользуйтесь этой таблицей:

Требование Начальный подход Что проверить
Видимые конечные блоки должны оставаться контейнерами с заголовками Вложенные подграфы с прозрачными заполнителями Заголовки, вложенность и скрытые вспомогательные элементы
В исходном коде не должно быть вспомогательных узлов Попробовать пустые конечные подграфы в целевом рендерере Приемлемо ли отображается каждый пустой конечный блок
Позже в конечных блоках появится реальное содержимое Оставить подграфы конечных блоков и заменить заполнители Удалить только те вспомогательные элементы, которые больше не нужны
Нужно задать точное расположение блоков по столбцам Отдельно оценить блок-схемы Mermaid Поддержку синтаксиса установленной версией и отображение заголовков

В отдельной документации Mermaid по блок-схемам описаны составные блоки, столбцы и явные интервалы. Эти возможности стоит оценить, если основная задача — расположение блоков. Сами по себе они не гарантируют, что преобразование сохранит именно такое представление контейнеров с заголовками. См. Документацию по блок-схемам.

Разберитесь, почему результат выглядит неправильно

Меняйте только один параметр за раз. Сохраните полную копию исходного примера в отдельной заметке, чтобы отличить различия между рендерерами от ошибок редактирования.

  1. В заметке отображается код, а не диаграмма. Проверьте, что в открывающем ограничителе указано mermaid, затем переключитесь в Reading view. Сверьте ограничитель с документированным форматом диаграмм Obsidian.
  2. Конечный блок выглядит как обычный прямоугольник с подписью. Проверьте его объявление. Оно должно начинаться с subgraph, а заполнитель должен находиться внутри на отдельной строке.
  3. В конечном блоке виден маленький прямоугольник. Сверьте идентификатор заполнителя с последним оператором class. Временно удалите стиль, чтобы определить, какой вспомогательный элемент виден, а затем восстановите его.
  4. Блок оказался не в той группе. Прежде чем менять настройки компоновки, проверьте последовательность закрывающих операторов end.
  5. В интернете диаграмма выглядит правильно, а в Obsidian иначе. Сравните заметки о выпуске установленного приложения с версией онлайн-рендерера. Используйте работающий локальный пример как образец.

Сначала сохраните вложенность, затем настраивайте расположение

Когда заголовки и вложенность будут правильными, решите, достаточно ли читаемо расположены блоки. Не заменяйте подграф конечного блока узлом только ради того, чтобы сделать его прямоугольник меньше: так вы измените представление, которое собирались сохранить.

Добавляйте связи только в том случае, если диаграмме нужно показать отношения помимо вложенности. В документации Mermaid описано ограничение направления: если связать узел внутри подграфа с узлом снаружи, этот подграф наследует направление родительского. После добавления таких связей проверьте компоновку еще раз. См. Направление в подграфах.

В завершение проверьте заметку при ширине окна, в которой обычно ее читаете. Сохраните вариант, в котором четко видны коллекция, ее группы и конечные блоки с заголовками. Хороший результат — это читаемая иерархия вложенности, в которой конечные блоки остаются подграфами, а назначение невидимых вспомогательных элементов понятно и их можно легко удалить позже.

Источники