de_DEen_USes_ESfa_IRjapt_PTru_RU

Овладение диаграммой контейнеров C4: углубление в выбор технологий, ответственность и коммуникацию (с примерами PlantUML)

Что такое диаграмма контейнеров C4?

Диаграмма контейнеров — этоУровень 2в модели C4 Саймона Брауна. Она фокусируется на отдельной программной системе (определённой на уровне 1 — контекст системы), чтобы показать:

The Ultimate Guide to C4 Model Visualization with Visual Paradigm's AI Tools - ArchiMetric

  • Типвысокий уровень формыархитектуры внутри границ вашей системы.

  • Основныеразвертываемые/выполняемые единицыназываемыеконтейнеры.

  • Выбор технологийдля каждого контейнера.

  • Как контейнерывзаимодействуютдруг с другом и с внешними участниками/системами.

Важное уточнение: «контейнер» в C4не являетсяобязательно контейнером Docker. Это любая отдельно развертываемая/выполняемая единица, которая выполняет код или хранит данные. Примеры:

  • Веб-приложение / одностраничное приложение (SPA)

  • Мобильное приложение

  • API на стороне сервера / микросервис

  • База данных (схема)

  • Хранение файлов (корзина S3, папка файловой системы)

  • Брокер сообщений / очередь (при явном моделировании)

  • Приложение для настольного компьютера / CLI-приложение

  • Пакетный процесс / запланированная задача

Диаграмма остаётсявысокий уровень — без внутренних деталей классов или кода (это уровень 3 компонентов или уровень 4 кода).

Когда создавать диаграмму контейнеров

Создавайте (и поддерживайте) диаграмму контейнеров, когда:

  • Вы завершили (или хотя бы нарисовали эскиз) диаграммуконтекст системы диаграмму и вам нужно ответить: «Каковы основные элементы внутри нашей системы?»

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

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

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

  • Вы хотите «архитектуру как код», которая хранится в репозитории и развивается вместе с системой.

  • Большинство командостанавливаются здесь — сам Саймон Браун отмечает, чтоКонтекст системы + Контейнеры диаграммы достаточно для большинства команд разработчиков программного обеспечения. Глубже (компоненты/код) следует переходить только тогда, когда сложность внутри контейнера это оправдывает.

Пропустите или отложите, если:

  • Система чрезвычайно проста (один процесс + база данных).

  • Вы находитесь на очень ранней стадии разработки и вам нужен только общий контекст.

Зачем использовать диаграммы контейнеров? (Ключевые преимущества)

  • Четкость для разных аудиторий
    Разработчики видят технологии и точки интеграции.
    Команды Опс/инфраструктуры видят развертываемые единицы и пути коммуникации.
    Архитекторы видят границы ответственности и риски технического долга.
    Менеджеры видят достаточно нейтральный по технологиям, но при этом конкретный взгляд.

  • Избегает проблемы «одной большой диаграммы»
    Предотвращает загрузку всего (пользователи + инфраструктура + классы + иконки облака) в одну перегруженную картинку.

  • Выделяет ключевые решения
    Четко демонстрирует выбор, например, SPA + API + реляционная БД против серверного рендеринга + NoSQL, или синхронный против событийно-ориентированного подхода.

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

  • Живая документация
    Когда написано в PlantUML / Structurizr DSL / аналогичных → версионируется в Git, автоматически перегенерируется в CI, всегда актуально.

