de_DEen_USes_ESfa_IRfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

The модель C4, разработанная Саймоном Брауном, — это мощный иерархический подход к визуализации архитектуры программного обеспечения. Она использует четыре уровня абстракции, чтобы обеспечить нужный уровень детализации для разных аудиторий — от бизнес-заинтересованных сторон до разработчиков. Это делает её идеальной для создания понятной, поддерживаемой и ориентированной на аудиторию документации.

Introduction to C4 Model: a Quick Guide - Visual Paradigm Blog

Этот всесторонний гид основан на хорошо известном кейсе системы интернет-банкинга Big Bank plc — вымышленный, но реалистичный пример создания платформы онлайн-банкинга для частных клиентов, чтобы просматривать счета и совершать платежи. Кейс демонстрирует, как постепенно применять модель C4, используя PlantUML для «архитектуры как кода». В ней также используются современные инструменты, такие как AI-модуль C4 PlantUML Studio от Visual Paradigm (выпущенный в конце 2025 года), чтобы ускорить создание и поддержку.

Обзор модели C4

Модель включает четыре уровня:

  1. Уровень 1: Контекст системы — Общая картина: система, пользователи и внешние зависимости.

  2. Уровень 2: Контейнеры — Основные развертываемые единицы (приложения, сервисы, базы данных) и выбор высокого уровня технологий.

  3. Уровень 3: Компоненты — Внутренние логические блоки внутри контейнера.

  4. Уровень 4: Код — Необязательные детали низкого уровня (например, классы); часто пропускаются в пользу ссылок на исходный код.

Дополнительные поддерживающие представления включают динамические (потоки во время выполнения) и диаграммы развертывания.

Применение модели C4: кейс по системе интернет-банкинга Big Bank plc

Уровень 1: Диаграмма контекста системы

Цель: Предоставить высокий уровень обзора для бизнес-заинтересованных сторон и непрофессионалов, показывая, как система интернет-банкинга вписывается в более широкую среду без использования технической терминологии.

Ключевые элементы:

  • Человек: Клиент личного банкинга — клиент с одним или несколькими личными банковскими счетами.

  • Программная система: Система интернет-банкинга — позволяет клиентам просматривать информацию о счетах и совершать платежи.

  • Внешние системы:

    • Основная банковская система (существующий мейнфрейм) — обрабатывает данные клиентов, счета и транзакции.

    • Система электронной почты (например, AWS SES) — отправляет подтверждения и уведомления.

Связи:

  • Клиентиспользуетсистему интернет-банкинга.

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

  • Система интернет-банкингаотправляет электронную почту черезсистему электронной почты.

Этот уровень делает всё простым и явным в отношении охвата и интеграций.

Пример PlantUML (адаптировано из кейса):

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

title Диаграмма контекста системы (уровень 1) для системы интернет-банкинга
Person(customer, "Клиент личного банкинга", "Клиент с одним или несколькими личными банковскими счетами.")
System(internet_banking_system, "Система интернет-банкинга", "Позволяет клиентам просматривать счета и совершать платежи.")
System(core_banking_system, "Основная банковская система", "Существующий мейнфрейм, обрабатывающий данные клиентов, счета и транзакции.")
System_Ext(email_system, "Система электронной почты", "Служба простой электронной почты Amazon Web Services (AWS SES) для отправки подтверждений.")
Rel(customer, internet_banking_system, "Использует")
Rel(internet_banking_system, core_banking_system, "Использует")
Rel(internet_banking_system, email_system, "Отправляет электронную почту через")
@enduml

Уровень 2: Диаграмма контейнеров

Цель: Приблизиться, чтобы показать основные элементы (контейнеры) и выбор технологий, ориентированный на архитекторов, разработчиков и команд DevOps.

Ключевые элементы (внутри границы системы интернет-банкинга):

  • Одностраничное приложение (SPA) — JavaScript + Angular, полный интерфейс в веб-браузере.

  • Мобильное приложение — iOS/Android с React Native (или аналогичным), ограниченная функциональность.

  • Приложение API — Java + Spring Boot, API JSON/HTTPS, обслуживающее оба фронтенда.

  • База данных — PostgreSQL, хранит данные сессий, настройки и кэшированные резюме (основные данные остаются в основной системе).

