Диаграмма C4: как визуализировать архитектуру проекта за 5 минут. Примеры в PlantUML

Представьте, что вы объясняете устройство дома: сначала показываете общий план (сколько этажей), потом комнаты (кухня, спальня), затем розетки и выключатели. Диаграмма C4 работает так же — это «масштабируемая карта» вашей IT-системы. Давайте разберёмся, как её создать, даже если вы никогда не рисовали архитектурных схем!

Что такое C4-модель?

C4 — это метод визуализации архитектуры системы через 4 уровня детализации:

1. Контекст (Context) — система в целом и её взаимодействие с внешним миром.
2. Контейнеры (Containers) — основные «блоки» системы (веб-приложение, API, БД).
3. Компоненты (Components) — части внутри контейнеров (например, модуль авторизации).
4. Код (Code) — детали реализации (классы, методы).

Для большинства задач хватает первых трёх уровней.

Примеры в PlantUML

1. Контекст (Context)

Показывает систему и её взаимодействие с людьми/внешними системами.

Пример: Интернет-магазин.

@startuml
!include <C4/C4_Context>

Person(admin, "Администратор", "Управляет товарами и заказами")
Person(customer, "Покупатель", "Делает заказы через сайт")

System(online_store, "Онлайн-магазин", "Продажа товаров")

System_Ext(payment_gateway, "Платёжный шлюз", "Обработка платежей")
System_Ext(email_service, "Email-сервис", "Отправка уведомлений")

Rel(customer, online_store, "Просматривает товары, оформляет заказы")
Rel(admin, online_store, "Добавляет товары, управляет заказами")
Rel(online_store, payment_gateway, "Передаёт данные для оплаты")
Rel(online_store, email_service, "Отправляет письма о заказах")
@enduml

Что видно:

• Кто взаимодействует с системой (покупатель, администратор).
• Какие внешние сервисы подключены (платёжный шлюз, email).

2. Контейнеры (Containers)

Детализирует, из каких «крупных частей» состоит система.

Пример: Внутреннее устройство онлайн-магазина.

@startuml
!include <C4/C4_Container>

System_Boundary(online_store, "Онлайн-магазин") {
Container(web_app, "Веб-приложение", "JavaScript/React", "Интерфейс для пользователей")
Container(mobile_app, "Мобильное приложение", "Kotlin", "Приложение для Android/iOS")
Container(backend, "Бэкенд API", "Java/Spring Boot", "Обработка бизнес-логики")
ContainerDb(database, "База данных", "PostgreSQL", "Хранение товаров, заказов")
Container(redis, "Кэш", "Redis", "Кэширование запросов")
}

System_Ext(payment_gateway, "Платёжный шлюз")
System_Ext(email_service, "Email-сервис")

Rel(web_app, backend, "HTTP/REST API")
Rel(mobile_app, backend, "HTTP/REST API")
Rel(backend, database, "JDBC")
Rel(backend, redis, "Сохраняет сессии")
Rel(backend, payment_gateway, "Оплата через API")
Rel(backend, email_service, "Отправка писем")
@enduml

Что видно:

• Веб- и мобильное приложение как клиенты.
• Бэкенд, БД, кэш как внутренние сервисы.
• Связи между контейнерами.

3. Компоненты (Components)

Детализирует один контейнер (например, бэкенд API).

Пример: Компоненты бэкенда онлайн-магазина.

@startuml
!include <C4/C4_Component>

Container(backend, "Бэкенд API", "Java/Spring Boot") {
Component(auth, "Аутентификация", "Spring Security", "Управление пользователями")
Component(products, "Каталог товаров", "REST Controller", "Поиск, фильтрация")
Component(orders, "Обработка заказов", "Service Layer", "Создание, отмена заказов")
Component(payments, "Интеграция с платежами", "Adapter", "Связь с платёжным шлюзом")
}

ContainerDb(database, "База данных")
Container(redis, "Кэш")

Rel(auth, database, "Хранит данные пользователей")
Rel(products, database, "Загружает товары")
Rel(orders, database, "Сохраняет заказы")
Rel(orders, payments, "Инициирует оплату")
Rel(auth, redis, "Кэширует сессии")
@enduml

Что видно:

• Модули внутри бэкенда (аутентификация, каталог, заказы).
• Как компоненты взаимодействуют с БД и кэшем.

Зачем это нужно?

• 📊 Понять общую картину — даже нетехнические специалисты видят, как устроена система.
• 🔍 Найти слабые места — например, отсутствие кэша или избыточные зависимости.
• 📝 Документировать архитектуру — новые разработчики быстрее вникают в проект.

Как начать использовать C4?

1. Установите PlantUML (плагин для IDE или онлайн-редактор).
2. Используйте библиотеку C4 (примеры выше).
3. Рисуйте сначала контекст, потом контейнеры, затем компоненты.

Заключение:
C4 — это «лего» для архитектора. Не нужно рисовать сотни диаграмм — достаточно 3-4 схем, чтобы показать систему от общего плана до деталей. Начните с простых примеров, и вы удивитесь, насколько это упрощает жизнь!

P.S. Если хотите шаблоны для других систем (микросервисы, мобильные приложения), подписывайтесь — вышлем готовые примеры! 🚀