Как создать отличную диаграмму контейнеров (пошаговое руководство + лучшие практики)

  1. Начните с уровня 1
    Скопируйте людей и внешние программные системы из диаграммы контекста — они станут участниками, взаимодействующими с вашими контейнерами.

  2. Нарисуйте границу системы
    Используйте Граница_системы в PlantUML, чтобы чётко обозначить «внутри нашей системы».

  3. Определите контейнеры
    Задайте вопрос: Что представляет собой отдельно запускаемое/развертываемое программное обеспечение, обеспечивающее функциональность системы?
    Распространённые паттерны:

    • Веб SPA ↔ API-сервер ↔ База данных

    • Мобильное приложение ↔ Сервер для фронтенда (BFF) ↔ Общие сервисы

    • Микросервисы с брокером сообщений

    • Устаревший монолит + новой слой API

  4. Добавьте технологию и краткое описание
    Каждый контейнер должен содержать: имя, технологию, краткое назначение.
    Держите описания менее 15 слов.

  5. Определите взаимодействия (связи)
    Покажите направление + протокол + намерение (например, «JSON/HTTPS», «Читает и записывает в», «Публикует в», «Потребляет из»).
    Используйте глаголы в связях.

  6. Лучшие практики

    • Держите его читаемым — стремитесь к < 10–12 контейнерам. Если больше → создавайте узконаправленные виды (например, «контейнеры подсистемы API»).

    • Будьте последовательны — одинаковое направление компоновки (сверху вниз / слева направо), одинаковый уровень детализации.

    • Используйте иконки/спрайты — добавьте визуальный акцент (PlantUML поддерживает devicons, font-awesome и т.д.).

    • Легенда и ключ — включить автоматическую легенду в PlantUML.

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

    • Версия и хранение как код — коммитить файлы .puml в репозиторий.

    • Адаптация под аудиторию — одна версия для разработчиков (подробная техника), более лёгкая версия для заинтересованных сторон.

Пример PlantUML – Классическая система интернет-банкинга (стиль Big Bank plc)

Вот чистый пример, соответствующий требованиям промышленного использования, с использованием официальной библиотеки C4-PlantUML.

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

' Необязательно: добавить красивые иконки (из спрайтов tupadr3)
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/angular.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/java.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/postgresql.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/android.puml

title Диаграмма контейнеров: Система интернет-банкинга

Person(customer, "Личный клиент интернет-банкинга", "Клиент Big Bank plc")

System_Boundary(c1, "Система интернет-банкинга") {
    Container(spa, "Одностраничное приложение", "JavaScript & Angular", "Предоставляет все функции интернет-банкинга клиентам через их веб-браузер", $sprite="angular")
    Container(mobile, "Мобильное приложение", "Android/iOS (React Native)", "Ограниченные функции интернет-банкинга", $sprite="android")
    Container(api, "Приложение API", "Java & Spring Boot", "Предоставляет функции интернет-банкинга через API", $sprite="java")
    ContainerDb_Ext(db, "Банковская база данных", "PostgreSQL", "Хранит предпочтения пользователей, кэшированные данные, сессии (основные счета/операции остаются на основной ЭВМ)", $sprite="postgresql")
}

System_Ext(core, "Основная банковская система", "Основная ЭВМ – существующая")
System_Ext(email, "Система электронной почты", "Отправляет электронные письма (например, AWS SES)")

Rel(customer, spa, "Использует", "HTTPS")
Rel(customer, mobile, "Использует", "HTTPS")

Rel(spa, api, "Вызывает", "JSON/HTTPS")
Rel(mobile, api, "Вызывает", "JSON/HTTPS")

Rel(api, db, "Читает и записывает в", "JDBC/SQL")
Rel(api, core, "Использует", "JSON/HTTPS")
Rel(api, email, "Отправляет письмо с помощью", "HTTPS")

LAYOUT_WITH_LEGEND()
LAYOUT_TOP_DOWN()

@enduml

Это отображает чистую диаграмму с:

  • Граница системы

  • Метки технологий

  • Спрайты/иконки

  • Чёткие отношения

  • Легенда

Вы можете вставить его непосредственно в онлайн-сервер PlantUML или любой совместимый IDE/редактор.

Используйте эту структуру в качестве шаблона — замените элементы именами вашей собственной системы, технологиями и потоками. Для более продвинутой настройки (темы, пользовательские цвета) ознакомьтесь с примерами C4-PlantUML на GitHub.

Приятного рисования диаграмм — и помните: цель состоит в эффективной коммуникации, а не в совершенстве UML!

Ресурс диаграммы контейнеров C4

Эта статья также доступна на Deutsch, English, Español, فارسی, 日本語 and Portuguese