Skip to content

Основы Mermaid

Любая диаграмма Mermaid начинается с обычного блока кода в Markdown — вы не рисуете картинку, а описываете её текстом, а систему уже сама превращает описание в изображение при рендеринге:

mermaid
graph TD
  A[Начало] --> B[Процесс]
  B --> C[Конец]

В этом простом примере уже видны все базовые понятия языка. graph TD задаёт тип диаграммы — блок-схему — и направление, в котором она строится: TD означает top-down, то есть сверху вниз. Дальше идут узлы, каждый из которых обозначается коротким идентификатором и подписью в квадратных скобках, например A[Начало], а связи между узлами рисуются стрелкой -->.

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

  • flowchart — блок-схемы процессов и алгоритмов;
  • sequence — диаграммы последовательностей взаимодействий во времени;
  • class — диаграммы классов и структур данных;
  • gantt — графики Ганта для планирования сроков;
  • state — диаграммы состояний.

Каждому из основных типов, которые чаще всего нужны в научных и технических работах, посвящена отдельная страница этого раздела — там разобраны и синтаксис, и типичные примеры использования.

INFO

Все Mermaid-блоки в тексте документа начинаются с тройных обратных кавычек и слова ```mermaid — так система понимает, что перед ней код диаграммы, а не обычный листинг. А чтобы диаграмма получила номер и подпись в готовом Word-документе, для неё дополнительно указывается переменная через конструкцию [Diagram]: VariableName "Название диаграммы", как описано в разделе «Диаграммы».