Làm chủ trực quan kiến trúc: Cách xây dựng sơ đồ ngữ cảnh hệ thống C4 trong PlantUML

Tại sao nên sử dụng phương pháp sơ đồ dưới dạng mã cho các mô hình C4?

Các công cụ vẽ kéo-thả truyền thống thường dẫn đến các hộp bị căn chỉnh sai, kiểu dáng không nhất quán và các cập nhật thủ công tốn thời gian mỗi khi kiến trúc thay đổi. Bằng cách tận dụng một “công cụ sơ đồ dưới dạng mã”như một trình soạn thảo PlantUML miễn phí, tài liệu của bạn sẽ luôn đồng bộ với mã nguồn, được kiểm soát phiên bản và sạch sẽ. Sử dụng “VPasCode”, bạn sẽ nhận được khả năng hiển thị thời gian thực và phát hiện định dạng tự động, giúp việc trực quan hóa kiến trúc phần mềm trở nên dễ dàng.

Nghiên cứu tình huống Masterclass: Kiến trúc cửa hàng tạp hóa trực tuyến

Để minh họa cách xây dựng một sơ đồ ngữ cảnh hệ thống vững chắc, hãy cùng xem xét nền tảng Cửa hàng Tạp hóa Trực tuyến. Kiến trúc này cần nắm bắt người dùng cuối, tài xế giao hàng bên ngoài, hệ thống tạp hóa cốt lõi và các dịch vụ bên thứ ba như cổng thanh toán và nhà cung cấp dịch vụ hậu cần.

Dưới đây là toàn bộ mã nguồn PlantUML mà chúng ta sẽ phân tích từng bước:

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
skinparam vpDiagramType C4modelSystemContextDiagram

LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

title Sơ đồ ngữ cảnh hệ thống cho Cửa hàng Tạp hóa Trực tuyến

Person(customer, "Khách hàng", "Duyệt cửa hàng, đặt hàng tạp hóa và lên lịch giao hàng")
Person_Ext(driver, "Tài xế giao hàng", "Giao hàng cho khách hàng")

Enterprise_Boundary(grocery_co, "Cửa hàng Tạp hóa Trực tuyến") {
  System(grocery_system, "Hệ thống Cửa hàng Tạp hóa Trực tuyến", "Cho phép khách hàng đặt hàng tạp hóa trực tuyến và quản lý việc thực hiện đơn hàng")
}

System_Ext(payment, "Cổng thanh toán", "Xử lý thanh toán qua thẻ và ví điện tử")
System_Ext(shipping, "Nhà cung cấp dịch vụ hậu cần", "Lên kế hoạch lộ trình giao hàng và sắp xếp lịch cho tài xế")

Rel(customer, grocery_system, "Duyệt sản phẩm và đặt hàng", "HTTPS")
Rel(grocery_system, payment, "Xử lý thanh toán qua", "HTTPS/API")
Rel(grocery_system, shipping, "Tạo công việc giao hàng qua", "HTTPS/API")
Rel(driver, grocery_system, "Xem phân công giao hàng", "HTTPS")

@enduml

Hướng dẫn chi tiết từng bước về mã nguồn

1. Thiết lập môi trường nền tảng

Tôi bắt đầu bằng cách khởi tạo script với các thẻ PlantUML tiêu chuẩn và nhập các macro thư viện chuẩn chính thức C4-PlantUML. Bằng cách tham chiếu “C4_Context.puml", chúng ta sẽ mở khóa các phần tử ngữ nghĩa được thiết kế riêng cho sơ đồ ngữ cảnh hệ thống.

• Bao gồm thư viện: !include .../C4_Context.pumltải các hình dạng, màu sắc và quy tắc kiểu dáng tiêu chuẩn cho con người, hệ thống và ranh giới.
• Kiểu sơ đồ và bố cục:Đặt “skinparam vpDiagramType C4modelSystemContextDiagram"đảm bảo tích hợp đúng cách trong “VPasCode”, trong khi “LAYOUT_TOP_DOWN()"sắp xếp phân cấp trực quan một cách gọn gàng từ trên xuống dưới. Tôi cũng kích hoạt LAYOUT_WITH_LEGEND()để tự động tạo một hướng dẫn tham khảo hữu ích ở góc dưới bên phải của bảng vẽ.

