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:

@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

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

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

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

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

  • Одностраничное приложение (Веб-браузер – JavaScript + Angular) – Полный интерфейс интернет-банкинга.

  • Мобильное приложение (Мобильное устройство – нативные приложения iOS/Android или React Native) – Ограниченные функции для использования в дороге.

  • Приложение API (Серверная часть – Java + Spring Boot) – API JSON/HTTPS, используемое обоими клиентскими приложениями.

  • База данных (Реляционная база данных – PostgreSQL) – Хранит данные сессий, предпочтения пользователей, кэшированные сводки по счетам (основные данные остаются на основной платформе).

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

  • SPA и мобильное приложение → вызов → Приложение API

  • Приложение API ↔ База данных

  • Приложение API → Основная банковская система и система электронной почты

Диаграмма контейнеров C4 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, “Система электронной почты”, “Услуга простой электронной почты 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

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

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

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

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

  • Контроллер счетов (Spring MVC)

  • Контроллер аутентификации

  • Контроллер сброса пароля

  • Компонент безопасности (обслуживает аутентификацию, JWT и т.д.)

  • Компонент управления счетами (оркестрирует вызовы к основной банковской системе)

  • Компонент уведомлений по электронной почте

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

@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


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

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

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

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

@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 : “uses”
AuthenticationController ..> UserRepository : “uses”
@enduml


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

Шаг 5: Диаграммы поддержки

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

@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

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

@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

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

  1. Начните с рабочего совещания: нарисуйте контекст на доске.

  2. Итерируйтесь к контейнерам и компонентам с использованием PlantUML C4.

  3. Храните диаграммы в репозитории кода (как код!) чтобы они оставались актуальными.

  4. Автоматически генерируйте живую документацию.

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

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

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