Các mô hình C4, được tạo bởi Simon Brown, là một cách đơn giản, phân cấp và thân thiện với nhà phát triển để trực quan hóa kiến trúc phần mềm. Nó sử dụng bốn cấp độ trừu tượng (do đó gọi là “C4”) để mô tả một hệ thống từ cái nhìn tổng quan cấp cao nhất cho đến chi tiết cấp mã nguồn:
- Bối cảnh Hệ thống (Mức 1) – Tổng quan lớn: hệ thống và người dùng/đối tác bên ngoài.
- Các Bộ chứa (Mức 2) – Các lựa chọn công nghệ cấp cao và trách nhiệm.
- Các Thành phần (Mức 3) – Các khối xây dựng logic chính bên trong một bộ chứa.
- Mã nguồn (Mức 4) – Chi tiết tùy chọn ở cấp độ lớp hoặc cấu trúc mã nguồn.
Nó được hỗ trợ bởi ba loại sơ đồ bổ sung:
- Bản đồ Hệ thống
- Động
- Triển khai
Mô hình này độc lập với ký hiệu (bạn có thể sử dụng bất kỳ công cụ vẽ sơ đồ nào) và tập trung vào sự rõ ràng, nhất quán và chi tiết phù hợp với đối tượng người xem. Nó được áp dụng rộng rãi vì tránh được các sơ đồ kiến trúc dạng “bóng lộn xộn” và có thể mở rộng từ bản phác thảo trên bảng trắng đến tài liệu hóa tự động.
Đối với nghiên cứu trường hợp này nghiên cứu trường hợp nhắm mục tiêu, chúng tôi sử dụng ví dụ chuẩn từ trang web chính thức của C4: Hệ thống Ngân hàng Trực tuyến cho ngân hàng giả tưởng “Big Bank plc”. Mục tiêu kinh doanh là cho phép khách hàng cá nhân xem tài khoản và thực hiện thanh toán trực tuyến, đồng thời tích hợp với các hệ thống cốt lõi hiện có của ngân hàng.
Chúng tôi sẽ đi qua từng mức mỗi cấp độ với:
- Mục đích và đối tượng người xem
- Các yếu tố chính + trách nhiệm
- Các mối quan hệ
- Một sơ đồ C4 PlantUML sẵn sàng sử dụng sơ đồ C4 PlantUML (PlantUML hỗ trợ cú pháp C4 và hiển thị đẹp mắt trong hầu hết các trình xem Markdown)
- Lý do và các quyết định chính
- Làm thế nào sơ đồ hỗ trợ các bên liên quan
Bước 1: Xác định phạm vi và tạo sơ đồ bối cảnh hệ thống (Mức độ 1)
Mục đích: Thể hiện cách hệ thống Ngân hàng trực tuyến mới phù hợp với thế giới. Đối tượng: các bên liên quan kinh doanh, người không chuyên kỹ thuật, thành viên mới trong nhóm.
Các thành phần (từ ví dụ chính thức):
- Khách hàng Ngân hàng Cá nhân (Người) – Một khách hàng có một hoặc nhiều tài khoản ngân hàng cá nhân.
- Hệ thống Ngân hàng Trực tuyến (Hệ thống phần mềm) – Hệ thống mới mà chúng ta đang xây dựng.
- Hệ thống Ngân hàng Lõi (Hệ thống phần mềm, hiện có) – Máy chủ chính xử lý dữ liệu khách hàng, tài khoản và giao dịch.
- Hệ thống Email (Hệ thống phần mềm, bên ngoài) – Dịch vụ Email Đơn giản của Amazon Web Services (AWS SES) để gửi xác nhận.
Các mối quan hệ:
- Khách hàng → sử dụng → Hệ thống Ngân hàng Trực tuyến (để xem tài khoản và thực hiện thanh toán)
- Hệ thống Ngân hàng Trực tuyến → sử dụng → Hệ thống Ngân hàng Lõi (để xử lý dữ liệu tài khoản và thanh toán)
- Hệ thống Ngân hàng Trực tuyến → gửi email thông qua → Hệ thống Email
Dưới đây làSơ đồ bối cảnh C4 của PlantUML:
@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()
title Sơ đồ Bối cảnh Hệ thống (Mức độ 1) cho Hệ thống Ngân hàng Trực tuyến
Person(customer, "Khách hàng Ngân hàng Cá nhân", "Một khách hàng có một hoặc nhiều tài khoản ngân hàng cá nhân.")
System(internet_banking_system, "Hệ thống Ngân hàng Trực tuyến", "Hệ thống mới để xem tài khoản và thực hiện thanh toán.")
System(core_banking_system, "Hệ thống Ngân hàng Lõi", "Máy chủ chính hiện có xử lý dữ liệu khách hàng, tài khoản và giao dịch.")
System_Ext(email_system, "Hệ thống Email", "Dịch vụ Email Đơn giản của Amazon Web Services (AWS SES) để gửi xác nhận.")
Rel(customer, internet_banking_system, "Sử dụng")
Rel(internet_banking_system, core_banking_system, "Sử dụng")
Rel(internet_banking_system, email_system, "Gửi email thông qua")
Lay_D(customer, internet_banking_system)
Lay_D(internet_banking_system, core_banking_system)
Lay_U(email_system, internet_banking_system)
@endumlLý do và giá trị: Sơ đồ duy nhất này ngay lập tức trả lời câu hỏi ‘Chúng ta đang xây dựng gì và nó giao tiếp với ai?’ Nó ngăn chặn sự mở rộng phạm vi bằng cách làm rõ các phụ thuộc bên ngoài. Các bên liên quan kinh doanh yêu thích nó vì vẫn chưa có chi tiết công nghệ nào.
Bước 2: Sơ đồ Container (Cấp độ 2)
Mục đích: Thu nhỏ vào Hệ thống Ngân hàng Trực tuyến và hiển thị các đơn vị triển khai/chạy được chính (container) chính và các lựa chọn công nghệ của chúng. Đối tượng: kiến trúc sư, trưởng nhóm phát triển, nhân viên vận hành.
Các container bên trong Hệ thống Ngân hàng Trực tuyến:
- Ứng dụng Trang Đơn (Trình duyệt web – JavaScript + Angular) – Giao diện người dùng toàn diện cho ngân hàng trực tuyến.
- Ứng dụng Di động (Thiết bị di động – native iOS/Android hoặc React Native) – Chức năng hạn chế cho việc sử dụng khi di chuyển.
- Ứng dụng API (Bên máy chủ – Java + Spring Boot) – API JSON/HTTPS được sử dụng bởi cả hai giao diện phía trước.
- Cơ sở dữ liệu (Cơ sở dữ liệu quan hệ – PostgreSQL) – Lưu trữ dữ liệu phiên làm việc, cài đặt người dùng, tóm tắt tài khoản đã được lưu tạm (dữ liệu cốt lõi vẫn nằm trong mainframe cũ).
Các mối quan hệ chính (cùng các hệ thống bên ngoài như Cấp độ 1):
- SPA và Ứng dụng Di động → gọi → Ứng dụng API
- Ứng dụng API ↔ Cơ sở dữ liệu
- Ứng dụng API → Hệ thống Ngân hàng Cốt lõi và Hệ thống Email
Sơ đồ Container C4 của 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 Sơ đồ Container C4 cho Hệ thống Ngân hàng Trực tuyến
Person(customer, "Khách hàng Ngân hàng Cá nhân", "Một khách hàng có một hoặc nhiều tài khoản ngân hàng cá nhân.")
System_Boundary(internet_banking_system, "Hệ thống Ngân hàng Trực tuyến", "Hệ thống mới để xem tài khoản và thực hiện thanh toán.") {
Container(spa, "Ứng dụng Trang Đơn", "JavaScript + Angular", "Giao diện người dùng toàn diện cho ngân hàng trực tuyến", $sprite="angular")
Container(mobile_app, "Ứng dụng Di động", "iOS/Android (React Native)", "Chức năng hạn chế cho việc sử dụng khi di chuyển", $sprite="react")
Container(api_app, "Ứng dụng API", "Java + Spring Boot", "API JSON/HTTPS được sử dụng bởi cả hai giao diện phía trước", $sprite="java")
ContainerDb(database, "Cơ sở dữ liệu", "PostgreSQL", "Lưu trữ dữ liệu phiên làm việc, cài đặt người dùng, tóm tắt tài khoản đã được lưu tạm", $sprite="postgresql")
}
System(core_banking_system, "Hệ thống Ngân hàng Cốt lõi", "Mainframe hiện có xử lý dữ liệu khách hàng, tài khoản và giao dịch.")
System_Ext(email_system, "Hệ thống Email", "Dịch vụ Gửi Email Đơn giản của Amazon Web Services (AWS SES) để gửi xác nhận.")
' Mối quan hệ
Rel(customer, spa, "Sử dụng", "HTTPS")
Rel(customer, mobile_app, "Sử dụng", "HTTPS")
Rel(spa, api_app, "Gọi", "JSON/HTTPS")
Rel(mobile_app, api_app, "Gọi", "JSON/HTTPS")
Rel(api_app, database, "Đọc và ghi", "JDBC/SQL")
Rel(api_app, core_banking_system, "Truy vấn / Cập nhật", "JSON/HTTPS")
Rel(api_app, email_system, "Gửi email qua", "HTTPS")
' Gợi ý bố cục (tùy chọn – giúp PlantUML sắp xếp các thành phần tốt hơn)
Lay_D(customer, internet_banking_system)
Lay_D(internet_banking_system, core_banking_system)
Lay_U(email_system, internet_banking_system)
@enduml
Lý do: Chúng tôi đã chọn mô hình SPA hiện đại + backend API cho web, ứng dụng di động native để tối ưu hiệu suất, và giữ cơ sở dữ liệu nhẹ nhàng (hầu hết dữ liệu vẫn nằm trong mainframe cũ). Sơ đồ này là nguồn duy nhất đáng tin cậy cho các quyết định công nghệ cấp cao và giúp nhóm DevOps lên kế hoạch hạ tầng.
Bước 3: Sơ đồ Thành phần (Cấp độ 3)
Mục đích: Thu nhỏ vào một container (thường là container phức tạp nhất – Ứng dụng API) và hiển thị các thành phần logic chính của nó. Đối tượng: các nhóm phát triển.
Ví dụ: Các thành phần bên trong Ứng dụng API:
- Bộ điều khiển tài khoản (Spring MVC)
- Bộ điều khiển xác thực
- Bộ điều khiển đặt lại mật khẩu
- Thành phần bảo mật (xử lý xác thực, JWT, v.v.)
- Thành phần quản lý tài khoản (điều phối các cuộc gọi đến hệ thống ngân hàng cốt lõi)
- Thành phần thông báo email
Sơ đồ thành phần C4 của PlantUML (tập trung vào ứng dụng API):
@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
LAYOUT_WITH_LEGEND()
title Sơ đồ thành phần cho Hệ thống Ngân hàng Trực tuyến - Ứng dụng API
Container(spa, "Ứng dụng Trang Đơn", "javascript và angular", "Cung cấp tất cả các chức năng ngân hàng trực tuyến cho khách hàng thông qua trình duyệt web của họ.")
Container(ma, "Ứng dụng Di động", "Xamarin", "Cung cấp một tập hợp con hạn chế các chức năng ngân hàng trực tuyến cho khách hàng thông qua thiết bị di động của họ.")
ContainerDb(db, "Cơ sở dữ liệu", "Sơ đồ Cơ sở dữ liệu quan hệ", "Lưu trữ thông tin đăng ký người dùng, thông tin xác thực đã mã hóa, nhật ký truy cập, v.v.")
System_Ext(mbs, "Hệ thống Ngân hàng Mainframe", "Lưu trữ tất cả thông tin cốt lõi về khách hàng, tài khoản, giao dịch, v.v.")
Container_Boundary(api, "Ứng dụng API") {
Component(accounts, "Bộ điều khiển tài khoản", "Spring MVC", "Cung cấp tóm tắt tài khoản và số dư cho khách hàng.")
Component(auth, "Bộ điều khiển xác thực", "Spring MVC", "Xử lý đăng nhập người dùng, quản lý phiên và tạo token.")
Component(reset, "Bộ điều khiển đặt lại mật khẩu", "Spring MVC", "Cho phép người dùng đặt lại mật khẩu thông qua email.")
Component(security, "Thành phần bảo mật", "Spring Bean", "Xử lý xác thực, tạo token JWT và mã hóa mật khẩu.")
Component(accountmgmt, "Thành phần quản lý tài khoản", "Spring Bean", "Điều phối các cuộc gọi đến hệ thống ngân hàng cốt lõi cho các thao tác tài khoản.")
Component(email, "Thành phần thông báo email", "Spring Bean", "Gửi email đặt lại mật khẩu và email xác minh tài khoản qua SMTP.")
Rel(accounts, security, "Sử dụng")
Rel(auth, security, "Sử dụng")
Rel(reset, security, "Sử dụng")
Rel(accountmgmt, mbs, "Sử dụng", "XML/HTTPS")
Rel(email, db, "Đọc", "JDBC")
}
Rel(spa, accounts, "Sử dụng", "JSON/HTTPS")
Rel(spa, auth, "Sử dụng", "JSON/HTTPS")
Rel(spa, reset, "Sử dụng", "JSON/HTTPS")
Rel(ma, accounts, "Sử dụng", "JSON/HTTPS")
Rel(ma, auth, "Sử dụng", "JSON/HTTPS")
Rel(ma, reset, "Sử dụng", "JSON/HTTPS")
@enduml
Lý do: Mức độ này cho thấy cách các trách nhiệm được phân chia (tách biệt các vấn đề) và giúp việc đưa các nhà phát triển mới vào làm việc nhanh hơn nhiều. Bạn chỉ vẽ sơ đồ thành phần cho các container đủ phức tạp để cần thiết.
Bước 4: Sơ đồ mã nguồn (Mức độ 4) – Tùy chọn
Mục đích: Hiển thị cấu trúc bên trong của một thành phần duy nhất (sơ đồ lớp, sơ đồ tuần tự, v.v.). Đối tượng: các nhà phát triển làm việc trên mã nguồn đó.
Ví dụ cho thành phầnBộ điều khiển xác thực – một sơ đồ lớp UML đơn giản trong PlantUML:
@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 : "sử dụng"
AuthenticationController ..> UserRepository : "sử dụng"
@enduml
Trong các dự án thực tế, bạn thường bỏ qua Mức độ 4 và thay vào đó trỏ đến mã nguồn thực tế.
Bước 5: Sơ đồ hỗ trợ
Sơ đồ động (ví dụ: luồng “Xem tóm tắt tài khoản”)
@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml
title Sơ đồ động cho Xem Tổng quan Tài khoản
Person(customer, "Khách hàng Ngân hàng Cá nhân") {
Container(spa, "Ứng dụng Trang Đơn") {
Container(api, "Ứng dụng API") {
ContainerDb(db, "Cơ sở dữ liệu") {
System_Ext(coreBanking, "Hệ thống Ngân hàng Lõi")
}
}
}
}
Rel(customer, spa, "1. Nhấn vào 'Tài khoản'", "")
Rel(spa, api, "2. GET /accounts", "JSON/HTTPS")
Rel(api, db, "3. Đọc bản tóm tắt đã lưu tạm", "")
Rel(api, coreBanking, "4. Lấy dữ liệu mới nhất", "")
Rel(api, spa, "5. Trả về JSON", "")
SHOW_LEGEND()
@endumlSơ đồ Triển khai (bản đồ vật lý cấp cao):
@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml
title Sơ đồ Triển khai cho Hệ thống Ngân hàng Trực tuyến
Deployment_Node(aws, "Amazon Web Services", "Mây") {
Deployment_Node(ec2, "Nhóm Tự động mở rộng EC2", "Linux") {
Container(api, "Ứng dụng API", "Java Spring Boot")
}
Deployment_Node(rds, "RDS", "PostgreSQL") {
ContainerDb(db, "Cơ sở dữ liệu")
}
}
Deployment_Node(customerDevice, "Thiết bị của Khách hàng", "Web/Điện thoại di động") {
Container(spa, "Ứng dụng Trang Đơn")
Container(mobile, "Ứng dụng Di động")
}
System_Ext(coreBanking, "Hệ thống Ngân hàng Lõi (máy chủ nội bộ)")
Rel(spa, api, "Gọi API đến", "HTTPS")
Rel(mobile, api, "Gọi API đến", "HTTPS")
Rel_U(api, spa, "Gửi đến trình duyệt web của khách hàng")
Rel_U(api, mobile, "Gửi đến ứng dụng di động")
SHOW_LEGEND()
@enduml
Làm thế nào để sử dụng Trường hợp nghiên cứu này trong thực tế
- Bắt đầu bằng một buổi làm việc: vẽ Sơ đồ Bối cảnh trên bảng trắng.
- Lặp lại để đi đến Các Container và Thành phần bằng cách sử dụng PlantUML C4.
- Giữ các sơ đồ trong kho mã nguồn (như mã nguồn!) để chúng luôn được cập nhật.
- Tự động tạo tài liệu sống động.
Ví dụ Hệ thống Ngân hàng Trực tuyến này chính xác là tài liệu tham khảo chính thức do Simon Brown tạo ra và được sử dụng tại hàng ngàn tổ chức trên toàn thế giới. Bằng cách tuân theo các bước này, bạn hiện đã có một mô tả kiến trúc hoàn chỉnh, sẵn sàng sản xuất, mà bất kỳ ai — từ CEO đến lập trình viên mới — đều có thể hiểu ở mức độ chi tiết phù hợp.
Bài viết về Sơ đồ C4
- Hướng dẫn toàn diện về Trực quan hóa Mô hình C4 bằng Công cụ AI của Visual Paradigm: Hướng dẫn này giải thích cách tận dụng các công cụ được hỗ trợ bởi AI để tự động hóa và nâng cao trực quan hóa mô hình C4 nhằm thiết kế kiến trúc phần mềm nhanh hơn.
- Tận dụng Studio C4 AI của Visual Paradigm để tài liệu hóa kiến trúc được đơn giản hóa: Bài viết này chi tiết cách sử dụng một studio được tăng cường AI để tạo ra tài liệu hóa kiến trúc phần mềm sạch sẽ, dễ mở rộng và dễ bảo trì.
- Hướng dẫn toàn diện về Studio C4-PlantUML: Cách mạng hóa thiết kế kiến trúc phần mềm: Tài nguyên này khám phá việc kết hợp tự động hóa được điều khiển bởi AI, sự rõ ràng của mô hình C4 và tính linh hoạt của PlantUML thành một công cụ mạnh mẽ duy nhất.
- Hướng dẫn toàn diện về Studio C4 PlantUML được hỗ trợ AI của Visual Paradigm: Hướng dẫn này mô tả một công cụ được thiết kế riêng, ra mắt vào cuối năm 2025, có khả năng chuyển đổi các lời nhắc bằng ngôn ngữ tự nhiên thành các sơ đồ C4 nhiều lớp.
- Studio C4-PlantUML | Trình sinh sơ đồ C4 được hỗ trợ AI: Bản tổng quan tính năng nhấn mạnh một công cụ được điều khiển bởi AI, được thiết kế để tạo sơ đồ kiến trúc phần mềm C4 từ các mô tả văn bản đơn giản.
- Tạo và chỉnh sửa Sơ đồ Thành phần C4 bằng Trợ lý chatbot AI của Visual Paradigm: Bài hướng dẫn này minh họa cách sử dụng trợ lý chatbot được hỗ trợ AI để lần lượt tạo và tinh chỉnh kiến trúc cấp thành phần cho các hệ thống phức tạp.
- Trình sinh sơ đồ C4 được hỗ trợ AI: Các cấp chính và các góc nhìn hỗ trợ: Trang này giải thích cách trình sinh AI hỗ trợ bốn cấp chính của mô hình C4 — Bối cảnh, Container, Thành phần và Triển khai — để cung cấp tài liệu toàn diện.
- Trình sinh biểu đồ AI: Phát hành hỗ trợ mô hình C4 đầy đủ: Cập nhật này mô tả việc tích hợp các tính năng được hỗ trợ bởi AI nhằm tạo tự động các biểu đồ mô hình C4 phân cấp.
- Trình sinh mô hình C4 AI: Tự động hóa toàn bộ vòng đời mô hình hóa: Tài nguyên này nhấn mạnh cách một trợ lý chatbot AI chuyên biệt sử dụng các lời nhắc hội thoại để đảm bảo tính nhất quán trong tài liệu kiến trúc cho các đội DevOps.
- Bản tổng quan toàn diện: Trợ lý chatbot AI thông thường so với công cụ C4 của Visual Paradigm: So sánh này giải thích lý do tại sao các công cụ chuyên biệt như C4 PlantUML Studio cung cấp kết quả có cấu trúc hơn và chất lượng chuyên nghiệp hơn so với các mô hình ngôn ngữ phổ thông.
This post is also available in Deutsch, English, Español, فارسی, Français, English, Bahasa Indonesia, 日本語, Polski, Portuguese, Ру́сский, 简体中文 and 繁體中文.