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

В этом руководстве мы создадим небольшую блок-схему с единообразной заливкой узлов, читаемыми подписями и одним явно обозначенным альтернативным шагом. Все подписи вымышлены. Цель — показать повторно используемый шаблон стилизации для обычных заметок и отдельно объяснить различия в работе Mermaid и нового обработчика Pele в Obsidian.

Сначала проверьте, какой обработчик установлен

Найдите сведения о сборке в разделе Настройки → О программе → Приложение → Текущая версия. Это расположение указано в справке Obsidian «Версии раннего доступа». Запишите номер версии, прежде чем разбираться со стилями.

Есть важное ограничение: в примечаниях к выпуску Obsidian 1.15.0 Desktop от 22 октября 2026 года, помеченному как версия раннего доступа, говорится о внедрении Pele для отображения диаграмм Mermaid. В примечаниях указана поддержка синтаксиса Mermaid 12.1.0, использование цветов и шрифтов темы, а также другие классы SVG. Эти примечания относятся к конкретному выпуску и не позволяют определить, какой обработчик установлен на вашем Mac. См. Obsidian 1.15.0 Desktop.

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

Среда отображения Начните с Что нужно учитывать
Obsidian использует сам Mermaid Классы блок-схем, заданные в исходном коде; при необходимости — метаданные диаграммы Доступные настройки зависят от установленной версии Mermaid.
Obsidian использует Pele Стили в исходном коде; при необходимости — переменные CSS Pele Темы Mermaid и цвета themeVariables не применяются.
Плагин заменяет обработчик диаграмм Документации и настройкам обработчика этого плагина Поведение встроенного обработчика не гарантирует совместимость.

В документации Pele отдельно описаны её собственные компоновка и оформление, даже если она принимает синтаксис Mermaid. В разделе «Совместимость» также сказано, что поддержка настроек зависит от типа диаграммы. Синтаксическую совместимость и идентичность визуального результата следует проверять отдельно.

Создайте повторно используемый стиль блок-схемы прямо в заметке

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

```mermaid
flowchart TD
    A[Item A] --> B[Step B]
    B --> C[Result C]
    B --> D[Option D]

    classDef standard fill:#edf2f7,stroke:#475569,color:#172033,stroke-width:2px;
    classDef alternate fill:#e0f2fe,stroke:#0369a1,color:#172033,stroke-width:2px;
    class A,B,C standard;
    class D alternate;
```

Описанный в Mermaid синтаксис classDef задаёт повторно используемый внешний вид, а class назначает его именованным узлам. Здесь три узла используют standard, а один — alternate. Отделяйте идентификаторы узлов от видимых подписей — так будет проще отслеживать изменения текста. Эти механизмы описаны в разделе «Блок-схемы — базовый синтаксис».

Палитра приведена для примера. В ней светлая заливка сочетается с тёмным текстом и более контрастными границами. Подпись Option D также обозначает альтернативный шаг, поэтому его смысл не зависит только от синей заливки.

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

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

Pele тоже поддерживает стилизацию, заданную в диаграмме. В документации объясняется, что цвета, указанные в исходном коде, остаются неизменными при смене темы. Это удобно, если нужна единая палитра, а тему Obsidian хочется сохранить. См. «Темы Pele».

Используйте метаданные диаграммы, только если её отображает Mermaid

Если в вашей среде диаграммы обрабатывает сам Mermaid и поддерживаются метаданные диаграммы, можно одновременно задать общую палитру и типографику. Mermaid документирует настройку через метаданные диаграммы начиная с версии 10.5.0. Глобальная настройка на уровне сайта относится к интегрирующему приложению; автор заметки может использовать локальную настройку диаграммы. См. «Настройка Mermaid».

В этом полном альтернативном примере задан единый стиль для всех трёх узлов. Сначала проверьте его в отдельном блоке:

```mermaid
---
config:
  theme: base
  themeVariables:
    primaryColor: "#edf2f7"
    primaryTextColor: "#172033"
    primaryBorderColor: "#475569"
    lineColor: "#64748b"
    fontFamily: "Arial, sans-serif"
    fontSize: "16px"
---
flowchart TD
    A[Item A] --> B[Step B]
    B --> C[Result C]
```

Блок YAML должен находиться внутри разделителей mermaid, перед flowchart TD. Это настройка диаграммы, а не свойства заметки в начале Markdown-файла.

