Hướng dẫn cú pháp và bố cục sơ đồ kiến trúc Mermaid.js

Sơ đồ kiến trúc cung cấp bản vẽ cấu trúc được các kiến trúc sư hệ thống và nhóm DevOps sử dụng để trực quan hóa các thiết lập hạ tầng, các dịch vụ vi mô đám mây và cấu hình bố cục cấu trúc. Được xây dựng trên nền tảng architecture-beta động cơ, công cụ dựa trên văn bản này thay thế các công cụ kéo thả thủ công bằng cách tự động sắp xếp các nhóm dịch vụ cấu trúc, cụm cơ sở dữ liệu, cổng giao tiếp và các đường đi ở biên thành các bố cục hệ thống sạch sẽ, có thể dự đoán được.

Cấu trúc cú pháp cơ bản

Mỗi sơ đồ bắt đầu bằng phần khai báo architecture-betatiêu đề khai báo. Bạn điền đầy bảng vẽ bằng cách xác định các phần tử nút riêng lẻ bằng từ khóa servicetừ khóa, và ánh xạ các đường kết nối bằng cách xác định các cổng tọa độ hướng chính xác (Tp, Bottom, Left, Right) được phân cách bởi dấu hai chấm và dấu gạch đôi.

architecture-beta
  service gateway(internet)[Nhãn Cổng]
  service server(server)[Máy chủ Ứng dụng]
  
  gateway:B -- T:server

Tham chiếu cú pháp

Bảng dưới đây phân tích các thành phần dữ liệu chính, từ khóa định dạng và thuộc tính kết nối được sử dụng để xây dựng bản đồ không gian làm việc kiến trúc trong Mermaid.js.

Thành phần cú pháp Yêu cầu kiểu Mô tả và quy tắc sử dụng
Khai báo Định danh từ khóa Khởi tạo bảng vẽ không gian làm việc bản đồ hạ tầng. Phải sử dụng chính xác kiến trúc-beta khối.
Nút dịch vụ Từ khóa + Khối nhận diện Khai báo một thực thể kiến trúc. Sử dụng cú pháp: dịch vụ id(icon)[Nhãn hiển thị].
Bao bọc nhóm Từ khóa chứa Nhóm các dịch vụ liên quan bên trong một container trực quan. Sử dụng cú pháp: nhóm id(icon)[Nhãn nhóm].
Từ khóa Trong Toán tử gán Gán rõ ràng một nút dịch vụ để nằm bên trong một bao bọc nhóm đã khai báo cụ thể: dịch vụ id(icon)[Nhãn] trong groupId.
Nút giao điểm Trình xác định từ khóa Thiết lập một điểm trung tâm định hướng cấu trúc dùng để định tuyến gọn gàng các đường nối phức tạp, đa hướng: id giao điểm.
Cạnh kết nối Toán tử hướng cổng Cấu hình các đường theo dõi định hướng bằng cách cố định đường nối vào các cạnh cụ thể của nút (T, B, L, R): nguồn:side -- side:đích. Hỗ trợ đầu mũi tên định hướng (-->).

Nhóm nâng cao và định tuyến cạnh cổng

Để kiểm soát chính xác cách các liên kết di chuyển giữa các thành phần mà không gây lộn xộn, bộ xử lý kiến trúc yêu cầu các kết nối cổng rõ ràng. Các nút liên quan có thể được tổ chức bên trong các nhóm cấu trúc để làm rõ ranh giới hệ thống.

1. Quy tắc kết nối cổng chính xác

Bạn xác định nơi một đường kết nối rời khỏi và đi vào một thành phần bằng cách thêm dấu hai chấm và cờ hướng cạnh (“T, D, Tr, Ph) vào các định danh nút tương ứng:

  • db:Ph -- Tr:server : Đường nối rời khỏi **Phải** của cơ sở dữ liệu và đi vào **Trái** của máy chủ dưới dạng đường thẳng ngang.
  • db:T -- Tr:server : Đường nối rời khỏi **Trên** của cơ sở dữ liệu và đi vào **Trái** của máy chủ, uốn cong tự động tại góc khuỷu 90° gọn gàng.
  • src:D --> T:proc : Đường nối rời khỏi **Dưới** của nút nguồn và đi xuống vào **Trên** của bộ xử lý với đầu mũi tên định hướng.

2. Cấu trúc hệ thống bằng các nhóm

Để khai báo một nhóm trực quan (như một mạng riêng ảo hoặc cụm cơ sở dữ liệu), hãy sử dụng từ khóa group và gán các nút vào nó thông qua từ khóa in sửa đổi:

architecture-beta
  group cloudNetwork(cloud)[Mạng riêng ảo]
    service auth(server)[Nút Xác thực] in cloudNetwork
    service api(server)[Điểm cuối API] in cloudNetwork


Căn chỉnh các phần tử anh em (v11.16.0+)

