Sơ đồ C4 là một phương pháp trực quan hóa kiến trúc chuẩn hóa, được thiết kế để mô hình hóa các hệ thống phần mềm ở nhiều cấp độ trừu tượng cấu trúc khác nhau. Được tích hợp sẵn trong Mermaid.js, bộ phận c4động cơ tuân theo bốn tầng cốt lõi của mô hình C4: Bối cảnh (hệ sinh thái quy mô lớn), Thùng chứa (ứng dụng, dịch vụ và cơ sở dữ liệu), Thành phần (các mô-đun cấu trúc nội bộ), và Tương tác động. Công cụ này loại bỏ sự phiền toái khi tùy chỉnh kiểu CSS bằng cách áp dụng các khối kiến trúc nhất quán, sẵn sàng trình bày dựa trên các khai báo văn bản của bạn.
Hiểu rõ các trừu tượng và từ khóa trong sơ đồ C4
Mermaid hỗ trợ bốn tiêu đề khởi tạo sơ đồ chuyên biệt tùy thuộc vào mức độ chi tiết mà bố cục hệ thống của bạn yêu cầu:
C4Context: Tập trung vào cái nhìn tổng thể, hiển thị người dùng, các hệ sinh thái phần mềm cốt lõi và các phụ thuộc bên ngoài cấp cao.C4Container: Thu nhỏ một cấp độ để phân tích các ứng dụng độc lập, giao diện frontend, dịch vụ vi mô, hệ thống lưu trữ cơ sở dữ liệu và hàng đợi.C4Component: Khai thác sâu bên trong một thùng chứa để trưng bày các mô-đun cấp mã nguồn bên trong, chẳng hạn như Controllers, Services và Repositories.C4Dynamic: Tập trung vào việc theo dõi tương tác dữ liệu tại thời điểm chạy hoặc thứ tự giao dịch từng bước giữa các khối hạ tầng.
Cấu trúc ngữ pháp cơ bản
Mỗi sơ đồ C4 bắt đầu bằng tiêu đề tầng cụ thể, tiếp theo là một câu tiêu đề tùy chọn và các thành phần macro được phân cách bằng dấu phẩy. Các tham số được đặt trong dấu ngoặc đơn, với chuỗi được giới hạn bởi dấu ngoặc kép.
C4Context
title "Bản thiết kế bối cảnh hệ thống cho Lõi Internet"
Person(customer, "Khách hàng Ngân hàng", "Một khách hàng của ngân hàng có tài khoản cá nhân.")
System(banking_system, "Hệ thống Ngân hàng Trực tuyến", "Cho phép khách hàng xem thông tin tài khoản.")
Rel(customer, banking_system, "Sử dụng", "HTTPS")
Phân loại đầy đủ các macro thành phần C4
Thư viện C4 của Mermaid cung cấp một bộ các macro chuyên biệt phong phú để phân biệt rõ ràng giữa các thành phần nội bộ, các hệ thống bên ngoài và các lớp cơ sở dữ liệu ở mọi tầng trừu tượng.
1. Macro Người dùng và Người
Person(alias, label, [descr], [sprite], [tags]): Mô hình hóa một người dùng nội bộ hoặc bên liên quan.Person_Ext(alias, label, [descr], [sprite], [tags]): Mô hình hóa một người dùng bên ngoài (ví dụ: nhà cung cấp bên thứ ba hoặc kiểm toán viên) nằm ngoài ranh giới tổ chức chính của bạn.
2. Macro Hệ thống và Sinh thái Phần mềm
System(alias, label, [descr], [sprite], [tags]): Đại diện cho một cụm hệ thống phần mềm nội bộ, nằm trong phạm vi quản lý trực tiếp của bạn.System_Ext(alias, label, [descr], [sprite], [tags]): Mô hình hóa một hệ thống phần mềm bên ngoài quan trọng được quản lý bởi bên thứ ba (ví dụ: nhà cung cấp xác thực, sổ cái ngân hàng cốt lõi).SystemDb(alias, label, [descr], [sprite], [tags]): Hiển thị một hộp kho lưu trữ dữ liệu cấp hệ thống có hình dạng hình trụ.SystemDb_Ext(alias, label, [descr], [sprite], [tags]): Hiển thị một tầng cơ sở dữ liệu bên ngoài do bên thứ ba quản lý.
3. Macro Lớp Container (Tầng C4Container)
Container(alias, label, technology, [descr], [sprite], [tags]): Mô hình hóa một ứng dụng có thể chạy riêng biệt, máy chủ API hoặc giao diện người dùng phía trước.ContainerDb(alias, label, technology, [descr], [sprite], [tags]): Hiển thị một lớp bao bọc động cơ cơ sở dữ liệu quan hệ hoặc phi quan hệ ở cấp container.Container_Ext(alias, label, technology, [descr], [sprite], [tags]): Đại diện cho một container đám mây bên ngoài hoặc dịch vụ ứng dụng.ContainerDb_Ext(alias, label, technology, [descr], [sprite], [tags]): Đại diện cho một tầng lưu trữ cơ sở dữ liệu đám mây được quản lý bên ngoài.
4. Macro Lớp Thành phần (Tầng C4Component)
Component(alias, label, technology, [descr], [sprite], [tags]): Bản đồ hóa một module cấp mã nguồn nội bộ, lớp hoặc bộ điều khiển lớp.ComponentDb(alias, label, technology, [descr], [sprite], [tags]): Mô hình hóa một hệ thống lưu trữ thành phần vi mô nội bộ hoặc hệ thống bộ nhớ đệm tệp cấp thấp.
Các hộp ranh giới và bao bọc cấu trúc
Để chỉ ra các khu vực bảo mật, tường lửa doanh nghiệp hoặc các ranh giới ứng dụng logic, Mermaid cung cấp ba lớp bao bọc hộp được đóng trong dấu ngoặc vuông. Các thành phần nằm bên trong được nhóm lại về mặt thị giác.
Enterprise_Boundary(alias, label) { ... }: Bao bọc các hệ thống cấp cao bên trong một ranh giới trực quan rộng, đại diện cho viền toàn bộ cơ sở hạ tầng doanh nghiệp hoặc công ty.System_Boundary(alias, label) { ... }: Nhóm các container ứng dụng hoặc microservice liên quan chặt chẽ bên trong một hộp sinh thái phần mềm thống nhất.Container_Boundary(alias, label) { ... }: Tách biệt các thành phần cấp mã nguồn bên trong một lớp ngữ cảnh module ứng dụng duy nhất.
Toán tử hướng quan hệ nâng cao
Việc kết nối các khối trong sơ đồ C4 phụ thuộc vào Relmacro hoặc các biến thể hướng rõ ràng của nó. Thay vì truyền các đường sơ đồ luồng thô, bạn theo dõi các kết nối về mặt ngữ nghĩa bằng cách khai báo các vector công nghệ trực tiếp bên trong các khối logic.
| Mã định dạng cú pháp quan hệ | Hướng mũi tên trực quan | Bối cảnh căn chỉnh sử dụng |
|---|---|---|
Rel(from, to, label, [tech]) |
Động / Tự động | Quan hệ mặc định. Để thuật toán bố cục xác định đường đi tốt nhất. |
BiRel(from, to, label, [tech]) |
Hai chiều (<–>) | Chỉ ra các thao tác giao tiếp hai chiều, giao thức song công hoặc các quy trình đồng bộ. |
Rel_Back(from, to, label, [tech]) |
Mũi tên ngược lên trên (<–) | Vẽ quan hệ theo hướng tiến trong logic mã nguồn nhưng đảo ngược mũi tên trực quan ngược lại. |
Rel_Neighbor(from, to, label, [tech]) |
Ưu tiên bố cục ngang | Bắt buộc nút đích phải nằm ngay bên cạnh nút nguồn trên cùng một hàng ngang. |
Rel_Down(from, to, label, [tech]) / Rel_D(...) |
Thẳng xuống dưới (v) | Bắt buộc luồng dữ liệu thẳng đứng đi xuống các lớp cơ sở dữ liệu hoặc các quy trình nền tiếp theo. |
Rel_Up(từ, đến, nhãn, [công nghệ]) / Rel_U(...) |
Thẳng lên trên (^) | Cưỡng chế các đường quan hệ di chuyển thẳng lên các thành phần giao diện người dùng khách hàng. |
Rel_Left(từ, đến, nhãn, [công nghệ]) / Rel_L(...) |
Thẳng sang trái (<-) | Điều hướng các đường đi theo chiều ngang về phía bên trái của phần tử bảng vẽ. |
Rel_Right(từ, đến, nhãn, [công nghệ]) / Rel_R(...) |
Thẳng sang phải (->) | Điều hướng các đường đi theo chiều ngang về phía bên phải của phần tử bảng vẽ. |
Thiết kế phong cách động tùy chỉnh & Gắn thẻ (Ghi đè hình dạng C4)
Để đánh dấu các ứng dụng cũ, nổi bật các hệ thống cao cấp hoặc làm nổi bật luồng dữ liệu an toàn, bạn có thể tạo các phong cách tùy chỉnh bằng cách sử dụng bộ động cơ gắn thẻ phần tử. Bạn xác định ma trận thuộc tính thẻ ở đầu tài liệu của mình, sau đó thêm nhãn thẻ đó vào định nghĩa phần tử của bạn.
Từ khóa chỉnh sửa phong cách:
UpdateElementStyle(tênPhầnTử, màuNền, màuChữ, [màuViền], [bóng]): Ghi đè trực tiếp bảng màu nền mặc định của một hộp phần tử cụ thể.UpdateRelStyle(từ, đến, màuĐườngDẫn, màuChữ): Nhắm mục tiêu rõ ràng vào một tuyến kết nối để thay đổi màu đường dẫn hoặc mô tả kết nối.
C4Context
title "Bản đồ kiến trúc toàn cầu mã màu tùy chỉnh"
System(legacy_api, "Hệ thống lõi thanh toán cũ", "Xử lý gia hạn đăng ký.")
System(modern_portal, "Cổng điều khiển khách hàng", "Công nghệ xem web người dùng hiện đại.")
%% Tùy chỉnh màu sắc trực tiếp
UpdateElementStyle(legacy_api, "#d9534f", "#ffffff", "#c9302c")
UpdateElementStyle(modern_portal, "#5cb85c", "#ffffff", "#4cae4c")
Bản vẽ thực tế: Bản đồ vùng giới hạn hệ thống thương mại điện tử doanh nghiệp
Bản vẽ thùng chứa toàn diện, đa tầng này theo dõi một hệ sinh thái thương mại điện tử trực tuyến. Nó tách biệt các máy chủ lõi nội bộ bằng cách sử dụng mộtHệ thống_Biên giớikhối chứa, triển khai các bộ tiếp nhận thông báo đám mây bên ngoài thông quaSystem_Ext, ánh xạ các kho lưu trữ cơ sở dữ liệu quan hệ nội bộ cùng với các dịch vụ theo dõi vi mô bên ngoài, và cố định các đường truyền thông tin bằng các tham số công nghệ rõ ràng.
C4Container
title "Bản thiết kế Container cho Nền tảng Thương mại điện tử Doanh nghiệp"
Person(customer, "Người mua hàng trực tuyến", "Lướt qua các mục danh mục và thêm sản phẩm vào giỏ hàng kỹ thuật số của họ.")
System_Ext(payment_gateway, "Dịch vụ API Stripe", "Kho lưu trữ thẻ tín dụng bên thứ ba và bộ xử lý giao dịch.")
System_Boundary(ecommerce_scope, "Vùng biên lõi Thương mại điện tử") {
Container(frontend_app, "Ứng dụng Web Giao diện Cửa hàng", "Next.js, React", "Cung cấp tài sản tĩnh và xử lý các phiên giỏ hàng người dùng.")
Container(checkout_service, "Dịch vụ vi mô Thanh toán", "Node.js, Express", "Xử lý quy trình giỏ hàng và tính toán thuế.")
ContainerDb(order_db, "Cơ sở dữ liệu Sổ ghi chép Đơn hàng", "PostgreSQL", "Lưu trữ các dòng giao dịch lịch sử và các bản ghi sổ sách bảo mật.")
}
%% Các đường tương tác kiến trúc
Rel(customer, frontend_app, "Xem sản phẩm và đặt hàng bằng cách sử dụng", "HTTPS/Trình duyệt")
Rel_Down(frontend_app, checkout_service, "Gửi các giao dịch dữ liệu mua hàng qua", "JSON/REST API")
Rel_Right(checkout_service, order_db, "Lưu trạng thái giao dịch bên trong", "SQL/Kết nối JDBC")
Rel_Left(checkout_service, payment_gateway, "Xác thực các cuộc gọi nạp tiền được mã hóa với", "API TLS/HTTPS An toàn")
Những lỗi cú pháp phổ biến & Các giới hạn hệ thống
Khi biên dịch các bản đồ C4 sạch cho các khung phần mềm, hãy lưu ý những tham số thực thi này để tránh làm hỏng sơ đồ:
- Định dạng dấu phẩy ngăn cách: Khác với hầu hết các sơ đồ Mermaid khác, các macro C4 yêu cầu dấu phẩy nghiêm ngặt giữa các tham số:
Person(id, "Nhãn", "Mô tả"). Bỏ quên dấu phẩy ngăn cách sẽ khiến trình xây dựng bố cục bị sập hoàn toàn. - Dấu ngoặc kép cho nhãn đã được bảo lưu: Các trường hiển thị, thẻ công nghệ và các khối mô tả bên trong macro *phải* được bao quanh bằng dấu ngoặc kép rõ ràng. Đưa văn bản thô vào các trường mà không có bao bọc bằng dấu ngoặc kép sẽ gây ra lỗi phân tích cú pháp làm hỏng sơ đồ.
- Thứ tự lồng ghép biên giới: Khi bao bọc các phần tử bên trong một
System_BoundaryhoặcEnterprise_Boundarykhối, bạn phải làm trống nội dung không gian làm việc của nó một cách rõ ràng bằng các dấu ngoặc nhọn chuẩn{ }. Để dấu ngoặc biên giới mở hoặc ghép chúng sai sẽ làm hỏng bố cục hiển thị. - Khởi tạo biệt danh động: Bạn không thể vẽ các mối quan hệ (
Rel) đến một định danh biệt danh chưa được khai báo rõ ràng bởi một khối macro phần tử phía trên nó. Hãy duy trì luồng khai báo của bạn chạy liên tục từ trên xuống dưới.