В документации Mermaid base указан как настраиваемая тема; механизм темизации требует цвета в шестнадцатеричном формате. В разделе «Настройка темы» перечислены используемые выше переменные для текста, заливки, границ, линий и шрифта. Эти параметры задают оформление диаграммы, не меняя тему приложения Obsidian.

В Pele изменение цветов themeVariables в этом примере не даст такого же результата: эти цвета явно не поддерживаются. Для фиксированных цветов узлов используйте классы, заданные в исходном коде, а для общих настроек обработчика — подход с переменными CSS ниже. Если настройки темы Mermaid игнорируются, дальнейшая подстройка шестнадцатеричных значений не поможет. См. «Совместимость с Pele».

Задайте общие настройки Pele с помощью небольшого фрагмента CSS

В установленной версии с Pele можно использовать переменные CSS. Это удобно, когда нужны единые настройки для нескольких диаграмм и проще изменить одну таблицу стилей, чем редактировать каждый блок.

Следующий полный фрагмент предназначен для блок-схем Pele. Он задаёт цвета текста, заливки, границ и соединительных линий, не меняя заметку или тему приложения. Селектор и переменные описаны в разделе «Темы Pele».

.pele-flowchart {
  --pele-bg: #ffffff;
  --pele-fg: #172033;
  --pele-line: #64748b;
  --pele-surface: #edf2f7;
  --pele-surface-alt: #e2e8f0;
  --pele-border: #475569;
}

Добавьте фрагмент через настройки Obsidian для настольных компьютеров:

  1. Откройте Настройки.
  2. В разделе Оформление → Фрагменты CSS нажмите Открыть папку фрагментов.
  3. Создайте в этой папке текстовый файл с именем diagram-defaults.css и вставьте в него CSS.
  4. Вернитесь в раздел Оформление → Фрагменты CSS и нажмите Обновить фрагменты.
  5. Включите diagram-defaults.

Эти элементы управления и автоматическое применение сохранённых изменений во фрагментах описаны в справке Obsidian «Фрагменты CSS». На Mac проверьте, что редактор сохранил файл с расширением .css.

Проверьте общие настройки на диаграмме из трёх узлов в предыдущем разделе, удалив метаданные диаграммы. Цвета, заданные в исходном коде, могут переопределять настройки обработчика, поэтому явные классы узлов из первого примера не подходят для проверки действия общих переменных заливки.

В этом фрагменте намеренно используется фиксированная светлая палитра. Если для чтения вам нужна другая палитра, согласованно измените цвета текста, поверхностей, границ и линий, а затем проверьте результат. Переменная --pele-bg используется для элементов фона; она не гарантирует непрозрачный фон под всей диаграммой.

Этот фрагмент предназначен именно для Pele. В документации Mermaid для стилизации узлов рекомендуется classDef; там же предупреждается, что внешние CSS-стили могут уступать внутренним стилям Mermaid. Нельзя считать, что таблица стилей для одного обработчика подходит и для другого. См. рекомендации Mermaid по классам CSS.

Последовательно устраните проблемы с читаемостью диаграмм

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

  1. Упростите пример. Скопируйте диаграмму из заметки во временную заметку и оставьте три короткие подписи. Если не работает и такой пример, сначала проверьте синтаксис и поддержку обработчика, а потом настраивайте цвета.
  2. Выберите один способ стилизации. Проверьте отдельно классы в исходном коде, метаданные Mermaid или переменные Pele. Если сразу объединить их, будет сложнее определить, какие настройки переопределяются.
  3. Проверьте сочетания цветов. Сравните текст с заливкой узлов, затем границы и стрелки с фоном заметки. Сначала исправьте нечитаемое сочетание, а уже потом добавляйте новый акцентный цвет.
  4. Проверьте ширину области чтения. Просмотрите диаграмму при обычной для вас ширине панели. Если она становится слишком широкой, сократите подписи или попробуйте вертикальную компоновку.
  5. Постепенно добавляйте сложность. Добавляйте оставшиеся узлы, альтернативные стили и подписи связей небольшими группами. Сохраняйте последнюю читаемую версию для сравнения.

Для изменения направления Mermaid обозначает TD как направление сверху вниз, а LR — слева направо. Прежде чем переписывать диаграмму, попробуйте изменить только это объявление. См. раздел «Направление блок-схемы».

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

Храните небольшую эталонную диаграмму рядом с повторно используемой палитрой. Когда подписи, узлы и соединители будут хорошо читаться при обычной ширине панели, применяйте те же правила в рабочих заметках. Единообразие обеспечивают повторяемый стиль и знание ограничений установленного обработчика; тему Obsidian можно оставить прежней.

Источники