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

Sơ đồ khối là một bộ động lực bố cục có cấu trúc được sử dụng để biểu diễn các kiến trúc phần mềm phức tạp, các nền tảng phần cứng hoặc các mô hình tổ chức. Được giới thiệu sẵn trong Mermaid.js, bộ phậnblockđộng cơ xử lý bề mặt bố cục như một ma trận lưới toán học tuyệt đối. Điều này cung cấp kiểm soát chính xác về căn chỉnh cột, các ranh giới lồng ghép bố cục riêng biệt, các khối khoảng cách cấu trúc và các cấu hình kết nối cổng cạnh rõ ràng.

Hiểu về chiến lược ma trận lưới

Khác với các sơ đồ luồng dạng tự do tiêu chuẩn, nơi mà bố cục được suy đoán động, sơ đồ khối được xây dựng trên một hệ thống lưới tọa độ tuyến tính cứng nhắc:

• Ngưỡng cột:Bạn thiết lập một trần ngang nghiêm ngặt bằng cách sử dụngcolumnstham số điều chỉnh. Khi lưới đầy các khối, các phần tử bổ sung sẽ tự động cuộn sang hàng tiếp theo một cách gọn gàng.
• Định cỡ theo các trường lưới:Mặc định, mỗi khối chiếm một ô tọa độ duy nhất ($1 times 1$). Bạn có thể thay đổi hành vi này bằng cách gán chiều rộng cột rõ ràng để các phần tử bao phủ chính xác qua nhiều đường dẫn.

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

Mọi bố cục đều bắt đầu bằngblocktiêu đề khai báo. Tiếp theo là việc thiết lập dung lượng chiều rộng hàng bằng từ khóacolumnsvà khai báo các khối trên các dòng liên tiếp.

block
  columns 3
  componentA["Khối đầu tiên"]
  componentB["Khối giữa"]
  componentC["Khối bên phải"]

Tham chiếu cú pháp

Bảng dưới đây phân tích các tham số dữ liệu nền tảng, các từ khóa định dạng tùy chỉnh và các container cấu trúc được bộ thông dịch khối nhận diện một cách tự nhiên.

Tính năng nâng cao: Kích thước khối rõ ràng & Bộ điều chỉnh khoảng cách

Đối với bố cục bất đối xứng, bạn có thể truyền các thông số kích thước ngang rõ ràng trực tiếp lên các khối chuẩn hoặc bộ chia khoảng cách bằng cách sử dụng ký hiệu dấu hai chấm làm dấu phân cách (:chiều rộng). Điều này buộc các phần tử phải kéo dài qua nhiều vị trí lưới một cách rõ ràng.

block
  cột 4
  wideComponent["Tiêu đề Bảng điều khiển rộng"]:4
  leftBar["Thanh bên"] space:2 rightBar["Bảng chính"]

Tính năng nâng cao: Loại cạnh, Hướng và Tùy chọn kết nối

Các kết nối bên trong blockđộng cơ được chia thành các đường ngữ nghĩa chuẩn và các mũi tên khối bố cục cấu trúc. Các đường kết nối chuẩn hỗ trợ xác định ràng buộc hướng rõ ràng để chỉ định cách các đường bao quanh các phần tử.

1. Bộ nối đường chuẩn

Các kết nối khối sử dụng các toán tử liên kết chuẩn (-->, --, <-->). Tuy nhiên, bạn có thể điều khiển luồng bằng cách thêm hướng đi hoặc tham số điều chỉnh bên trong dấu ngoặc đơn:

• A --> B : Vẽ một đường hướng đi tiêu chuẩn từ phần tử A đến phần tử B.
• A -- x B : Vẽ một đường kết nối kết thúc bằng dấu “X” cho thấy đường đi bị chặn.
• A -- o B : Vẽ một đường kết nối kết thúc bằng điểm nối hình tròn mở.

2. Mũi tên khối bố cục động

Mũi tên khối được xử lý như các thành phần bố cục thực tế, chiếm một khối chỉ số tọa độ thực tế trong ma trận ngân sách hàng của bạn. Chúng sử dụng các thuộc tính cú pháp lớn hơn và nhỏ hơn để ánh xạ các đường đi vật lý:

