Полезные диаграммы для проектирования фронтенд-архитектуры

В этом уроке мы познакомимся с другими полезными типами диаграмм, которые помогают продумывать архитектуру и логику приложения на низком уровне. В отличие от C4-диаграмм, эти инструменты ближе к коду, быстро устаревают и не подходят для долговременной документации.
Однако они незаменимы для:

• прояснения собственных мыслей,
• коммуникации с командой,
• анализа логики,
• выявления сценариев, состояний и взаимодействий.

Зачем нужны эти диаграммы

Когда вы начинаете проектировать новую фичу, один из лучших способов разобраться в задаче — взять лист бумаги и нарисовать блоки и стрелки. После этого диаграмму можно перенести в цифровой вид (например, с помощью Mermaid, Excalidraw или TLDraw) и отправить команде для обсуждения. Ценность диаграмм состоит в том, что они:

• помогают быстро прийти к ясности;
• выявляют скрытые состояния, переходы и сценарии;
• служат основой для командных решений;
• позволяют заранее продумать сложные участки кода.

Инструменты

В примерах используется Mermaid, потому что он легко редактируется и хорошо интегрируется с Markdown.

Но вы можете использовать любые low-effort-инструменты вроде Excalidraw или TLDraw. Ниже по каждому типу диаграм вы найдете пример кода mermaid и визуализацию. Также можно воспользоваться уже знакомым нам ресурсом mermaid.live чтобы поэкспериментировать с каждым видом. В следующем уроке мы более подробно остановимся на 4 типе диграмм - диаграммы последовательностей.

Основные типы диаграмм

1. Flowcharts (блок-схемы)

Такие диаграммы очень полезны когда нужно визуально описать кусок логики, условия, ветвления, последовательность шагов.

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

Mermaid-пример:

flowchart TD
    A[Start] --> B{Условие?}
    B -->|Да| C[Вариант 1]
    B -->|Нет| D[Вариант 2]
    C --> E[End]
    D --> E
mermaid

!(Mermaid Flowchart Example)[https://s3.twcstorage.ru/f280a6ef-learning-hub-test/lessons/frontend-architecture/assets/Mermaid%20Flowchart%20Example.png]

2. State Diagrams (диаграммы состояний)

Эти диаграммы помогут когда функциональность может находиться в различных состояниях и переходить между ними. Они особенно полезно при работе:

• со state machine-подходами (Redux, Mobx, useState),
• со сложными UI-состояниями (ошибка, загрузка, пустой результат),
• с процессами, требующими чёткой логики переходов.

stateDiagram-v2
    [*] --> Idle
    Idle --> Loading : Send Request
    Loading --> Success : Response OK
    Loading --> Error : Response Error
    Error --> Idle : Retry
mermaid

!(Mermaid State Diagram Example)[https://s3.twcstorage.ru/f280a6ef-learning-hub-test/lessons/frontend-architecture/assets/Mermaid%20State%20Diagram%20Example.png]

3. Class Diagrams (диаграммы классов / ER-диаграммы)

Это классика проектирования ПО пригодится когда нужно визуализировать сущности, их атрибуты и связи между ними.

Хотя класс-диаграммы родом из ООП, они идеально подходят и для frontend-архитектуры — для описания:

• сущностей домена,
• типов и интерфейсов,
• моделей данных,
• связей между сущностями.

classDiagram
    class Restaurant {
        +string id
        +string name
        +string category
        +number deliveryFee
    }

    class MenuItem {
        +string id
        +string title
        +number price
    }

    Restaurant "1" --> "many" MenuItem : содержит
mermaid

4. Sequence Diagrams (диаграммы последовательностей)

Диаграммы последовательностей незаменимы когда нужно показать взаимодействие нескольких участников во времени, особенно если есть асинхронность.

Идеально подходит для описания сложных сценариев, задействующих несколько микросервисов или слоев приложения. Например: оформление заказа, процесс оплаты, загрузка данных, взаимодействие фронтенда с API и сторонними сервисами.

sequenceDiagram
    participant User
    participant WebApp
    participant CoreAPI
    participant DB
    participant Payment

    User->>WebApp: Нажимает "Оформить заказ"
    WebApp->>CoreAPI: POST /orders
    CoreAPI->>DB: Сохранить заказ
    DB-->>CoreAPI: OK
    CoreAPI->>Payment: Создать платеж
    Payment-->>CoreAPI: Подтверждение
    CoreAPI-->>WebApp: Order confirmed
    WebApp-->>User: Успешное оформление
mermaid

Такие диаграммы помогают заранее обсудить какие данные передаются, какой API действительно нужен, что делать в случае ошибки платежа, кто за что отвечает.

В следующем упражнении мы подробнее поработаем с sequence diagrams, потому что именно они чаще всего помогают проектировать сложные взаимодействия между пользователем, фронтендом и backend-сервисами.