Внешние — Система основного банкинга и система электронной почты.

Связи:

  • Клиент использует SPA и мобильное приложение через HTTPS.

  • SPA и мобильное приложение вызывают приложение API (JSON/HTTPS).

  • Приложение API читает/записывает в базу данных (JDBC/SQL).

  • Приложение API взаимодействует с системой основного банкинга (JSON/HTTPS) и системой электронной почты (HTTPS).

Этот диаграмма служит «единственным источником истины» для решений по технологии.

Пример PlantUML (использует спрайты для иконок):

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!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
LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()
title Диаграмма контейнеров C4 для системы интернет-банкинга
Person(customer, "Клиент личного банкинга", "Клиент с одним или несколькими личными банковскими счетами.")
System_Boundary(internet_banking_system, "Система интернет-банкинга") {
    Container(spa, "Одностраничное приложение", "JavaScript + Angular", "Полный интерфейс интернет-банкинга", $sprite="angular")
    Container(mobile_app, "Мобильное приложение", "iOS/Android (React Native)", "Ограниченная функциональность", $sprite="react")
    Container(api_app, "Приложение API", "Java + Spring Boot", "API JSON/HTTPS", $sprite="java")
    ContainerDb(database, "База данных", "PostgreSQL", "Данные сессий, настройки, кэшированные резюме", $sprite="postgresql")
}
System(core_banking_system, "Система основного банкинга", "Существующая основная система...")
System_Ext(email_system, "Система электронной почты", "AWS SES...")
Rel(customer, spa, "Использует", "HTTPS")
Rel(customer, mobile_app, "Использует", "HTTPS")
Rel(spa, api_app, "Вызывает", "JSON/HTTPS")
Rel(mobile_app, api_app, "Вызывает", "JSON/HTTPS")
Rel(api_app, database, "Читает и записывает в", "JDBC/SQL")
Rel(api_app, core_banking_system, "Запросы / Обновления", "JSON/HTTPS")
Rel(api_app, email_system, "Отправляет электронную почту через", "HTTPS")
@enduml

Уровень 3: Диаграмма компонентов

Цель: Подробно описывает внутреннюю структуру ключевого контейнера (здесь — приложения API) для команд разработки.

Ключевые компоненты (внутри приложения API):

  • Контроллер счетов (Spring MVC) — Предоставляет сводки и балансы.

  • Контроллер аутентификации (Spring MVC) — Вход, сессии, токены.

  • Контроллер сброса пароля (Spring MVC) — Сброс пароля через электронную почту.

  • Компонент безопасности (Spring Bean) — Аутентификация, JWT, хеширование.

  • Компонент управления счетами (Spring Bean) — Организует вызовы системы основного банкинга.

  • Компонент уведомлений по электронной почте (Spring Bean) — Отправляет электронные письма.

Взаимодействия — Контроллеры используют безопасность; управление счетами использует систему основного банкинга; электронная почта использует базу данных; фронтенды вызывают контроллеры.

Пример PlantUML:

PlantUML Diagram

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
LAYOUT_WITH_LEGEND()
title Диаграмма компонентов для системы интернет-банкинга — приложение API
Container(spa, "Одностраничное приложение", "javascript и angular", "...")
Container(ma, "Мобильное приложение", "...", "...")
ContainerDb(db, "База данных", "...", "...")
System_Ext(mbs, "Основная банковская система", "...")
Container_Boundary(api, "Приложение API") {
    Component(accounts, "Контроллер учетных записей", "Spring MVC", "...")
    Component(auth, "Контроллер аутентификации", "Spring MVC", "...")
    Component(reset, "Контроллер сброса пароля", "Spring MVC", "...")
    Component(security, "Компонент безопасности", "Spring Bean", "...")
    Component(accountmgmt, "Компонент управления учетными записями", "Spring Bean", "...")
    Component(email, "Компонент уведомлений по электронной почте", "Spring Bean", "...")
    Rel(accounts, security, "Использует")
    Rel(auth, security, "Использует")
    Rel(reset, security, "Использует")
    Rel(accountmgmt, mbs, "Использует", "XML/HTTPS")
    Rel(email, db, "Читает", "JDBC")
}
Rel(spa, accounts, "Использует", "JSON/HTTPS")
Rel(spa, auth, "Использует", "JSON/HTTPS")
Rel(spa, reset, "Использует", "JSON/HTTPS")
Rel(ma, accounts, "Использует", "JSON/HTTPS")
Rel(ma, auth, "Использует", "JSON/HTTPS")
Rel(ma, reset, "Использует", "JSON/HTTPS")
@enduml