block
  columns 3
  producer["Người sản xuất Dữ liệu"]
  midArrow<["Chuyển đổi Lưu lượng"]>(right)
  consumer["Người tiêu thụ Dữ liệu"]

Tính năng nâng cao: Đóng gói ma trận khối con (Nhóm hợp thành)

Phần block:idbọc chức năng như một môi trường ngữ cảnh hộp bố cục tách biệt. Một container nhóm ứng dụng có thể thiết lập số cột ngang riêng biệt bên trong một khối con, cho phép các thành phần phức tạp được nhóm chặt chẽ mà không ảnh hưởng đến khoảng cách của lưới bố cục mẫu canvas cha toàn cục.

block
  columns 2
  rootGateway["Cổng toàn cầu"]
  
  block:microserviceCluster
    columns 3
    auth["Nút Xác thực"]
    api["API Lõi"]
    worker["Động cơ Người làm việc"]
  end

Bản thiết kế thực tế: Cơ sở hạ tầng đa tầng với bộ nhớ đệm

Bản thiết kế toàn diện, đa hàng này minh họa một cấu hình cơ sở hạ tầng sản xuất sạch sẽ. Nó thiết lập bố cục lưới xử lý 3 cột, sử dụng các thành phần cấu trúcspace các phần tử để tách biệt tầng cơ sở dữ liệu, ánh xạ một đường đi dày xuống phía dướiblockArrow, và tách biệt một bộ chứa hệ thống con nội bộ riêng biệt bằng cách nhúng block:id ... end bao bọc tổng hợp.

block
  columns 3

  %% Row 1: Dịch vụ đầu vào
  dnsClient(("Khách hàng Web"))
  loadBalancer["Cân bằng tải biên"]
  space

  %% Row 2: Luồng kết nối đi xuống các Microservices
  space
  downRoute<["Chuyển tiếp lưu lượng"]>(down)
  space

  %% Row 3: Khối môi trường ứng dụng tổng hợp
  block:appCluster
    columns 2
    authService["Xác thực"]
    apiEngine["Thợ làm việc API cốt lõi"]
  end
  space
  database[("Cơ sở dữ liệu PostgreSQL")]

  %% Thiết lập các đường căn chỉnh cấu trúc rõ ràng giữa các ma trận
  loadBalancer --> appCluster
  appCluster --> database

Những lỗi cú pháp phổ biến & Giới hạn hệ thống

Khi biên dịch các bản đồ ma trận lưới chính xác, hãy lưu ý các kiểm tra xác thực sau để tránh lỗi phân tích cú pháp:

• Thực thi ngân sách cột:Hãy theo dõi cẩn thận số lượng cột của bạn. Nếu bạn chỉ định columns 3 và viết 4 khối tuần tự trên một hàng, khối thứ tư sẽ tự động chuyển xuống hàng thứ 2, điều này có thể làm hỏng các đường kết nối theo chiều trái sang phải mong muốn.
• Thứ tự lồng ghép tổng hợp: Khi xây dựng các bộ chứa bên trong bằng cách sử dụng block:id, bạn luôn phải đóng kín không gian làm việc lưới con bằng cách sử dụng từ khóa end trên một dòng riêng biệt trước khi khai báo các phần tử tiếp theo. Không đóng khối sẽ làm dừng việc xây dựng sơ đồ.
• Hạn chế mục tiêu mũi tên khối: Thuộc tính hướng được đóng trong dấu ngoặc đơn sau mũi tên khối (ví dụ như (up), (down)) phải là một từ khóa viết thường khớp chính xác với từ khóa hệ thống. Viết hoa từ hướng sẽ dẫn đến lỗi xử lý.
• Xung đột biên nhãn: Các bộ trang trí hình dạng sơ đồ luồng chuẩn (như dấu ngoặc đơn () cho các hộp tròn hoặc dấu ngoặc nhọn {} đối với kim cương) được hỗ trợ hoàn toàn. Đảm bảo tất cả nhãn văn bản hiển thị bên trong các hình dạng sử dụng dấu ngoặc kép sạch để tránh loại bỏ ký tự.