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

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

Почему перекрёстные связи нарушают расположение рядов в блок-схеме?

В документации Mermaid описано конкретное ограничение блок-схем: когда узел внутри подграфа соединяется с узлом вне этого подграфа, локальное направление игнорируется и наследуется направление родительского графа. Поэтому ряд, объявленный с direction LR внутри flowchart TB, может изменить расположение после добавления внешней связи. См. официальное описание ограничения направления подграфов.

В этом полном примечании для наглядности показано такое условие. Две внутренние связи задают горизонтальные ряды, но A --> D пересекает границу подграфа:

```mermaid
flowchart TB
  subgraph RowOne[Row One]
    direction LR
    A[Alpha] --> B[Beta]
  end
  subgraph RowTwo[Row Two]
    direction LR
    D[Delta] --> E[Epsilon]
  end
  A --> D
```

Mermaid также поддерживает связи с идентификаторами подграфов. Связь RowOne с RowTwo позволяет не указывать их внутренние узлы, но меняет смысл отношения: соединяются группы, а не Alpha и Delta. Используйте этот вариант, только если связь между группами соответствует действительности. Невидимые связи, например A ~~~ B, описаны как вспомогательный способ позиционирования, но не как механизм фиксации рядов. Синтаксис блок-схем

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

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

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

Версия здесь имеет существенное значение: в ранней версии Obsidian 1.15.0 Desktop, выпущенной 22 октября 2026 года, для отрисовки диаграмм появился Pele и была заявлена совместимость с синтаксисом Mermaid 12.1.0. В этом объявлении не указано, какой рендерер используется в более ранних установленных версиях. Примечания к выпуску Obsidian 1.15.0 Desktop

В Pele описан собственный механизм компоновки, в котором позиции узлов, интервалы и траектории рёбер отличаются от Mermaid. В список совместимых элементов входят block и block-beta. Следовательно, одной лишь совместимости синтаксиса недостаточно, чтобы утверждать, что диаграмма в Obsidian будет выглядеть так же, как при рендеринге в upstream-версии Mermaid. Совместимость с Pele

Upstream-версия Mermaid тоже менялась: в документации по компоновке указано, что в версии 12.0.0 ELK стал встроенным и выбранным по умолчанию для блок-схем; раньше хосту нужно было установить и зарегистрировать отдельный пакет ELK. Поэтому рекомендация выбрать layout: elk зависит от рендерера и его версии. Компоновка Mermaid

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

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

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

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

```mermaid
block
  columns 5
  A["Alpha"] space B["Beta"] space C["Gamma"]
  space:5
  D["Delta"] space E["Epsilon"] space F["Zeta"]

  A --> B
  B --> C
  D --> E
  E --> F
  A --> D
  B --> E
  C --> F
  A --> F
```

Задуманное расположение: Alpha, Beta и Gamma в верхнем занятом ряду, а под ними — Delta, Epsilon и Zeta. В пяти столбцах предусмотрены два горизонтальных промежутка; space:5 задаёт целый пустой ряд между занятыми рядами. Связи ссылаются на объявленные идентификаторы блоков. Эти конструкции соответствуют документированному в Mermaid синтаксису столбцов, интервалов и рёбер. Синтаксис блочных диаграмм

Если установленный рендерер не распознаёт block, остановитесь и сначала выясните вопрос совместимости. Проверьте синтаксис в его документации, прежде чем пробовать старую запись block-beta; в Pele явно указаны обе формы, но это не доказывает поддержку в каждой более ранней версии Obsidian. Примеры здесь сверялись с документацией, но не запускались в установленном рендерере Obsidian. Совместимость с Pele

Оцените результат в два этапа. Сначала проверьте подписи шести узлов и принадлежность к нужным рядам. Затем просмотрите все восемь связей, особенно диагональную связь Alpha—Zeta. Принимая расположение блоков, не упускайте из виду неоднозначный или перекрывающийся соединитель.

Нужны ли фиксированные ряды и прямоугольные соединители?

Проверяйте внешний вид соединителей отдельно. В конфигурации блок-схем Mermaid curve задан как параметр отрисовки рёбер; среди его значений перечислены step, stepBefore и stepAfter. Для узлов на одном уровне отдельно задан nodeSpacing, а для узлов на разных уровнях — rankSpacing. Эти параметры влияют на внешний вид и интервалы; их описанное назначение не гарантирует фиксированное размещение по рядам. Схема конфигурации диаграмм блок-схем Mermaid

Пример блочной диаграммы задаёт расположение блоков. Он не гарантирует, что все перекрёстные связи будут состоять только из горизонтальных и вертикальных сегментов. Не предполагайте, что настройка кривых блок-схем управляет соединителями блочных диаграмм, или что настройка, принимаемая upstream-версией Mermaid, работает в Pele так же.

Прежде чем тратить время на настройку рисунка, воспользуйтесь этой таблицей решений:

Требуемый результат Практичный вариант Проверка результата
Два фиксированных ряда с перекрёстными связями между отдельными узлами Блочная диаграмма, если поддерживается Каждый узел остаётся в предназначенном для него ряду
Читаемая блок-схема с гибким расположением Настройка компоновки и интервалов блок-схемы После каждого изменения связи остаются понятными
Связи между целыми группами Конечные точки на подграфах, если это соответствует смыслу Конечные точки отражают нужное отношение
Блоки, расположенные вручную в Obsidian Canvas Расположение карточек и связи соответствуют задуманной диаграмме
Фиксированные ряды и заданные изгибы соединителей Проверка каждого требования отдельно Проверьте каждый изгиб и пересечение в фактически используемом рендерере

Что делать, если установленный Obsidian не отображает блочную диаграмму?

Для обычной задачи на Mac, в которой допустимы карточки с ручным расположением, в Obsidian есть документированная альтернатива — Canvas. Откройте палитру команд и выберите Canvas: Create new canvas. Дважды щёлкните по холсту, чтобы создать текстовые карточки, затем введите шесть условных подписей. Canvas — справка Obsidian

Выделите три верхние карточки и выберите Align, затем Arrange in a row. Повторите для трёх нижних. При необходимости настройте интервалы. Чтобы соединить карточки, наведите курсор на край карточки, пока не появится заполненный кружок, затем перетащите его к краю другой карточки. Эти инструменты выравнивания и соединения описаны среди функций Canvas. Canvas — справка Obsidian

Canvas создаёт отдельный документ .canvas, а не встроенный блок кода Mermaid. Выбирайте его, если ручное расположение карточек подходит для результата. Его инструменты управления расположением позволяют решить задачу с рядами, но в указанной документации не описано редактирование произвольных промежуточных точек соединителей. Canvas — справка Obsidian

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

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

  1. Отобразите шесть объявленных блоков без восьми линий связей. Проверьте, в каких рядах они расположены.
  2. Восстановите четыре связи внутри рядов. Проверьте подписи и направление стрелок.
  3. Восстановите три связи между соответствующими столбцами. Проверьте промежуток между рядами.
  4. Последней восстановите A --> F. Проверьте, остаётся ли её траектория читаемой.
  5. Снова откройте окончательный исходный код в среде, где собираетесь его читать. Оцените результат именно там.

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

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

Источники