Модель C4

Модель C4 — это набор диаграмм, которые помогают визуализировать архитектуру программной системы с разной степенью детализации.
Она была создана Саймоном Брауном, архитектором и автором книги Software Architecture for Developers.

Главная идея C4 — это «Google Maps для вашего кода»:
точно так же, как вы можете увеличивать и уменьшать масштаб карты, чтобы видеть больше контекста или деталей,
модель C4 позволяет рассматривать архитектуру на разных уровнях глубины.

Четыре уровня модели C4

1. Контекстная диаграмма (Context Diagram) — показывает систему в окружении внешних пользователей и внешних сервисов.
2. Диаграмма контейнеров (Container Diagram) — раскрывает внутреннее устройство системы: веб-приложения, API, базы данных и т.д.
3. Диаграмма компонентов (Component Diagram) — показывает основные части конкретного контейнера.
4. Диаграмма кода (Code Diagram) — визуализирует реализацию на уровне классов, модулей или компонентов.

Уровень 1. Контекстная диаграмма (System Context Diagram)

На этом уровне система представлена как одна большая коробка, а вокруг неё:

• пользователи,
• внешние сервисы,
• другие системы, с которыми она взаимодействует.

Это идеальный уровень для:

• для документации,
• для коммуникации с нетехническими специалистами — PM, дизайнерами, менеджерами.

Контекст меняется редко, поэтому такие диаграммы долго сохраняют актуальность.

Для FoodFleet это выглядит примерно так:

• Пользователь - заказывает еду из разных ресторанов,
• Ресторан - размещает товары в системе, принимает заказы и обрабатьывает их
• Доставщик - доставляет заказы из ресторанов пользоватлем.

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

---

Уровень 2. Диаграмма контейнеров (Container Diagram)

Этот уровень раскрывает содержимое системы.
Если на первом уровне мы видели лишь коробку, то теперь открываем её и видим что внутри.

В C4 под контейнерами понимают:

• веб-приложения,
• мобильные приложения,
• API,
• базы данных,
• сервисы реального времени и т. д.

Пример для Food Fleet:

• Web-приложение — React/Vue SPA, через которое взаимодействуют покупатели и продавцы.
• API-сервер — Node.js или NestJS, обрабатывает заказы, авторизацию и бизнес-логику.
• База данных — PostgreSQL, хранит пользователей, товары и заказы.
• Сервис уведомлений — отправка email и push-уведомлений.

Диаграмма контейнеров показывает:

• связи между контейнерами (например, «Web-приложение → API-сервер → База данных»),
• и технологии, которые используются (но без избыточных технических деталей).

Этот уровень:

• по-прежнему подходит для документации,
• достаточен для разъяснения архитектуры нетехническим участникам,
• меняется чаще, чем контекст, но всё ещё относительно стабилен.

---

Уровень 3. Диаграмма компонентов (Component Diagram)

Компоненты — это крупные структурные элементы внутри контейнера.

В бэкенде это обычно:

• контроллеры,
• сервисы,
• фасады,
• модули.

Для фронтенда классический формат C4 работает хуже —
поэтому позже мы рассмотрим адаптированную версию компонентных диаграмм для фронтенд-приложений.

Мы не будем описывать классы и контроллеры, а выделим логические области интерфейса и состояния.

Особенности этого уровня:

• Диаграмма ориентирована на инженеров и архитекторов.
• Она быстро устаревает, так как детали системы на этом уровне меняются часто.
• Её не обязательно рисовать для всех контейнеров.
• Чаще всего она нужна для дизайн-доков, объяснения изменений или принятия архитектурных решений.

---

Уровень 4. Диаграмма кода (Code Diagram)

Здесь мы уже показываем внутренние детали реализации:

• структуру проекта,
• взаимосвязь компонентов,
• зависимости между модулями.

Здесь могут использоваться любые виды диаграмм:

• диаграммы классов,
• ER-диаграммы,
• диаграммы модулей,
• внутренние схемы библиотек.

Предназначение уровня — показать,
как архитектурные решения проявляются в реальном коде.

Но: поддерживать детальные диаграммы вручную сложно,
поэтому чаще их применяют точечно — для объяснений, документации или ревью архитектуры.

---

Итоги

Модель C4 помогает рассматривать архитектуру системы на разных уровнях —
от общего представления о проекте до конкретных технических решений.

Для любого приложения это способ:

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

Уровни модели следующие:

• Level 1 — Контекст: что окружает систему.
• Level 2 — Контейнеры: из чего состоит система.
• Level 3 — Компоненты: ключевые элементы одного контейнера.
• Level 4 — Код: детализация на уровне реализации.

Лучший способ глубже изучить модель — посетить c4model.com и посмотреть выступления Саймона Брауна на YouTube.