Mermaid для проектировщика

Думаем в чатиках, но красиво рисуем…

Mermaid — это язык, который позволяет создавать схемы и диаграммы с помощью простого текста.
Работает прямо в Markdown, GitHub, Notion, Obsidian и многих системах документации.

Mermaid позволяет быстро рисовать:

• User Journey Maps (UJM)
• Карты сайта / информационную архитектуру (IA)
• Диаграммы процессов и блок-схемы
• ERD (Entity Relationship Diagram) — диаграммы связей сущностей
• Диаграммы состояний, последовательностей и др.

Преимущества

• Пишешь текст — получаешь схему
• Можно версионировать в Git
• Не нужен визуальный редактор
• Идеально для документации и командной работы

1. User Journey Map (UJM)

journey
    title Поход в магазин
    section Вход
      Зашёл в магазин: 3:Покупатель
    section Покупка
      Нашёл товар: 4:Покупатель
      Расплатился: 5:Покупатель

• title — заголовок сценария
• section — этап
• Оценка — от 1 до 5 (настроение пользователя)
• Роль — кто совершает действие

2. Карта сайта / IA (Информационная архитектура)

graph TD
  Home --> About
  Home --> Products
  Products --> Product1
  Products --> Product2

• graph TD — направленное движение сверху вниз
• --> — стрелка от одного узла к другому

3. ERD (Диаграмма связей сущностей)

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE_ITEM : contains
  CUSTOMER {
    string name
    string email
  }
  ORDER {
    int id
    date orderDate
  }

• ||--o{ — один ко многим
• ENTITY {} — поля внутри сущности

4. Диаграмма процессов (flowchart)

flowchart TD
  Start --> Login
  Login -->|OK| Dashboard
  Login -->|Ошибка| ErrorPage

• Отлично для описания сценариев, логики, условий

5. Диаграмма состояний (state diagram)

stateDiagram-v2
  [*] --> Idle
  Idle --> Loading
  Loading --> Success
  Loading --> Error
  Success --> [*]
  Error --> Idle

• Подходит для UI-состояний, работы компонентов, FSM

Где использовать Mermaid

• Notion — через /code + live editor
• GitHub — в .md файлах
• Obsidian — работает "из коробки"
• Docsify, Docusaurus — в документации
• VS Code — с расширением Mermaid Preview
• https://mermaid.live/ — онлайн-редактор

Как начать?

1. Открой https://mermaid.live
2. Вставь любой пример
3. Редактируй — и сразу видишь результат