2. Xác định các vai trò và người dùng

Tiếp theo, tôi cần xác định các vai trò con người tương tác với hệ sinh thái của chúng tôi. Tôi phân biệt giữa người dùng hệ thống tiêu chuẩn và các thực thể bên ngoài bằng cách sử dụng các macro C4 cụ thể:

• Người dùng cốt lõi: Tôi tạo một người dùng chính bằng cách sử dụng Person(customer, "Khách hàng", ...) người khởi tạo đơn hàng và duyệt qua kho hàng.
• Vai trò bên ngoài: Tôi định nghĩa một tài xế giao hàng bằng cách sử dụng Person_Ext(driver, "Tài xế giao hàng", ...) để nhấn mạnh rằng mặc dù họ tương tác với quy trình thực hiện đơn hàng của chúng tôi, họ tồn tại bên ngoài phạm vi bảo mật nội bộ cốt lõi của chúng tôi.

3. Thiết lập ranh giới tổ chức và các hệ thống cốt lõi

Sự rõ ràng về kiến trúc đòi hỏi các ranh giới rõ ràng. Để bao quát những gì công ty chúng tôi sở hữu so với những gì phụ thuộc vào nhà cung cấp bên ngoài, tôi thiết lập một ranh giới doanh nghiệp:

• Ranh giới doanh nghiệp: Sử dụng Enterprise_Boundary(grocery_co, "Cửa hàng tạp hóa trực tuyến") tạo ra một hộp chứa nét đứt để nhóm trực quan các cơ sở hạ tầng nội bộ.
• Hệ thống nội bộ: Bên trong ranh giới này, tôi đặt tài sản phần mềm chính của chúng tôi bằng cách sử dụng System(grocery_system, "Hệ thống cửa hàng tạp hóa trực tuyến", ...).

4. Tích hợp các hệ thống bên ngoài

Không có nền tảng thương mại điện tử hiện đại nào hoạt động biệt lập. Tôi định nghĩa các phụ thuộc bên ngoài bên ngoài ranh giới doanh nghiệp bằng cách sử dụng các macro hệ thống bên ngoài chuyên biệt:

• Xử lý thanh toán: System_Ext(payment, "Cổng thanh toán", ...) đại diện cho các giao dịch tài chính của bên thứ ba.
• Hậu cần và vận chuyển: System_Ext(shipping, "Nhà cung cấp hậu cần", ...) xử lý lập kế hoạch tuyến đường và phân công tài xế.

5. Ánh xạ các mối quan hệ và giao thức

Để liên kết kiến trúc lại với nhau, tôi ánh xạ các tương tác có hướng và các giao thức truyền thông bằng cách sử dụng Rel() macro:

• Luồng khách hàng: Rel(customer, grocery_system, "Duyệt sản phẩm và đặt hàng", "HTTPS") minh họa cách người dùng kết nối an toàn với nền tảng cốt lõi.
• Tích hợp phía máy chủ: Tôi ánh xạ các phụ thuộc phía máy chủ như xử lý thanh toán và nhà cung cấp vận chuyển với các nhãn giao thức rõ ràng ("HTTPS/API") để cung cấp cho các kỹ sư ngữ cảnh kỹ thuật ngay lập tức.

Kết luận & Tự thử nghiệm

Xây dựng các sơ đồ kiến trúc phần mềm sạch sẽ không yêu cầu các công cụ máy tính cồng kềnh hoặc các cấu hình tệp phức tạp. Bằng cách kết hợp cú pháp C4 mạnh mẽ của PlantUML với VPasCode, bạn có thể viết, hiển thị và chia sẻ các sơ đồ kiến trúc chỉ trong vài giây.

Sẵn sàng thử xây dựng kiến trúc hệ thống của riêng bạn? Hãy truy cập trình soạn thảo trực tuyến VPasCode miễn phí, dán đoạn mã này và xem sơ đồ của bạn được hiển thị theo thời gian thực!