Sơ đồ Sankey là công cụ trực quan hóa rất hiệu quả, được sử dụng để mô tả dòng chảy định hướng của các lượng giữa các nút riêng biệt trong một hệ thống. Bằng cách thay đổi độ rộng vật lý của các liên kết kết nối theo tỷ lệ với thể tích luồng số liệu, chúng giúp các kỹ sư, chuyên viên phân tích và đội ngũ vận hành nhận diện ngay lập tức các yếu tố đóng góp chính, phân bổ nguồn lực, các điểm bất hiệu quả hoặc rò rỉ trong các mạng lưới phức tạp như lưới điện, chuỗi cung ứng và danh mục đầu tư tài chính.
Cấu trúc cú pháp cơ bản
Các định nghĩa bố cục Sankey được xây dựng dựa trên định dạng cấu trúc CSV (giá trị phân cách bởi dấu phẩy) 3 cột đã được tối ưu hóa. Mỗi tệp bắt đầu bằng một trong hai dòng khai báo loại sankey hoặc sankey-beta khai báo kiểu, theo sau là các dòng luồng riêng lẻ tuân theo nghiêm ngặt mẫu Nguồn, Mục tiêu, Giá trị mẫu.
sankey
Nút nguồn, Nút đích, 150.50
Nút đích, Nút đầu ra cuối cùng, 90.25
Tham chiếu cú pháp
Bảng dưới đây phân tích các quy tắc dữ liệu chính và tham số cần thiết để phân tích chính xác sơ đồ Sankey trong Mermaid.js.
| Yếu tố 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 lực bố cục hiển thị luồng. Chấp nhận sankey hoặc sankey-beta chuỗi. |
| Nút nguồn | Nhãn chuỗi | Danh mục nguồn nơi luồng tài nguyên bắt đầu. Định danh phân biệt chữ hoa chữ thường. |
| Nút đích | Nhãn chuỗi | Nút nhận nơi thể tích liên kết cụ thể kết thúc. |
| Giá trị | Số thực dương / Số nguyên dương | Trọng số số học của luồng. Độ dày của đường dẫn được hiển thị được tính toán trực tiếp dựa trên giá trị này. |
| Dòng chú thích | Chỉ báo cú pháp | Mọi văn bản đi kèm dấu phần trăm kép (“%%) sẽ bị bỏ qua bởi trình biên dịch, cho phép chú thích dữ liệu sạch sẽ. |
Xử lý các ký tự đặc biệt trong nhãn nút
Vì dấu phẩy và dấu ngoặc kép đóng vai trò là các ký hiệu phân cách cấu trúc trong bộ xử lý bố cục, các đầu vào đặt tên chuyên biệt yêu cầu các kỹ thuật trốn đặc biệt để đảm bảo chúng hiển thị đúng trên bảng canvas phía trước.
1. Dấu phẩy trong tên
Nếu một nhãn nút cụ thể yêu cầu dấu phẩy thực sự, hãy bao bọc toàn bộ container chuỗi nút bằng một cặp dấu ngoặc kép chuẩn:
sankey
Khoán ngân sách,"Hoạt động, Lương và Hành chính",45000
2. Dấu ngoặc kép trong tên
Để hiển thị rõ ràng dấu ngoặc kép bên trong tên nhãn, hãy bao bọc tham số tổng thể bằng dấu ngoặc kép ngoài, và sử dụng cặp dấu ngoặc kép lặp lại (“"") bên trong chuỗi giá trị mục tiêu:
sankey
Cụm máy chủ,"Nút ""Cạnh"" Nội bộ",850
Cấu hình chủ đề nâng cao (Chỉ thị)
Bạn có thể tinh chỉnh cách trình bày sơ đồ của mình bằng cách truyền một khối cấu hình frontmatter ở đầu đoạn văn bản tài liệu. Điều này cho phép bạn kiểm soát kiểu liên kết, lề bố cục, kiểu chữ và căn chỉnh các phần tử trực tiếp từ trình soạn thảo văn bản thô của mình.
Ma trận thuộc tính cấu hình Sankey
| Tên thuộc tính | Giá trị được chấp nhận | Kết quả trực quan |
|---|---|---|
hiển_thị_giá_trị |
đúng | sai |
Bật/tắt việc in văn bản giá trị luồng số học trực tiếp bên trong các hộp nhãn nút. |
màu_liên_kết |
'nguồn' | 'mục_tiêu' | 'dải_màu' | '#hex' |
Xác định ánh xạ màu cho các đường nối liên kết.'dải_màu' trộn màu một cách mượt mà giữa các thực thể kết nối. |
căn_đều_nút |
'căn_đều' | 'trái' | 'phải' | 'giữa' |
Căn chỉnh các cột cấu trúc trên lưới không gian bảng vẽ. |
phong_cách_nhãn |
'cổ_điển' | 'được viền' |
'được viền' thêm một mặt nạ viền nền phía sau văn bản để đảm bảo khả năng quét cao trên các bố cục phức tạp. |
nodeWidth |
Số nguyên (Pixel) | Thiết lập chiều rộng của các hình chữ nhật nút (Mặc định: 10). |
nodePadding |
Số nguyên (Pixel) | Thiết lập các tham số khoảng cách dọc giữa các hàng chồng lên nhau (Mặc định: 12). |
Bản thiết kế thực tế: Phân phối lưới điện năng lượng sạch
Bản thiết kế toàn diện này theo dõi hệ thống quản lý lưới điện cơ sở hạ tầng. Nó thể hiện các cấu hình frontmatter—thiết lập độ dốc màu liên kết mượt mà, phong cách chữ viền, và vô hiệu hóa đếm số liệu ngay trên dòng—kết hợp với cấu trúc bố cục đa tầng.
---
config:
sankey:
showValues: false
linkColor: 'gradient'
nodeAlignment: 'justify'
labelStyle: 'outlined'
nodeWidth: 15
nodePadding: 18
---
sankey
%% Dữ liệu hàng nguồn
Trang trại năng lượng mặt trời, Lưới lưu trữ điện, 120.50
Tuabin gió, Lưới lưu trữ điện, 180.75
Nhà máy thủy điện, Đường dây công nghiệp trực tiếp, 210.00
Nhập khẩu nhiên liệu sinh học, Trạm dự phòng nhiệt, 45.25
%% Nút phân phối
Lưới lưu trữ điện, Đường dây tiêu dùng dân cư, 145.00
Lưới lưu trữ điện, Đường dây công nghiệp trực tiếp, 110.25
Lưới lưu trữ điện, Tổn thất hệ thống & Phân tán, 46.00
%% Nút kết thúc giao hàng cuối cùng
Đường dây công nghiệp trực tiếp, Trung tâm sản xuất công nghiệp nặng, 295.00
Đường dây công nghiệp trực tiếp, Các khu vực bán lẻ thương mại, 25.25
Trạm dự phòng nhiệt, Các khu vực bán lẻ thương mại, 45.25
Những lỗi cú pháp phổ biến & Giới hạn hệ thống
Khi biên dịch các mảng dữ liệu dày đặc, một vài lỗi cấu hình tinh tế sẽ gây ra lỗi phân tích bố cục. Hãy ghi nhớ các quy tắc khắc phục sự cố sau:
- Xác minh cột chính xác: Mỗi dòng mục dữ liệu theo sau khai báo tiêu đề chính phải chứa chính xác ba tham số được phân tách bằng dấu phẩy. Việc thêm cột thứ tư hoặc thiếu trọng số giá trị sẽ hoàn toàn làm dừng biên dịch sơ đồ.
- Cho phép dòng trống: Khác với các quy tắc phân tích dữ liệu cứng nhắc truyền thống, Mermaid cho phép bạn thêm các dòng trống, sạch bên trong khối mã để tách biệt logic các tầng khác nhau hoặc các giai đoạn xử lý dữ liệu mô hình của bạn.
- Khối vòng lặp vòng: Các cấu trúc Sankey được thiết kế nghiêm ngặt dựa trên các Đồ thị Có hướng Không chu trình (DAG). Nếu bạn kết nối Nút A với Nút B, rồi cố gắng viết một đường đi dòng kết nối Nút B quay trở lại Nút A, toán học của bộ xử lý bố cục sẽ gặp sự cố hồi tiếp và báo lỗi.
- Giới hạn dữ liệu giá trị: Các trường giá trị chỉ có thể xử lý các số dương. Các giá trị âm hoặc ký tự chữ cái nguyên bản không thể được hiển thị thành tham số chiều rộng.