Уровень 4: Диаграмма кода (необязательно)

Цель: Показать детали на уровне классов для конкретных областей (например, аутентификация).

Часто опускается — вместо этого указывается на исходный код.

Пример — Диаграмма классов UML для аутентификации:

  • AuthenticationController использует JwtTokenProvider и UserRepository.

Пример PlantUML:

@startuml
classDiagram
class "AuthenticationController" {
    +login(credentials)
    +refreshToken()
}
class "JwtTokenProvider" {
    +generateToken(user)
    +validateToken(token)
}
class "UserRepository" {
    +findByUsername()
}
AuthenticationController ..> JwtTokenProvider : "использует"
AuthenticationController ..> UserRepository : "использует"
@enduml

Дополнительные представления

  • Динамическая диаграмма (например, последовательность «Просмотр сводки по счету»): Клиент → SPA → API → База данных/Банковская система → Ответ.

  • Диаграмма развертывания: Сопоставляет контейнеры с инфраструктурой (например, AWS EC2 для API, RDS для базы данных, локальная основная система).

Использование инструментов Visual Paradigm с искусственным интеллектом

Инструменты Visual Paradigm AI-платформа C4 PlantUML Studio (выпуск в конце 2025 года) революционизирует этот процесс:

  • Ввод естественного языка (например, «Создать модель C4 для системы интернет-банкинга с SPA, мобильным приложением, API Spring Boot, PostgreSQL и интеграцией с основной системой»).

  • ИИ генерирует код PlantUML и диаграммы для всех уровней.

  • Используйте чат-бота ИИ для итераций (например, «Добавить MFA в компонент аутентификации» или «Создать представление развертывания на AWS»).

  • Поддерживайте согласованность между уровнями и обеспечивайте «живую документацию».

  • Экспортируйте, версионируйте и интегрируйте с репозиториями.

Этот инструмент обеспечивает структурированный, соответствующий стандарту C4 вывод, который гораздо надежнее, чем у общих ИИ.

Наилучшие практики

  1. Начните с рабочих встреч — Используйте доски для уровня 1, чтобы согласовать заинтересованные стороны.

  2. Рассматривайте архитектуру как код — Храните файлы PlantUML в вашем репозитории для автоматического обновления при изменениях кода.

  3. Автоматизируйте с помощью ИИ — Используйте Visual Paradigm для быстрого создания и улучшения диаграмм.

  4. Фокус на аудиторию — Исключите технические детали на уровне 1; добавляйте их постепенно.

  5. Держите всё лёгким — Подробно описывайте сложные контейнеры только на уровне 3; пропускайте уровень 4, если это не обязательно.

  6. Развивайте документацию — Делайте диаграммы «живыми», чтобы избежать устаревших артефактов.

Кейс-стади «Big Bank plc» по-прежнему является каноническим примером эффективности модели C4 в реальных сценариях, способствующей ясности, сотрудничеству и масштабируемой коммуникации архитектуры. Подробнее см. на официальном сайте C4 или инструментах ИИ Visual Paradigm.

Эта статья также доступна на Deutsch, English, Español, فارسی, Français, English, Bahasa Indonesia, 日本語, Polski, Portuguese, Việt Nam, 简体中文 and 繁體中文