- IT 觀察者隨筆 - 資訊科技博客

該 C4模型由西蒙·布朗開發的C4模型，是一種強大的層次化方法，用於可視化軟體架構。它利用四個抽象層級，為不同受眾（從商業利益相關者到開發人員）提供恰當的細節層級。這使得它非常適合用於建立清晰、可維護且針對受眾的文件。

Introduction to C4 Model: a Quick Guide - Visual Paradigm Blog

本全面指南源自著名的案例研究： Big Bank plc的網上銀行系統——一個虛構但真實的範例，展示如何為個人客戶建立網上銀行平台，以檢視帳戶並進行付款。該案例研究展示了如何逐步應用C4模型，並使用 PlantUML 來實現「架構即程式碼」。它還整合了現代工具，例如 Visual Paradigm的AI驅動C4 PlantUML工作室 （於2025年底發布），以加速建立與維護。

C4模型概覽

該模型包含四個層級：

第一層：系統脈絡——整體視圖：系統、使用者與外部依賴。
第二層：容器——主要可部署單元（應用程式、服務、資料庫）與高階技術選擇。
第三層：組件——容器內部的內部邏輯構建模組。
第四層：程式碼——可選的低階細節（例如類別）；通常會跳過，改以原始碼參考為主。

額外的支援視圖包括動態（執行時流程）與部署圖。

應用C4模型：Big Bank plc網上銀行系統案例研究

第一層：系統脈絡圖

目的：為商業利益相關者與非技術受眾提供高階概覽，展示網上銀行系統如何融入更廣泛的環境，且不使用技術術語。

關鍵元素:

人物：個人銀行客戶——擁有一个或多個個人銀行帳戶的客戶。
軟體系統：網上銀行系統 — 允許客戶查看帳戶資訊並進行付款。
外部系統:
- 核心銀行系統（現有大型主機）— 處理客戶資料、帳戶及交易。
- 電子郵件系統（例如：AWS SES）— 發送確認訊息與通知。

關係:

客戶使用網上銀行系統。
網上銀行系統使用核心銀行系統進行資料與交易。
網上銀行系統透過電子郵件系統發送郵件。

此層級使內容保持簡潔，並明確說明範圍與整合。

PlantUML 範例（根據案例研究調整）：

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

title 系統上下文圖（第1層）：網上銀行系統
Person(客戶, "個人銀行客戶", "擁有一個或多個個人銀行帳戶的客戶。")
System(網上銀行系統, "網上銀行系統", "允許客戶查看帳戶並進行付款。")
System(核心銀行系統, "核心銀行系統", "現有的大型主機，負責處理客戶資料、帳戶及交易。")
System_Ext(電子郵件系統, "電子郵件系統", "Amazon Web Services 簡易電子郵件服務（AWS SES），用於發送確認訊息。")
Rel(客戶, 網上銀行系統, "使用")
Rel(網上銀行系統, 核心銀行系統, "使用")
Rel(網上銀行系統, 電子郵件系統, "透過發送郵件")
@enduml

第2層：容器圖

目的：深入展示主要構建模塊（容器）與技術選擇，專為架構師、開發人員及DevOps團隊設計。

關鍵元素（位於網上銀行系統邊界內）：

單頁面應用程式（SPA）— JavaScript + Angular，完整使用者介面在瀏覽器中執行。
行動應用程式— 使用 React Native（或類似技術）於 iOS/Android 平台，功能有限。
API 應用程式 — Java + Spring Boot，JSON/HTTPS API，同時支援前端與行動應用程式。
資料庫 — PostgreSQL，儲存會話資料、偏好設定與快取摘要（核心資料仍保留在主機系統中）。

外部系統 — 核心銀行系統與電子郵件系統。

關係:

客戶透過 HTTPS 使用 SPA 與行動應用程式。
SPA 與行動應用程式呼叫 API 應用程式（JSON/HTTPS）。
API 應用程式讀取/寫入資料庫（JDBC/SQL）。
API 應用程式與核心銀行系統（JSON/HTTPS）及電子郵件系統（HTTPS）進行互動。

此圖表作為技術決策的「唯一真實來源」。

PlantUML 範例 （使用圖示精灵）：

@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")
@enduml

第三層：元件圖

目的：為開發團隊詳細說明關鍵容器（在此為 API 應用程式）的內部結構。

主要元件 （位於 API 應用程式內部）：

帳戶控制器（Spring MVC）— 提供帳戶摘要與餘額資訊。
驗證控制器（Spring MVC）— 登入、會話與權杖。
重設密碼控制器（Spring MVC）— 透過電子郵件重設密碼。
安全元件（Spring Bean）— 驗證、JWT 與雜湊運算。
帳戶管理元件（Spring Bean）— 協調核心銀行系統的呼叫。
電子郵件通知元件（Spring Bean）— 發送電子郵件。

互動 — 控制器使用安全元件；帳戶管理使用核心銀行系統；電子郵件使用資料庫；前端呼叫控制器。

