一個全面的逐步案例研究：將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, "電子郵件系統", "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

@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, "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