PlantUML — C4 Container view
C4 Container-level view — portable PlantUML with C4-style colour scheme.
Rendering…
Make it your own.
@startuml
!theme plain
skinparam backgroundColor transparent
skinparam linetype ortho
skinparam actor {
BackgroundColor #08427b
BorderColor #052e56
FontColor white
}
skinparam component {
BackgroundColor #1168bd
BorderColor #0b4884
FontColor white
}
skinparam database {
BackgroundColor #1168bd
BorderColor #0b4884
FontColor white
}
skinparam rectangle<<ext>> {
BackgroundColor #999999
BorderColor #6b6b6b
FontColor white
}
title Internet Banking — Container view
actor "Customer" as customer
rectangle "Internet Banking" {
component "Web App\n[Java / Spring MVC]" as web
component "Single Page App\n[TypeScript / React]" as spa
component "API Application\n[Java / Spring Boot]" as api
database "Database\n[Oracle]" as db
}
rectangle "E-mail System" as mail <<ext>>
rectangle "Mainframe Banking" as mainframe <<ext>>
customer --> web : Visits [HTTPS]
customer --> spa : Uses [HTTPS]
web --> spa : Delivers
spa --> api : Calls [JSON/HTTPS]
api --> db : Reads + writes [JDBC]
api --> mainframe : Uses [XML/HTTPS]
api --> mail : Sends [SMTP]
@enduml