de_DEen_USes_ESfa_IRfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

Комплексное пошаговое исследование случая: применение модели C4 к системе интернет-банкинга (Big Bank plc)

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

  1. Контекст системы (Уровень 1) – Общая картина: система и ее пользователи/внешние зависимости.
  2. Контейнеры (Уровень 2) – Высокий уровень выбора технологий и ответственности.
  3. Компоненты (Уровень 3) – Основные логические блоки внутри контейнера.
  4. Код (Уровень 4) – Дополнительные детали на уровне классов или структуры кода.

Она поддерживается тремя дополнительными типами диаграмм:

  • Ландшафт системы
  • Динамическая
  • Развертывание

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

Для этого целевого исследования случая, мы используем канонический пример с официального сайта C4: Система интернет-банкинга для вымышленного «Big Bank plc». Бизнес-цель заключается в том, чтобы позволить частным клиентам просматривать свои счета и совершать платежи в режиме онлайн, при этом интегрируясь с существующими основными системами банка.

Мы пройдемся по каждому уровню с:

  • Цель и аудитория
  • Ключевые элементы + ответственность
  • Связи
  • Готовая к использованию диаграмма C4 PlantUML (PlantUML поддерживает синтаксис C4 и красиво отображается в большинстве просмотров Markdown)
  • Обоснование и ключевые решения
  • Как диаграмма помогает заинтересованным сторонам

Шаг 1: Определите охват и создайте диаграмму контекста системы (уровень 1)

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

Элементы (из официального примера):

  • Клиент личного банковского обслуживания (Человек) – Клиент с одним или несколькими личными банковскими счетами.
  • Система интернет-банкинга (Программная система) – Новая система, которую мы создаем.
  • Основная банковская система (Программная система, существующая) – Мейнфрейм, обрабатывающий данные клиентов, счета и транзакции.
  • Система электронной почты (Программная система, внешняя) – Услуга простой электронной почты Amazon Web Services (AWS SES) для отправки подтверждений.

Связи:

  • Клиент → использует → Система интернет-банкинга (для просмотра счетов и совершения платежей)
  • Система интернет-банкинга → использует → Основная банковская система (для данных счетов и платежей)
  • Система интернет-банкинга → отправляет электронную почту через → Система электронной почты

Вот Диаграмма контекста C4 PlantUML:

PlantUML


Редактировать PlantUML в VPasCode
Plantuml Edit Plantuml in VPasCode 

@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, "Отправляет электронную почту через")

Lay_D(customer, internet_banking_system)
Lay_D(internet_banking_system, core_banking_system)
Lay_U(email_system, internet_banking_system)
@enduml
Edit Plantuml in VPasCode



Редактировать PlantUML в VPasCode

Обоснование и ценность: Эта одна диаграмма сразу отвечает на вопрос «Что мы строим и с кем это взаимодействует?». Она предотвращает расширение границ проекта, явно показывая внешние зависимости. Бизнес-заинтересованные стороны любят её, потому что ещё нет деталей технологий.

Шаг 2: Диаграмма контейнеров (уровень 2)

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

Контейнеры внутри системы интернет-банкинга:

  • Одностраничное приложение (Веб-браузер – JavaScript + Angular) – Полный интерфейс интернет-банкинга.
  • Мобильное приложение (Мобильное устройство – нативные приложения iOS/Android или React Native) – Ограниченная функциональность для использования в дороге.
  • Приложение API (Серверная часть – Java + Spring Boot) – API JSON/HTTPS, используемое обоими фронтендами.
  • База данных (Реляционная БД – PostgreSQL) – Хранит данные сессий, предпочтения пользователей, кэшированные сводки по счетам (основные данные остаются в основной мейнфрейме).

Ключевые отношения (те же внешние системы, что и на уровне 1):

  • SPA и мобильное приложение → вызов → Приложение API
  • Приложение API ↔ База данных
  • Приложение API → Система основного банкинга и Система электронной почты

Диаграмма контейнеров C4 PlantUML:

PlantUML


Редактировать PlantUML в VPasCode
Plantuml Edit Plantuml in VPasCode 

@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, "Система электронной почты", "Услуга простой электронной почты Amazon Web Services (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")

' Подсказки по компоновке (необязательно – помогает PlantUML лучше размещать элементы)
Lay_D(customer, internet_banking_system)
Lay_D(internet_banking_system, core_banking_system)
Lay_U(email_system, internet_banking_system)

@enduml
Edit Plantuml in VPasCode



Редактировать PlantUML в VPasCode

Обоснование: Мы выбрали современный шаблон SPA + API-бэкенд для веба, нативное мобильное приложение для производительности и сохранили базу данных легкой (большая часть данных находится в унаследованном мейнфрейме). Эта диаграмма является единственным источником истины для высокого уровня решений по технологиям и помогает DevOps планировать инфраструктуру.

Шаг 3: Диаграмма компонентов (уровень 3)

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

