de_DEen_USes_ESfa_IRfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

Thành thạo sơ đồ Container C4: Tập trung vào các lựa chọn công nghệ, trách nhiệm và giao tiếp (với các ví dụ PlantUML)

Sơ đồ Container C4 là gì?

Sơ đồ Container làMức 2trong mô hình C4 của Simon Brown. Nó phóng to vào một hệ thống phần mềm duy nhất (được xác định ở Mức 1 – Bối cảnh Hệ thống) để hiển thị:

The Ultimate Guide to C4 Model Visualization with Visual Paradigm's AI Tools - ArchiMetric

  • Hình dạng cấp caohình dạng cấp caocủa kiến trúc bên trong ranh giới hệ thống của bạn.

  • Các đơn vị triển khai/chạy được chính thứccác đơn vị triển khai/chạy được chính thứcgọi làcác container.

  • Các lựa chọn công nghệcho mỗi container.

  • Cách các containertương tácvới nhau và với các tác nhân/hệ thống bên ngoài.

Lưu ý quan trọng: Một “container” trong C4không phảimột container Docker nhất thiết. Nó là bất kỳ đơn vị triển khai/chạy độc lập nào thực thi mã nguồn hoặc lưu trữ dữ liệu. Ví dụ:

  • Ứng dụng web / Ứng dụng trang đơn (SPA)

  • Ứng dụng di động

  • API phía máy chủ / vi dịch vụ

  • Cơ sở dữ liệu (cấu trúc)

  • Lưu trữ tập tin (kho S3, thư mục hệ thống tập tin)

  • Broker tin nhắn / hàng đợi (khi được mô hình hóa rõ ràng)

  • Ứng dụng máy tính để bàn / ứng dụng dòng lệnh (CLI)

  • Quy trình xử lý hàng loạt / công việc được lên lịch

Sơ đồ vẫn giữ nguyêncao cấp — không có chi tiết lớp nội bộ hay mã nguồn (đó là Thành phần cấp 3 hoặc Mã nguồn cấp 4).

Khi nào nên tạo sơ đồ Container

Tạo (và duy trì) sơ đồ Container khi:

  • Bạn đã hoàn thành (hoặc ít nhất là phác thảo) sơ đồ Bối cảnh Hệ thống sơ đồ và cần trả lời: “Những khối xây dựng chính bên trong hệ thống của chúng ta là gì?”

  • Tiếp nhận nhân viên mới, kiến trúc sư hoặc nhân viên vận hành — họ cần hiểu nhanh về nền tảng công nghệ và trách nhiệm cấp cao.

  • Đưa ra các quyết định quan trọng về công nghệ hoặc kiến trúc (từ monolith → microservices, thêm ứng dụng di động, chọn cơ sở dữ liệu, giới thiệu hàng đợi tin nhắn, chuyển đổi lên đám mây).

  • Tài liệu hóa cho kiểm toán, tuân thủ, đánh giá bảo mật hoặc phản ứng sự cố (giúp thể hiện bề mặt tấn công, luồng dữ liệu).

  • Bạn muốn “kiến trúc như mã nguồn” tồn tại trong kho lưu trữ và phát triển cùng hệ thống.

  • Hầu hết các đội dừng ở đây — chính Simon Brown nhận xét rằng Bối cảnh Hệ thống + Container sơ đồ là đủ cho phần lớn các đội phát triển phần mềm. Chỉ đi sâu hơn (Thành phần/Mã nguồn) khi độ phức tạp bên trong một Container được lý giải hợp lý.

Bỏ qua hoặc hoãn lại nếu:

  • Hệ thống cực kỳ đơn giản (một tiến trình + cơ sở dữ liệu).

  • Bạn đang ở giai đoạn hình thành ý tưởng rất sớm và chỉ cần bối cảnh tổng quan.

Tại sao nên sử dụng sơ đồ Container? (Lợi ích chính)

  • Rõ ràng cho các đối tượng khác nhau
    Lập trình viên thấy công nghệ và các điểm tích hợp.
    Đội Ops/infra thấy các đơn vị triển khai và các đường truyền thông.
    Kiến trúc sư thấy các ranh giới trách nhiệm và rủi ro nợ công nghệ.
    Quản lý thấy một cái nhìn trung lập về công nghệ đủ rõ ràng nhưng vẫn cụ thể.

  • Tránh được vấn đề “một sơ đồ lớn”
    Ngăn việc đổ tất cả (người dùng + hạ tầng + lớp + biểu tượng đám mây) vào một bức tranh quá tải.

  • Nổi bật các quyết định quan trọng
    Rõ ràng phơi bày các lựa chọn như SPA + API + cơ sở dữ liệu quan hệ so với rendering phía máy chủ + NoSQL, hoặc đồng bộ so với dựa trên sự kiện.

  • Giao tiếp và hợp tác
    Hành động như một bản đồ chung trong các buổi họp thiết kế, phân tích sự cố, mô hình hóa mối đe dọa và lập kế hoạch phát triển.

  • Tài liệu sống động
    Khi được viết bằng PlantUML / Structurizr DSL / tương tự → được quản lý phiên bản trong Git, tự động tái tạo trên CI, luôn cập nhật nhất.

