Flowchart (Блок-схемы)

Flowchart — самый универсальный тип диаграмм Mermaid, который используется для визуализации процессов, алгоритмов и логики работы системы. Это, как правило, первое, к чему тянутся, когда нужно показать «как это работает» на схеме, а не в описании текстом.

Пример

Ниже — блок-схема с ветвлением по условию, которая показывает, как узлы, связи и подписи складываются в законченную диаграмму:

---
config:
    theme: neutral
---
graph TD
  Start[Начало процесса] --> Step1[Первый шаг]
  Step1 --> Step2{Условие?}
  Step2 -->|Да| Step3[Действие A]
  Step2 -->|Нет| Step4[Действие B]
  Step3 --> End[Конец процесса]
  Step4 --> End

Форма узла здесь несёт смысл: прямоугольники [ ] обозначают шаги процесса, а фигурные скобки { } — точки ветвления, то есть условия, на выходе из которых может быть несколько вариантов продолжения. Стрелки показывают направление потока выполнения, а подпись на стрелке (например, |Да|) поясняет, какому варианту условия соответствует та или иная ветка.

Результат в готовом документе выглядит так:

TIP

Используйте логические ромбы ({}) именно для условий, а не для обычных шагов процесса — так схема остаётся читаемой с первого взгляда. Подписи узлов при этом лучше делать короткими и по существу: длинный текст внутри узла делает диаграмму громоздкой и хуже читается после конвертации в Word.