de_DEen_USes_ESfa_IRfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

一個全面的逐步案例研究：將C4模型應用於網上銀行系統（Big Bank plc）

該C4模型，由西蒙·布朗創建，是一種簡單、層次分明且對開發人員友好的軟件架構視覺化方法。它使用四個抽象層級（因此稱為「C4」）從最高層次的概覽逐步描述到代碼層級的細節：

  1. 系統上下文（第1層）—— 整體視圖：系統及其使用者/外部依賴關係。

  2. 容器（第2層）—— 高層次的技術選擇與責任分工。

  3. 組件（第3層）—— 容器內部的主要邏輯構建模塊。

  4. 代碼（第4層）—— 可選的類級別或代碼結構細節。

它還支援三種額外的圖示類型：

  • 系統地圖

  • 動態

  • 部署

該模型與符號表示無關（可使用任何圖示工具），並著重於清晰性、一致性以及適合目標受眾的細節。它被廣泛採用，因為它能避免產生「一團亂麻」式的架構圖，並能從白板草圖擴展至自動化文檔。

針對此針對性案例研究，我們使用C4官方網站上的標準範例：網上銀行系統，用於虛構的「Big Bank plc」。業務目標是讓個人客戶能夠線上查看帳戶並進行付款，同時與銀行現有的核心系統整合。

我們將逐一走過每一層，包含：

  • 目的與目標受眾

  • 關鍵元素 + 責任

  • 關係

  • 一個即用型的PlantUML C4圖（PlantUML支援C4語法，並在大多數Markdown檢視器中呈現得非常美觀）

  • 設計理由與關鍵決策

  • 此圖表如何協助利害關係人

步驟 1：定義範圍並建立系統上下文圖（第 1 級）

目的：展示新的網上銀行系統如何融入世界。對象：商業利害關係人、非技術人員、新團隊成員。

元素 （來自官方範例）：

  • 個人銀行客戶 （個人）－擁有一个或多個個人銀行帳戶的客戶。

  • 網上銀行系統 （軟體系統）－我們正在建立的新系統。

  • 核心銀行系統 （軟體系統，現有）－處理客戶資料、帳戶與交易的大型主機。

  • 電子郵件系統 （軟體系統，外部）－用於發送確認訊息的亞馬遜網路服務簡單電子郵件服務（AWS SES）。

關係:

  • 客戶 → 使用 → 網上銀行系統（用於檢視帳戶與付款）

  • 網上銀行系統 → 使用 → 核心銀行系統（用於帳戶資料與付款）

  • 網上銀行系統 → 透過 → 電子郵件系統發送郵件

這裡是 PlantUML C4 上下文圖:

@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

設計理由與價值：這張單一圖表能立即回答「我們正在建構什麼，以及它與誰互動？」透過明確標示外部依賴關係，可防止範圍蔓延。商業利害關係人喜愛此圖，因為目前尚未涉及任何技術細節。

步驟 2：容器圖（第 2 級）

目的：深入探討網上銀行系統，展示主要可部署／可執行單元（容器）及其技術選擇。對象：架構師、資深開發人員、運營人員。

網上銀行系統內的容器:

  • 單頁面應用程式 (網頁瀏覽器 – JavaScript + Angular) – 完整的網上銀行使用者介面。

  • 行動應用程式 (行動裝置 – iOS/Android 原生或 React Native) – 用於行動使用的有限功能。

  • API 應用程式 (伺服器端 – Java + Spring Boot) – 由兩端前端使用的 JSON/HTTPS API。

  • 資料庫 (關聯式資料庫 – PostgreSQL) – 儲存會話資料、使用者偏好設定、快取的帳戶摘要（核心資料仍保留在主機系統中）。

關鍵關係 (與第 1 級相同的外部系統)：

  • SPA 與行動應用程式 → 呼叫 → API 應用程式

  • API 應用程式 ↔ 資料庫

  • API 應用程式 → 核心銀行系統與電子郵件系統

PlantUML C4 容器圖:

@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()

標題：網上銀行系統的 C4 容器圖

人員(客戶, “個人銀行客戶”, “擁有一個或多個個人銀行帳戶的客戶。”)

系統邊界(網上銀行系統, “網上銀行系統”, “用於檢視帳戶及進行付款的新系統。”) {
容器(spa, “單頁面應用程式”, “JavaScript + Angular”, “完整的網上銀行使用者介面”, $sprite=”angular”)
容器(行動應用程式, “行動應用程式”, “iOS/Android (React Native)”, “用於行動使用的有限功能”, $sprite=”react”)
容器(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

設計理由: 我們選擇為網頁使用現代化的 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 and 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 層）－可選

目的：展示單一組件的內部結構（類圖、序列圖等）。對象：正在開發該程式碼的開發人員。

以下為 驗證控制器組件 – 使用 PlantUML 繪製的簡單 UML 類圖：

@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

標題：檢視帳戶摘要的動態圖表

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

標題：網上銀行系統的部署圖

部署節點(aws, “亞馬遜網路服務”, “雲端”) {
部署節點(ec2, “EC2 自動擴展群組”, “Linux”) {
容器(api, “API 應用程式”, “Java Spring Boot”)
}
部署節點(rds, “RDS”, “PostgreSQL”) {
資料庫容器(db, “資料庫”)
}
}

部署節點(customerDevice, “客戶裝置”, “網頁/行動裝置”) {
容器(spa, “單頁面應用程式”)
容器(mobile, “行動應用程式”)
}

外部系統(coreBanking, “核心銀行系統（本地主機）”)

關聯(spa, api, “發出 API 呼叫至”, “HTTPS”)
關聯(mobile, api, “發出 API 呼叫至”, “HTTPS”)
關聯_U(api, spa, “傳送到客戶的網頁瀏覽器”)
關聯_U(api, mobile, “傳送到行動應用程式”)

顯示圖例()
@enduml

如何在實務中應用此案例研究

  1. 從工作坊開始：在白板上繪製上下文圖。

  2. 使用 PlantUML C4 迭代至容器與組件。

  3. 將圖表保留在程式碼倉儲中（作為程式碼！），以確保其保持最新。

  4. 自動產生活文件。

這個完整的網際銀行系統範例是由西蒙·布朗所創建的官方參考，全球數以千計的組織都在使用。透過遵循這些步驟，您現在已擁有完整的、可投入生產的架構描述，無論是執行長還是新任初級工程師，都能在恰當的細節層級上理解。

C4圖示文章