Làm thế nào để tạo ra một sơ đồ Container tuyệt vời (Bước từng bước + Các thực hành tốt nhất)

  1. Bắt đầu từ Mức 1
    Sao chép Người dùng + Các hệ thống phần mềm bên ngoài từ sơ đồ bối cảnh — chúng sẽ trở thành các tác nhân tương tác với các container của bạn.

  2. Vẽ ranh giới Hệ thống
    Sử dụng Ranh_giới_Hệ_thống trong PlantUML để rõ ràng xác định phạm vi “bên trong hệ thống của chúng ta”.

  3. Xác định các Container
    Hỏi: Những thứ nào có thể chạy/tích hợp riêng biệt, cung cấp chức năng cho hệ thống?
    Các mẫu phổ biến:

    • Web SPA ↔ Backend API ↔ Cơ sở dữ liệu

    • Ứng dụng di động ↔ Backend cho frontend (BFF) ↔ Dịch vụ chung

    • Microservices với broker tin nhắn

    • Hệ thống monolith cũ + lớp API mới

  4. Thêm Công nghệ và Mô tả ngắn gọn
    Mỗi container nên hiển thị: tên, công nghệ, mục đích ngắn gọn.
    Giữ mô tả dưới 15 từ.

  5. Xác định Tương tác (Mối quan hệ)
    Hiển thị hướng đi + giao thức + mục đích (ví dụ: “JSON/HTTPS”, “Đọc từ và ghi vào”, “Đăng tải lên”, “Tiêu thụ từ”).
    Sử dụng động từ trong các mối quan hệ.

  6. Thực hành tốt nhất

    • Giữ cho dễ đọc — nhắm tới dưới 10–12 container. Nếu nhiều hơn → tạo các góc nhìn tập trung (ví dụ: “container hệ thống API”).

    • Luôn nhất quán — cùng hướng bố cục (trên xuống/dưới lên hoặc trái sang phải), cùng mức độ chi tiết.

    • Sử dụng biểu tượng/ảnh hoạt hình — thêm điểm nhấn thị giác (PlantUML hỗ trợ devicons, font-awesome, v.v.).

    • Chú thích và khóa — bật chú thích tự động trong PlantUML.

    • Tránh rối mắt — bỏ qua các hàng đợi/chủ đề nếu chúng không mang lại giá trị; thay vào đó ghi nhãn giao thức trên các mũi tên.

    • Phiên bản và lưu trữ dưới dạng mã — gửi các tệp .puml vào kho lưu trữ.

    • Tùy chỉnh theo đối tượng — một phiên bản dành cho nhà phát triển (chi tiết kỹ thuật), phiên bản nhẹ hơn dành cho các bên liên quan.

Ví dụ PlantUML – Hệ thống Ngân hàng Internet Cổ điển (phong cách Big Bank plc)

Dưới đây là một ví dụ sạch, đạt tiêu chuẩn sản xuất, sử dụng thư viện C4-PlantUML chính thức.

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

' Tùy chọn: thêm biểu tượng đẹp (từ bộ sprites tupadr3)
!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
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/android.puml

title Sơ đồ Container: Hệ thống Ngân hàng Internet

Person(customer, "Khách hàng Ngân hàng Cá nhân", "Một khách hàng của Big Bank plc")

System_Boundary(c1, "Hệ thống Ngân hàng Internet") {
    Container(spa, "Ứng dụng Trang Đơn", "JavaScript & 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", $sprite="angular")
    Container(mobile, "Ứng dụng Di động", "Android/iOS (React Native)", "Chức năng ngân hàng trực tuyến hạn chế", $sprite="android")
    Container(api, "Ứng dụng API", "Java & Spring Boot", "Cung cấp chức năng ngân hàng trực tuyến thông qua API", $sprite="java")
    ContainerDb_Ext(db, "Cơ sở dữ liệu Ngân hàng", "PostgreSQL", "Lưu trữ tùy chọn người dùng, dữ liệu đã cache, phiên đăng nhập (các tài khoản/giao dịch chính vẫn nằm trên hệ thống mainframe)", $sprite="postgresql")
}

System_Ext(core, "Hệ thống Ngân hàng Chính", "Hệ thống Mainframe – hiện có")
System_Ext(email, "Hệ thống Email", "Gửi email (ví dụ: AWS SES)")

Rel(customer, spa, "Sử dụng", "HTTPS")
Rel(customer, mobile, "Sử dụng", "HTTPS")

Rel(spa, api, "Gọi", "JSON/HTTPS")
Rel(mobile, api, "Gọi", "JSON/HTTPS")

Rel(api, db, "Đọc và ghi vào", "JDBC/SQL")
Rel(api, core, "Sử dụng", "JSON/HTTPS")
Rel(api, email, "Gửi email bằng", "HTTPS")

LAYOUT_WITH_LEGEND()
LAYOUT_TOP_DOWN()

@enduml

Điều này tạo ra một sơ đồ sạch với:

  • Biên giới hệ thống

  • Nhãn công nghệ

  • Sprite/biểu tượng

  • Mối quan hệ rõ ràng

  • Chú thích

Bạn có thể dán nó trực tiếp vào máy chủ trực tuyến PlantUML hoặc bất kỳ IDE/Trình soạn thảo tương thích nào.

Sử dụng cấu trúc này như một mẫu — thay thế các thành phần bằng tên, công nghệ và luồng của hệ thống của bạn. Để tùy chỉnh nâng cao hơn (chủ đề, màu sắc tùy chỉnh), hãy kiểm tra các mẫu trên GitHub của C4-PlantUML.

Chúc bạn vẽ sơ đồ vui vẻ — và hãy nhớ: mục tiêu là giao tiếp hiệu quả, chứ không phải sự hoàn hảo của UML!

Tài nguyên Sơ đồ Container C4

This post is also available in Deutsch, English, Español, فارسی, Français, English, Bahasa Indonesia, 日本語, Polski, Portuguese, Ру́сский, 简体中文 and 繁體中文.