MarkNode отображает диаграммы прямо в области предварительного просмотра. Вы описываете диаграмму в огороженном блоке кода с помощью синтаксиса Mermaid — текстового способа описания блок-схем, диаграмм последовательности и многого другого, — а MarkNode рисует её как изображение вместо кода, полностью в офлайн-режиме.
Как написать диаграмму
Используйте огороженный блок кода с идентификатором языка mermaid:
```mermaid
flowchart TD
Start[Start] --> Decision{Need a diagram?}
Decision -->|Yes| Draw[Write it in Markdown]
Decision -->|No| Skip[Keep writing prose]
Draw --> Done[Done]
Skip --> Done
```В области предварительного просмотра блок кода заменяется отрисованной блок-схемой. Исходный текст Markdown при этом не меняется — MarkNode лишь рисует его изображение; чтобы изменить диаграмму, отредактируйте текст mermaid, и изображение обновится.
Полностью стилизованные типы диаграмм
Блок-схемы, диаграммы последовательности, диаграммы классов и диаграммы состояний получают полноценную обработку MarkNode — они компонуются и оформляются в едином стиле с остальным документом, а не просто вставляются как обычное изображение.
Например, диаграмма последовательности:
```mermaid
sequenceDiagram
participant Writer
participant MarkNode
Writer->>MarkNode: Write a mermaid code block
MarkNode-->>Writer: Render diagram in preview
```
Диаграммы классов и состояний используют то же ограждение mermaid со своими ключевыми словами Mermaid (classDiagram, stateDiagram-v2) и отрисовываются с тем же уровнем проработки.
Другие типы диаграмм
Многие другие типы диаграмм Mermaid — включая круговые диаграммы и диаграммы Ганта — также отображаются в MarkNode уже сегодня: как настоящие диаграммы, оформленные в вашей теме, а не как код. Тот же уровень проработки компоновки, который получают блок-схемы, диаграммы последовательности, классов и состояний, запланирован для этих типов диаграмм в одном из будущих обновлений.
Соответствие вашей теме
В области предварительного просмотра диаграммы следуют теме приложения вашего документа. Переключите тему — и все диаграммы на экране изменят оформление вместе с остальным содержимым предварительного просмотра; ничего настраивать отдельно не нужно.
Предварительный просмотр Quick Look вместо этого следует системному светлому или тёмному оформлению вашего Mac. Блок-схемы, диаграммы последовательности, классов и состояний выглядят корректно в обоих случаях; круговые диаграммы и диаграммы Ганта в Quick Look пока отрисовываются с единой палитрой.
Где появляются диаграммы
Диаграммы отрисовываются везде, где отображается ваш готовый Markdown:
- Закреплённая панель предварительного просмотра
- Отдельное окно предварительного просмотра
- Quick Look в macOS (нажмите пробел на файле Markdown в Finder — см. Предварительный просмотр Quick Look)
- Экспорт в DOCX — как встроенное изображение
Ошибки
Если в синтаксисе Mermaid допущена ошибка — нераспознанный тип диаграммы, опечатка в синтаксисе, — MarkNode покажет исходный огороженный блок кода вместо повреждённого или пустого изображения. Остальная часть документа отображается как обычно; затронут только этот блок. Исправьте исходный текст, и диаграмма появится при следующем обновлении предварительного просмотра.
Поддерживаемый синтаксис
MarkNode следует собственному синтаксису проекта Mermaid. Полный перечень типов диаграмм и параметров см. в официальной документации Mermaid — MarkNode пытается отрисовать всё, что там считается корректным.