c4-model

Context -> Container -> Component -> Code

Context

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

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

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

Person(personAlias, "Personal Banking Customer", "A customer of the bank, with personal bank accounts")

System(bankingSystem, "Internet Banking System", "Allow customers ti view information")

System_Ext(email, "E-mail System", "The internal Microsoft Exchange e-mail system")
System_Ext(mainframe, "Mainframe Banking System", "Stores all of the core banking information about customers")

Rel(personAlias, bankingSystem, "Uses")

Rel(bankingSystem, mainframe, "Uses")
Rel(bankingSystem, email, "Send e-mail using", "SMTP")

Rel(email, bankingSystem, "Sends e-mail to")
@enduml

Container

Масштабируется в программную систему и показывает контейнеры

приложения
хранилища данных
микросервисы
т. Д. составляющие эту программную систему.

Технологические решения также являются ключевой частью этой диаграммы.

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

Веб-приложение представляет собой веб-приложение Java/Spring MVC, которое просто обслуживает статический контент (HTML, CSS и JavaScript), включая контент, составляющий одностраничное приложение. Одностраничное приложение-это угловое приложение, которое работает в веб-браузере клиента и предоставляет все функции интернет-банкинга. Кроме того, клиенты могут использовать кроссплатформенное мобильное приложение Xamarin для доступа к подмножеству функций интернет-банкинга. Как одностраничное приложение, так и мобильное приложение используют API JSON/HTTPS, который предоставляет другое приложение Java/Spring MVC, работающее на стороне сервера.

Приложение API также взаимодействует с существующей банковской системой мэйнфреймов, используя собственный интерфейс XML/HTTPS, чтобы получать информацию о банковских счетах или совершать транзакции. Приложение API также использует существующую систему электронной почты, если ему необходимо отправлять электронную почту клиентам.

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

LAYOUT_WITH_LEGEND()

Person(customer, "Personal Banking Customer", "A customer of the bank")

System_Boundary(sb, "Internet Banking System"){
    Container(webApp, "Web Application", "Java and Spring MVC", "Delivers the static content")
    Container(spa, "Single Page Application", "JavaScript and Angular", "Providersall of the internet banking functionality")
    Container(ma, "Mobile App", "Xamarin", "Mobile device")
    ContainerDb(db, "Database", "Relation database Schema", "Stores users")
    Container(api, "Api Application", "Java and Spring MVC", "Providing functionality")
}

System_Ext(email, "E-mail System", "Description")
System_Ext(mn, "Mainframe Banking", "Description")

Rel(webApp, spa, "Delivers")

Rel(customer, webApp, "Uses", "HTTPS")
Rel(customer, spa, "Uses")
Rel(customer, ma, "Uses")

Rel(spa, api, "Uses", "JSON/HTTPS")
Rel(ma, api, "Uses", "JSON/HTTPS")

Rel(api, db, "Reads from and writes to", "JDBC")

Rel(api, email, "Sends e-mail using", "SMTP")
Rel(api, mn, "Uses", "XML/HTTPS")
@enduml

Component

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

//TODO

Code