Khi nhiều dịch vụ khác nhau chia sẻ cùng một hành trình định tuyến cạnh (ví dụ: ba nguồn dữ liệu tách biệt đang truyền dữ liệu vào một bộ xử lý tin nhắn duy nhất), thuật toán bố cục đôi khi có thể nhóm chúng lại với nhau. Từ khóa align rowcăn chỉnh cộtcác chỉ thị buộc động cơ phân bố các phần tử anh em đó đều nhau dọc theo một trục đường nhất định.

kiến trúc-beta
  service src1(server)[Nguồn 1]
  service src2(server)[Nguồn 2]
  service proc(server)[Trung tâm xử lý]

  src1:B --> T:proc
  src2:B --> T:proc

  căn chỉnh hàng src1 src2


Bản thiết kế thực tế: Bản thiết kế cụm Microservice

Bản thiết kế này minh họa một kiến trúc đám mây cấp doanh nghiệp, rất bền bỉ. Bằng cách đặt động cơ API chính ở trung tâm và phân nhánh xác thực cũng như các tác vụ bất đồng bộ theo chiều ngang sang hai bên, bố cục tận dụng các nguyên tắc thiết kế đối xứng để tránh các đường chồng chéo. Toàn bộ luồng dữ liệu di chuyển một cách có thể dự đoán từ cổng công cộng xuống lớp lưu trữ dữ liệu được sắp xếp gọn gàng, sử dụng cặpcăn chỉnh hàngcác chỉ thị để cố định các thành phần vào các đường ngang sắc nét, có thể dự đoán.

kiến trúc-beta
  title "Kiến trúc Microservice Khả dụng Cao"

  %% Tầng đầu vào bên ngoài
  service cloudflare(internet)[Cloudflare WAF]
  service alb(server)[Cân bằng tải ứng dụng AWS]

  %% Cụm ứng dụng cốt lõi
  group appCluster(cloud)[Microservice EKS được quản lý]
    service authService(server)[Dịch vụ Xác thực] trong appCluster
    service apiService(server)[Động cơ API Chính] trong appCluster
    service workerNode(server)[Trình xử lý Nhiệm vụ Bất đồng bộ] trong appCluster

  %% Tầng lưu trữ được bảo vệ
  group dataCluster(database)[Lớp Dữ liệu Được Bảo vệ]
    service redis(disk)[Cụm Bộ nhớ đệm Redis] trong dataCluster
    service postgres(database)[Chủ PostgreSQL] trong dataCluster

  %% 1. Luồng Thẳng đứng: Dữ liệu vào từ công cộng xuống lõi tính toán
  cloudflare:B --> T:alb
  alb:B --> T:apiService

  %% 2. Luồng Ngang: API chính phân nhánh sang trái và phải đối xứng
  apiService:L --> R:authService
  apiService:R --> L:workerNode

  %% 3. Luồng Cơ sở: Các trình xử lý ứng dụng rơi thẳng xuống các khe dữ liệu tương ứng
  authService:B --> T:redis
  workerNode:B --> T:postgres

  %% Căn chỉnh trục bố cục cho một lưới hoàn hảo
  căn chỉnh hàng authService apiService workerNode
  căn chỉnh hàng redis postgres


Những sai lầm phổ biến về cú pháp & Giới hạn hệ thống

Khi viết mã cơ sở hạ tầng, hãy ghi nhớ những quy tắc xác thực cấu hình cụ thể này để tránh lỗi phân tích cú pháp:

  • Thứ tự dấu ngoặc cho nhãn:Các chuỗi văn bản hiển thị phải sử dụng dấu ngoặc vuông[Văn bản Nhãn]và phải theo ngay sau dấu ngoặc biểu tượng mà không có khoảng trắng: service id(server)[Text]là đúng. Việc sử dụng dấu ngoặc kép bên trong dấu ngoặc sẽ làm hỏng trình phân tích cú pháp.
  • Độ nhạy chữ hoa chữ thường của cổng:Các điểm neo cổng cạnh kết nối phải được viết bằng chữ hoa (T, B, L, R). Các chữ cái thường (t, b, l, r) không được nhận diện và sẽ gây lỗi khi tạo bố cục.
  • Quy tắc khai báo trước: Mọi định danh nút hoặc giao điểm được sử dụng bên trong một câu lệnh đường đi cạnh phải được khai báo rõ ràng trên một dòng riêng biệt phía trên nó. Kết nối với tên nút ngầm định sẽ không thể xây dựng được.
  • Giới hạn thành viên căn chỉnh: Khi sử dụng lệnh căn chỉnh hàng hoặc căn chỉnh cột các chỉ thị định vị, bạn phải cung cấp ít nhất hai hoặc nhiều hơn các định danh dịch vụ hoặc giao điểm hợp lệ đã được khai báo trước đó trên dòng lệnh.
Lên đầu trang