Appearance
Основы 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 "Название диаграммы", как описано в разделе «Диаграммы».