Block Diagram
Sơ đồ khối gồm các khối và đầu nối, để trực quan biểu diễn các hệ thống, quy trình hoặc kiến trúc phức tạp. Khối biểu diễn các thành phần hoặc chức năng cơ bản, đầu nối hiển thị mối quan hệ hoặc luồng giữa các thành phần này, sơ đồ khối rất quan trọng trong nhiều lĩnh vực như kỹ thuật, phát triển phần mềm và quản lý quy trình.
Sao chép
Nhúng
block-beta
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:#f96,stroke:#333,stroke-width:4px
Mục đích sử dụng của sơ đồ khối
Mục đích chính của sơ đồ khối là cung cấp cái nhìn tổng quan về hệ thống, giúp mọi người dễ dàng hiểu và phân tích mà không cần đi sâu vào chi tiết phức tạp của từng thành phần. Điều này khiến sơ đồ khối đặc biệt hữu ích để đơn giản hóa các hệ thống phức tạp, cũng như giải thích cấu trúc tổng thể và tương tác của các thành phần trong hệ thống.
Tình huống sử dụng
Sơ đồ khối được ứng dụng rộng rãi trong nhiều ngành và lĩnh vực, chủ yếu bao gồm:
- Kiến trúc phần mềm: trong phát triển phần mềm, sơ đồ khối có thể dùng để minh họa kiến trúc của ứng dụng phần mềm. Điều này bao gồm việc hiển thị cách các mô-đun hoặc dịch vụ tương tác với nhau, luồng dữ liệu và tương tác của các thành phần cấp cao.
- Sơ đồ cấu trúc mạng: sơ đồ khối rất phù hợp để thể hiện kiến trúc mạng trong IT và viễn thông. Chúng có thể thể hiện cách các thiết bị và dịch vụ mạng khác nhau kết nối với nhau, bao gồm router, switch, tường lửa cũng như luồng dữ liệu trong mạng.
- Sơ đồ quy trình: trong kinh doanh và sản xuất, có thể dùng sơ đồ khối để tạo sơ đồ quy trình. Những sơ đồ quy trình này biểu diễn các giai đoạn của quy trình kinh doanh hoặc sản xuất, giúp trực quan hóa thứ tự các bước, điểm quyết định và luồng kiểm soát.
- Hệ thống điện: kỹ sư dùng sơ đồ khối để biểu diễn hệ thống điện và mạch điện. Chúng có thể minh họa cấu trúc cấp cao của hệ thống điện, tương tác giữa các thành phần điện khác nhau cũng như dòng chảy của dòng điện.
- Mục đích giáo dục: sơ đồ khối cũng được dùng rộng rãi trong tài liệu giáo dục, để giải thích các khái niệm và hệ thống phức tạp theo cách đơn giản hóa. Sơ đồ khối giúp phân tách và trực quan hóa các lý thuyết khoa học, nguyên lý kỹ thuật và hệ thống công nghệ.
Tiếp theo, chúng ta sẽ đi sâu nghiên cứu cách tạo và thao tác sơ đồ khối bằng Mermaid, bao quát mọi thứ từ cú pháp cơ bản đến cấu hình và kiểu nâng cao.
Sơ đồ khối đơn giản
Cấu trúc cơ bản
Sơ đồ khối gồm các khối biểu diễn các thực thể hoặc thành phần khác nhau, trong Mermaid có thể dễ dàng tạo khối bằng nhãn văn bản đơn giản. Hình thức cơ bản nhất của sơ đồ khối có thể là một loạt các khối không có bất kỳ đường kết nối nào.
Ví dụ sơ đồ khối đơn giản: để tạo một sơ đồ khối đơn giản gồm ba khối được đánh dấu là a, b và c, cú pháp như sau:
Sao chép
Nhúng
block-beta
a b c
Đoạn mã này sẽ tạo ra ba khối xếp theo chiều ngang, mỗi khối sẽ tự động được tạo khoảng cách và căn chỉnh, để đạt khả năng đọc tốt nhất.
Định nghĩa số cột cần sử dụng
Biểu đồ nhiều cột
Mặc dù sơ đồ khối đơn giản là tuyến tính và đơn giản, nhưng các hệ thống phức tạp hơn có thể cần bố cục có cấu trúc. Mermaid cho phép tổ chức các khối thành nhiều cột, từ đó giúp tạo các biểu đồ phức tạp và chi tiết hơn.
Ví dụ biểu đồ nhiều cột: trong trường hợp cần phân bố các khối ra nhiều cột, có thể chỉ định số cột và sắp xếp các khối tương ứng. Dưới đây là cách tạo sơ đồ khối có ba cột và bốn khối, trong đó khối thứ tư xuất hiện ở hàng thứ hai:
Sao chép
Nhúng
block-beta
columns 3
a b c d
Cú pháp này khiến Mermaid sắp xếp các khối a, b, c và d thành ba cột, và ngắt dòng sang hàng tiếp theo khi cần. Tính năng này đặc biệt hữu ích để biểu diễn các hệ thống phân cấp hoặc nhiều tầng.
Cấu hình khối nâng cao
Cú pháp nâng cao của Mermaid mang lại cho việc thiết kế biểu đồ tính linh hoạt và độ phức tạp lớn hơn, có thể thích ứng với nhiều trường hợp sử dụng và tình huống rộng hơn.
Điều chỉnh chiều rộng khối
Trải rộng qua nhiều cột
Trong các biểu đồ phức tạp hơn, bạn có thể cần các khối trải rộng qua nhiều cột, để nhấn mạnh một số thành phần hoặc biểu diễn các thực thể lớn hơn. Mermaid cho phép điều chỉnh chiều rộng khối để bao nhiều cột, từ đó nâng cao khả năng đọc và tính cấu trúc của biểu đồ.
Ví dụ: để tạo một khối trải rộng qua hai cột, bạn có thể chỉ định chiều rộng mong muốn cho mỗi khối:
Sao chép
Nhúng
block-beta
columns 3
a["A label"] b:2 c:2 d
Trong ví dụ này, khối được đánh dấu là A label chiếm một cột, còn các khối b, c trải rộng qua 2 cột, d được phân vào cột riêng của nó. Tính linh hoạt về kích thước khối này rất quan trọng để biểu diễn chính xác các hệ thống có thành phần với mức độ quan trọng hoặc kích thước khác nhau.
Tạo khối phức hợp
Khối lồng nhau
Khối phức hợp cho phép biểu diễn các hệ thống lồng nhau hoặc phân cấp, trong đó một thành phần chứa nhiều thành phần con.
Ví dụ: tạo khối phức hợp bao gồm việc định nghĩa khối cha, rồi lồng các khối con vào trong đó. Dưới đây là cú pháp định nghĩa khối phức hợp có các phần tử lồng nhau:
Sao chép
Nhúng
block-beta
block
D
end
A["A: I am a wide one"]
Trong cú pháp này, D là một khối con được lồng trong khối cha lớn hơn. Tính năng này đặc biệt hữu ích để mô tả các cấu trúc phức tạp, ví dụ một máy chủ có nhiều dịch vụ hoặc một bộ phận trong khung tổ chức lớn hơn.
Chiều rộng cột tự động
Điều chỉnh chiều rộng
Mermaid cho phép điều chỉnh chiều rộng cột một cách linh động theo nội dung của khối. Chiều rộng của cột được xác định bởi khối rộng nhất trong cột, đảm bảo biểu đồ giữ được sự cân đối và dễ đọc.
Ví dụ: trong biểu đồ có kích thước khối khác nhau, Mermaid sẽ tự động điều chỉnh chiều rộng cột để phù hợp với khối lớn nhất trong mỗi cột.
Sao chép
Nhúng
block-beta
columns 3
a:3
block:group1:2
columns 2
h i j k
end
g
block:group2:3
%% columns auto (default)
l m n o p q r
end
Ở đây minh họa cách Mermaid điều chỉnh linh động chiều rộng cột để phù hợp với khối rộng nhất.
Hợp nhất khối theo chiều ngang: trong trường hợp cần xếp chồng các khối theo chiều ngang, có thể dùng chiều rộng cột để hoàn thành tác vụ. Dưới đây là cú pháp sơ đồ khối tạo 4 khối xếp chồng lên nhau:
Sao chép
Nhúng
block-beta
block
columns 1
a["A label"] b c d
end
Trong ví dụ này, chiều rộng của khối hợp nhất sẽ tự động được điều chỉnh thành chiều rộng của khối con lớn nhất.
Các loại và hình dạng khối
Sơ đồ khối Mermaid không giới hạn ở hình chữ nhật chuẩn. Mermaid cung cấp nhiều hình dạng khối, từ đó có thể biểu diễn chi tiết và cá nhân hóa hơn các loại thông tin hoặc thực thể khác nhau.
Hình dạng khối chuẩn
Hình chữ nhật bo góc
Tạo ô hình chữ nhật bo góc, có thể dùng để biểu diễn thành phần mềm dẻo hoặc linh hoạt hơn:
Sao chép
Nhúng
block-beta
id1("This is the text in the box")
Hình sân vận động
Khối hình sân vận động có thể dùng để biểu diễn các thành phần hướng quy trình:
Sao chép
Nhúng
block-beta
id1(["This is the text in the box"])
Hình dạng lưu đồ con
Dùng để biểu diễn lưu đồ con hoặc quy trình được bao gồm, được biểu diễn bằng khối hình chữ nhật có hai đường thẳng đứng:
Sao chép
Nhúng
block-beta
id1[["This is the text in the box"]]
Hình trụ
Hình trụ rất phù hợp để biểu diễn cơ sở dữ liệu hoặc thành phần lưu trữ:
Sao chép
Nhúng
block-beta
id1[("Database")]
Hình tròn
Hình tròn có thể dùng để biểu diễn các thành phần tập trung hoặc then chốt:
Sao chép
Nhúng
block-beta
id1(("This is the text in the circle"))
Hình dạng bất đối xứng, hình thoi và hình lục giác
Đối với quyết định thì dùng hình thoi, đối với quy trình độc đáo hoặc chuyên biệt, có thể dùng hình bất đối xứng và hình lục giác:
Hình dạng bất đối xứng
Sao chép
Nhúng
block-beta
id1>"This is the text in the box"]
Sao chép
Nhúng
block-beta
id1{"This is the text in the box"}
Sao chép
Nhúng
block-beta
id1{{"This is the text in the box"}}
Hình bình hành và hình thang
Hình bình hành và hình thang rất phù hợp cho luồng nhập / xuất và chuyển tiếp
Sao chép
Nhúng
block-beta
id1[/"This is the text in the box"/]
id2["This is the text in the box"]
A[/"Christmas"]
B["Go shopping"/]
Hai vòng tròn
Để tô sáng các thành phần then chốt hoặc có mức ưu tiên cao, dùng hai vòng tròn sẽ rất hiệu quả:
Sao chép
Nhúng
block-beta
id1((("This is the text in the circle")))
Khối mũi tên và khối trống
Khối mũi tên
Mũi tên khối có thể trực quan hiển thị hướng hoặc luồng trong quy trình:
Sao chép
Nhúng
block-beta
blockArrowId<["Label"]>(right)
blockArrowId2<["Label"]>(left)
blockArrowId3<["Label"]>(up)
blockArrowId4<["Label"]>(down)
blockArrowId5<["Label"]>(x)
blockArrowId6<["Label"]>(y)
blockArrowId6<["Label"]>(x, down)
Khối trống
Khối trống có thể dùng để tạo khoảng trắng, điều này hữu ích cho bố cục và khả năng đọc:
Sao chép
Nhúng
block-beta
columns 3
a space b
c d e
Sao chép
Nhúng
block-beta
ida space:3 idb idc
Lưu ý, bạn có thể dùng ký hiệu số space:num để đặt số cột mà khối trống chiếm, trong đó num biểu thị giá trị chiều rộng cột. Bạn cũng có thể dùng space, mặc định là một cột.
Các hình dạng chuẩn và hình dạng đặc biệt trong Mermaid nâng cao khả năng biểu đạt của sơ đồ khối, giúp nó biểu diễn chính xác hơn và giàu ngữ cảnh hơn.
Kết nối các khối bằng đường
Một đặc điểm then chốt của sơ đồ khối Mermaid là khả năng dùng nhiều loại đường hoặc liên kết khác nhau để kết nối các khối.
Kết nối cơ bản và loại mũi tên
Kết nối các khối cần dùng mũi tên hoặc đường. Những đầu nối này mô tả mối quan hệ hoặc luồng thông tin giữa các khối. Mermaid cung cấp một loạt loại mũi tên để đáp ứng các nhu cầu biểu đồ khác nhau.
Liên kết cơ bản
Tạo một liên kết đơn giản có mũi tên, hiển thị hướng hoặc luồng từ khối này sang khối khác:
Sao chép
Nhúng
block-beta
A space B
A-->B
Ví dụ này minh họa kết nối trực tiếp từ khối A đến khối B.
Văn bản trên liên kết
Ngoài việc kết nối các khối, thường còn cần mô tả hoặc đánh dấu mối quan hệ. Mermaid cho phép thêm văn bản trên liên kết, để cung cấp ngữ cảnh cho liên kết.
Để thêm văn bản vào liên kết, cú pháp là bao gồm văn bản đó trong định nghĩa liên kết:
Sao chép
Nhúng
block-beta
A space:2 B
A-- "X" -->B
Sao chép
Nhúng
block-beta
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:pink,stroke:#333,stroke-width:4px
Kiểu và tùy chỉnh
Ngoài cấu trúc và bố cục của sơ đồ khối, Mermaid còn cung cấp lượng lớn tùy chọn tạo kiểu, những chức năng tùy chỉnh này cho phép tạo ra các biểu đồ có đặc trưng trực quan và giàu thông tin hơn.
Kiểu cho từng khối riêng lẻ
Mermaid có thể tạo kiểu chi tiết cho từng khối riêng lẻ, bạn có thể áp dụng nhiều thuộc tính CSS khác nhau, ví dụ màu sắc, nét vẽ và độ dày viền.
Tùy chỉnh kiểu cho từng khối riêng lẻ
Để áp dụng kiểu tùy chỉnh cho một khối, bạn có thể dùng cú pháp style, theo sau là mã định danh khối và các thuộc tính CSS mong muốn:
Sao chép
Nhúng
block-beta
id1 space id2
id1("Start")-->id2("Stop")
style id1 fill:pink,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
Kiểu lớp
Mermaid hỗ trợ áp dụng kiểu cho lớp. Nếu bạn muốn áp dụng một nhóm kiểu cụ thể cho nhiều phần tử, thì dùng thiết lập kiểu sẽ dễ hơn, vì bạn chỉ cần liên kết các phần tử đó vào một lớp.
Đặt kiểu cho một lớp riêng lẻ
Sao chép
Nhúng
block-beta
A space B
A-->B
classDef blue fill:pink,stroke:#333,stroke-width:4px;
class A blue
style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
Ở đây, định nghĩa một lớp tên là blue và áp dụng nó cho khối A, còn khối B nhận kiểu riêng.
Trường hợp sử dụng
Khi các biểu đồ dạng mô-đun của sơ đồ khối Mermaid được áp dụng vào tình huống thực tế, tính đa năng của nó được thể hiện rõ rệt.
Ví dụ chi tiết về các chức năng khác nhau
Thông qua các phần tử cấu trúc, liên kết và kiểu, chúng ta có thể tạo ra các sơ đồ khối Mermaid đảm nhận vai trò cụ thể trong các tình huống khác nhau.
Kiến trúc hệ thống
Dưới đây là một kiến trúc hệ thống phần mềm đơn giản có các thành phần liên kết với nhau:
Sao chép
Nhúng
block-beta
columns 3
Frontend blockArrowId6<[" "]>(right) Backend
space:2 down<[" "]>(down)
Disk left<[" "]>(left) Database[("Database")]
classDef front fill:pink,stroke:#333;
classDef back fill:#f96,stroke:#333;
class Frontend front
class Backend,Database back
Ví dụ này thể hiện một kiến trúc cơ bản gồm frontend, backend và cơ sở dữ liệu, hình thức thể hiện của mỗi khối khác nhau để phân biệt các loại thành phần khác nhau.
Quy trình kinh doanh
Dưới đây là một quy trình kinh doanh có điểm quyết định và nhiều giai đoạn:
Sao chép
Nhúng
block-beta
columns 3
Start(("Start")) space:2
down<[" "]>(down) space:2
Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
downAgain<["No"]>(down) space r3<["Done"]>(down)
Process2["Process B"] r2<["Done"]>(right) End(("End"))
style Start fill:pink;
style End fill:pink;
Những trường hợp thực tế này làm nổi bật giá trị thực tiễn của sơ đồ khối Mermaid trong việc đơn giản hóa thông tin phức tạp và đạt được giao tiếp hiệu quả giữa các lĩnh vực.
Khắc phục sự cố
Việc tạo các sơ đồ khối phức tạp bằng cú pháp Mermaid đôi khi gặp thách thức, ở đây liệt kê các lỗi cú pháp thường gặp, và cung cấp các mẹo để quản lý cấu trúc biểu đồ phức tạp hơn.
Lỗi cú pháp thường gặp
Tránh các lỗi cú pháp thường gặp là chìa khóa để sử dụng sơ đồ khối Mermaid một cách suôn sẻ.
Lỗi liên kết
Sử dụng cú pháp liên kết không chính xác có thể dẫn đến kết quả ngoài ý muốn hoặc biểu đồ bị hỏng:
Sao chép
Nhúng
block-beta
A - B
Đính chính: đảm bảo sử dụng đúng mũi tên kết nối (--> hoặc ---) các khối, nhằm định nghĩa hướng và loại kết nối. Ngoài ra, một trong những nguyên tắc cơ bản của sơ đồ khối là cho tác giả toàn quyền kiểm soát vị trí các khối, do đó trong trường hợp trên, cần thêm khoảng trắng giữa các khối:
Sao chép
Nhúng
block-beta
A space B
A --> B
Kiểu bị lệch
Áp dụng kiểu trong ngữ cảnh sai hoặc dùng cú pháp không chính xác, có thể dẫn đến việc không thể tạo kiểu như mong đợi:
Sao chép
Nhúng
block-beta
A
style A fillpink;
Đính chính: đảm bảo phân tách đúng các thuộc tính kiểu bằng dấu phẩy, và dùng đúng định dạng thuộc tính CSS để sửa cú pháp:
Sao chép
Nhúng
block-beta
A
style A fill:pink,stroke:#333;
