Как проектировать ERD в Mermaid

ERD (Entity Relationship Diagram) — это схема, которая показывает, какие сущности есть в системе и как они связаны между собой.

Если вы проектируете интерфейсы для CRM, CMS, маркетплейса, SaaS-платформы — такая диаграмма поможет вам:

• Понять структуру данных
• Согласовать термины с командой
• Спроектировать экраны: списки, карточки, фильтры
• Не упустить поля и связи в UI

И всё это можно сделать в Mermaid, прямо в Markdown — без Figma и табличек.

Что такое сущности?

Сущности — это объекты, с которыми работает пользователь и система:
Клиенты, Заказы, Товары, Бонусные кампании, Счета, Документы и т.д.

Минимальная структура Mermaid ERD

erDiagram
  USER ||--o{ ORDER : places
  ORDER {
    int id
    date order_date
    float total
  }
  USER {
    int id
    string name
    string email
  }

Здесь:

• erDiagram — тип диаграммы
• ENTITY {} — сущность с атрибутами (полями)
• ||--o{ — тип связи (один ко многим)

Как читать связи

Пример: CRM с бонусной программой

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ ORDER_ITEM : contains
  CUSTOMER ||--o{ LOYALTY_CARD : owns
  LOYALTY_CARD ||--|{ BONUS_TRANSACTION : records

  CUSTOMER {
    string id
    string name
    string phone
  }

  ORDER {
    string id
    date created_at
    float total_amount
  }

  ORDER_ITEM {
    string id
    string product_name
    int quantity
    float price
  }

  LOYALTY_CARD {
    string card_number
    date issue_date
    float current_balance
  }

  BONUS_TRANSACTION {
    string id
    float amount
    date date
    string type
  }

Это схема, которую вы потом превратите в интерфейсы:

• CUSTOMER → список клиентов, фильтрация по имени
• ORDER → карточка заказа, история покупок
• LOYALTY_CARD → просмотр бонусного баланса
• BONUS_TRANSACTION → история начислений/списаний

Полезные советы для дизайнеров

• Каждый экран — это работа с одной сущностью или связью между двумя
• Атрибуты = поля формы, карточки, колонки таблицы
• ERD помогает понять какие данные показывать и откуда они берутся
• Используйте единый нейминг в ERD и UI (например, order_date, card_number)

Где рисовать и просматривать?

• https://mermaid.live — онлайн редактор
• Notion (вставка кода + расширение Mermaid)
• GitHub (.md файлы)
• VS Code с плагином Mermaid
• Obsidian, MkDocs, Docusaurus и другие