一个全面的分步案例研究：将C4模型应用于互联网银行系统（Big Bank plc）

@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, "邮件系统", "用于发送确认邮件的亚马逊网络服务简单邮件服务（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

@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", "由两个前端共同使用的 JSON/HTTPS API", $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")

' 布局提示（可选 – 帮助 PlantUML 更好地排列元素）
Lay_D(customer, internet_banking_system)
Lay_D(internet_banking_system, core_banking_system)
Lay_U(email_system, internet_banking_system)

@enduml

@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

@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

@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, "亚马逊网络服务", "云") {
Deployment_Node(ec2, "EC2 自动伸缩组", "Linux") {
Container(api, "API 应用", "Java Spring Boot")
}
Deployment_Node(rds, "RDS", "PostgreSQL") {
ContainerDb(db, "数据库")
}
}

Deployment_Node(customerDevice, "客户设备", "Web/移动") {
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