PlantUML 範例:

PlantUML Diagram

@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, "行動應用程式", "...", "...")
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", "...")
    Component(accountmgmt, "帳戶管理元件", "Spring Bean", "...")
    Component(email, "電子郵件通知元件", "Spring Bean", "...")
    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層：程式碼圖（可選）

目的顯示特定區域（例如：驗證）的類別層級細節。

通常省略——改為指向原始碼。

範例 — 驗證的 UML 類別圖：

AuthenticationController 使用 JwtTokenProvider 和 UserRepository。

PlantUML 範例:

@startuml
classDiagram
class "AuthenticationController" {
    +login(credentials)
    +refreshToken()
}
class "JwtTokenProvider" {
    +generateToken(user)
    +validateToken(token)
}
class "UserRepository" {
    +findByUsername()
}
AuthenticationController ..> JwtTokenProvider : "使用"
AuthenticationController ..> UserRepository : "使用"
@enduml

支援視圖

動態圖 （例如：「檢視帳戶摘要」序列）：客戶 → SPA → API → 資料庫/核心銀行系統 → 回應。
部署圖將容器對應至基礎設施（例如：API 使用 AWS EC2，資料庫使用 RDS，內部主機系統）。

利用 Visual Paradigm 的 AI 驅動工具

Visual Paradigm 的 AI 驅動的 C4 PlantUML Studio （預計 2025 年底推出）徹底改變此流程：

輸入自然語言（例如：「為一個包含 SPA、行動應用程式、Spring Boot API、PostgreSQL 及主機系統整合的網際銀行系統建立 C4 模型」）。
AI 可為所有層級產生 PlantUML 程式碼與圖表。
使用 AI 聊天機器人進行迭代（例如：「為驗證元件加入雙因素驗證」或「在 AWS 上產生部署視圖」）。
維持各層之間的一致性，並支援「活文件」。
匯出、版本控管，並與程式碼倉儲整合。

此工具提供的結構化、符合 C4 標準的輸出，遠比一般用途的 AI 更可靠。

最佳實務

從工作坊開始 — 使用白板進行第 1 層，以協調利害關係人。
將架構視為程式碼 — 將 PlantUML 檔案儲存在您的程式碼庫中，以便隨著程式碼變更自動更新。
使用 AI 自動化 — 使用 Visual Paradigm 快速生成並優化圖表。
針對受眾 — 第一層省略技術細節；逐步加入。
保持輕量 — 僅在第三層詳細描述複雜容器；除非必要，否則跳過第四層。
持續演進文件 — 讓圖表成為「活文件」，以避免產生過時的產出物。

Big Bank plc 的案例研究仍然是 C4 模型在現實場景中有效性的典範範例，促進了清晰度、協作以及可擴展的架構溝通。如需了解更多，請探索官方 C4 網站或 Visual Paradigm 的 AI 工具。

使用 Visual Paradigm AI 工具進行 C4 模型可視化的最終指南: 本指南說明如何利用 AI 驅動的工具，自動化並增強 C4 模型可視化，以加速軟體架構設計。
利用 Visual Paradigm 的 AI C4 工作室，實現簡化化的架構文件編制: 本文詳細介紹如何使用 AI 增強的工作室，建立乾淨、可擴展且易於維護的軟體架構文件。
C4-PlantUML 工作室的最終指南：革新軟體架構設計: 本資源探討如何將 AI 驅動的自動化、C4 模型的清晰性以及 PlantUML 的彈性整合為單一強大的工具。
Visual Paradigm AI 驅動的 C4 PlantUML 工作室全面指南: 本指南描述了一款於 2025 年底推出的專用工具，可將自然語言提示轉換為分層的 C4 圖表。
C4-PlantUML 工作室｜AI 驅動的 C4 圖表生成器: 本功能概覽介紹了一款由 AI 驅動的工具，專門用於從簡單的文字描述生成 C4 軟體架構圖。
使用 Visual Paradigm AI 聊天機器人生成與修改 C4 模組圖: 本教程示範如何使用 AI 驅動的聊天機器人，迭代式地建立並優化複雜系統的模組層級架構。
AI 驅動的 C4 圖表生成器：核心層級與支援視圖: 本頁面說明 AI 生成器如何支援 C4 模型的四個核心層級——上下文、容器、模組與部署，以提供全面的文件。
AI 圖表生成器：完整支援 C4 模型的版本發布: 此更新詳細說明了整合 AI 驅動功能，以自動化建立層級式 C4 模型圖表。
C4 模型 AI 生成器：自動化完整建模生命週期: 本資源強調專用 AI 聊天機器人如何利用對話式提示，確保 DevOps 團隊架構文件的一致性。
全面評估：通用 AI 聊天機器人 vs. Visual Paradigm 的 C4 工具：此比較說明了為何專業工具如 C4 PlantUML Studio 能提供比通用語言模型更結構化且專業級的結果。