Пример: Компоненты внутри приложения API:

  • Контроллер учетных записей (Spring MVC)
  • Контроллер аутентификации
  • Контроллер сброса пароля
  • Компонент безопасности (обслуживает аутентификацию, JWT и т.д.)
  • Компонент управления счетами (оркестрирует вызовы к основной банковской системе)
  • Компонент уведомлений по электронной почте

Диаграмма компонентов C4 PlantUML (с фокусом на приложение API):

PlantUML


Редактировать PlantUML в VPasCode
Plantuml Edit Plantuml in VPasCode 

@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, "Мобильное приложение", "Xamarin", "Предоставляет ограниченный набор функций интернет-банкинга клиентам через их мобильное устройство.")
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", "Обрабатывает аутентификацию, генерацию JWT-токенов и хеширование паролей.")
    Component(accountmgmt, "Компонент управления счетами", "Spring Bean", "Оркестрирует вызовы к основной банковской системе для операций со счетами.")
    Component(email, "Компонент уведомлений по электронной почте", "Spring Bean", "Отправляет письма для сброса пароля и подтверждения учетной записи через SMTP.")

    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
Edit Plantuml in VPasCode



Редактировать PlantUML в VPasCode

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

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

Цель: Показать внутреннюю структуру одного компонента (диаграмма классов, последовательность и т.д.). Аудитория: разработчики, работающие над этим кодом.

Пример для компонентаКонтроллер аутентификации – простая диаграмма классов UML в PlantUML:

PlantUML


Редактировать PlantUML в VPasCode
Plantuml Edit Plantuml in VPasCode 

@startuml
classDiagram

skinparam {
roundcorner 8
ArrowColor #444444
ArrowFontColor #444444
BorderColor #444444

Class {
BorderColor #1A237E
BackgroundColor #E8EAF6
FontColor #1A237E
}
}

class "AuthenticationController" {
+login(credentials)
+refreshToken()
}

class "JwtTokenProvider" {
+generateToken(user)
+validateToken(token)
}

class "UserRepository" {
+findByUsername()
}

AuthenticationController ..> JwtTokenProvider : "использует"
AuthenticationController ..> UserRepository : "использует"
@enduml
Edit Plantuml in VPasCode



Редактировать PlantUML в VPasCode

На реальных проектах вы часто пропускаете уровень 4 и вместо этого ссылаетесь на фактический исходный код.

Шаг 5: Вспомогательные диаграммы

Динамическая диаграмма (пример: поток «Просмотр сводки по счету»)

PlantUML


Редактировать PlantUML в VPasCode
Plantuml Edit Plantuml in VPasCode 

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml

title Динамическая диаграмма для просмотра сводки по счетам

Person(customer, "Клиент личного банковского обслуживания") {
Container(spa, "Одностраничное приложение") {
Container(api, "Приложение API") {
ContainerDb(db, "База данных") {
System_Ext(coreBanking, "Основная банковская система")
}
}
}
}

Rel(customer, spa, "1. Нажимает 'Счета'", "")
Rel(spa, api, "2. GET /accounts", "JSON/HTTPS")
Rel(api, db, "3. Читает кэшированную сводку", "")
Rel(api, coreBanking, "4. Получает последние данные", "")
Rel(api, spa, "5. Возвращает JSON", "")

SHOW_LEGEND()
@enduml
Edit Plantuml in VPasCode



Редактировать PlantUML в VPasCode

Диаграмма развертывания (высокоуровневая физическая схема):

PlantUML


Редактировать PlantUML в VPasCode
Plantuml Edit Plantuml in VPasCode 

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml

title Диаграмма развертывания для интернет-банкинга

Deployment_Node(aws, "Amazon Web Services", "Облако") {
Deployment_Node(ec2, "Группа автоматического масштабирования EC2", "Linux") {
Container(api, "Приложение API", "Java Spring Boot")
}
Deployment_Node(rds, "RDS", "PostgreSQL") {
ContainerDb(db, "База данных")
}
}

Deployment_Node(customerDevice, "Устройство клиента", "Веб/Мобильное приложение") {
Container(spa, "Одностраничное приложение")
Container(mobile, "Мобильное приложение")
}

System_Ext(coreBanking, "Основная банковская система (локальный мейнфрейм)")

Rel(spa, api, "Выполняет вызовы API к", "HTTPS")
Rel(mobile, api, "Выполняет вызовы API к", "HTTPS")
Rel_U(api, spa, "Доставляет в веб-браузер клиента")
Rel_U(api, mobile, "Доставляет в мобильное приложение")

SHOW_LEGEND()
@enduml
Edit Plantuml in VPasCode



Редактировать PlantUML в VPasCode

Как использовать этот кейс-стади на практике

  1. Начните с рабочего совещания: нарисуйте контекст на доске.
  2. Переходите к контейнерам и компонентам с использованием PlantUML C4.
  3. Храните диаграммы в репозитории кода (как код!) чтобы они оставались актуальными.
  4. Автоматически генерируйте живую документацию.

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

Статьи о диаграммах C4

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