Định nghĩa cơ bản
Lưu đồ được cấu tạo từ các nút (hình dạng hình học) và đường kết nối (mũi tên hoặc đường). Mã Mermaid định nghĩa cách xây dựng các nút và đường kết nối, đồng thời hỗ trợ nhiều loại mũi tên, mũi tên đa hướng cũng như các liên kết tùy ý với lưu đồ con.
Cảnh báo Nếu bạn sử dụng từ "end" trong nút của lưu đồ, hãy viết hoa chữ cái đầu hoặc cả từ (ví dụ: "End" hoặc "END"), nhập toàn bộ chữ thường "end" sẽ khiến lưu đồ bị lỗi.
Cảnh báo Nếu bạn sử dụng chữ cái "o" hoặc chữ cái "x" làm chữ cái đầu khi kết nối các nút của lưu đồ, hãy thêm một dấu cách trước chữ cái hoặc viết hoa chữ cái (ví dụ: "dev--- ops", "dev---Ops").
Một nút (mặc định)
Sao chép
Nhúng
---
title: Node
---
flowchart LR
id
id chính là nội dung hiển thị trong ô.
Cú pháp tạo lưu đồ, ngoài việc sử dụng flowchart, bạn cũng có thể dùng graph.
Một nút có văn bản
Cũng có thể đặt cho ô một văn bản khác với id. Nếu thực hiện thao tác này nhiều lần, hệ thống sẽ lấy văn bản được chỉ định cuối cùng cho nút đó. Ngoài ra, nếu sau đó bạn định nghĩa đường kết nối cho nút, thì có thể bỏ qua định nghĩa văn bản; khi kết xuất ô, văn bản đã định nghĩa trước đó sẽ được sử dụng.
Sao chép
Nhúng
---
title: Node with text
---
flowchart LR
id1[This is the text in the box]
Văn bản Unicode
Dùng dấu ngoặc kép để bao quanh văn bản Unicode.
Sao chép
Nhúng
flowchart LR
id["This ❤ Unicode"]
Định dạng Markdown
Dùng dấu ngoặc kép và dấu nháy ngược để bao quanh văn bản Markdown
Sao chép
Nhúng
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
Hướng
Khai báo hướng của lưu đồ
Cho biết lưu đồ được sắp xếp từ trên xuống dưới (TD hoặc TB)
Sao chép
Nhúng
flowchart TD
Start --> Stop
Hướng của lưu đồ bao gồm:
- TB - Từ trên xuống dưới
- TD - Từ trên xuống dưới (giống với từ trên xuống dưới)
- BT - Từ dưới lên trên
- RL - Từ phải sang trái
- LR - Từ trái sang phải
Hình dạng nút
Hình chữ nhật bo góc
Sao chép
Nhúng
flowchart LR
id1(This is the text in the box)
Hình sân vận động
Sao chép
Nhúng
flowchart LR
id1([This is the text in the box])
Lưu đồ con
Sao chép
Nhúng
flowchart LR
id1[[This is the text in the box]]
Cơ sở dữ liệu
Sao chép
Nhúng
flowchart LR
id1[(Database)]
Hình tròn
Sao chép
Nhúng
flowchart LR
id1((This is the text in the circle))
Hình dạng bất đối xứng
Sao chép
Nhúng
flowchart LR
id1>This is the text in the box]
Hình thoi
Sao chép
Nhúng
flowchart LR
id1{This is the text in the box}
Hình lục giác
Sao chép
Nhúng
flowchart LR
id1{{This is the text in the box}}
Hình bình hành
Sao chép
Nhúng
flowchart TD
id1[/This is the text in the box/]
Hình bình hành ngược
Sao chép
Nhúng
flowchart TD
id1[\This is the text in the box\]
Hình thang
Sao chép
Nhúng
flowchart TD
A[/ProcessOn\]
Hình thang ngược
Sao chép
Nhúng
flowchart TD
B[\ProcessOn/]
Hai vòng tròn
Sao chép
Nhúng
flowchart TD
id1(((This is the text in the circle)))
Mở rộng hình dạng nút lưu đồ Mermaid
Mermaid đã giới thiệu 30 hình dạng mới nhằm nâng cao tính linh hoạt và độ chính xác khi tạo lưu đồ. Những hình dạng mới này cung cấp thêm nhiều lựa chọn để trực quan hóa các luồng, quyết định, sự kiện, nơi lưu trữ dữ liệu và các phần tử khác trong lưu đồ, từ đó nâng cao độ rõ ràng và ý nghĩa ngữ nghĩa.
Cú pháp mới để định nghĩa hình dạng
Mermaid hiện hỗ trợ một cú pháp tổng quát để định nghĩa loại hình dạng, nhằm thích ứng với số lượng hình dạng ngày càng tăng. Cú pháp này cho phép bạn chỉ định hình dạng cụ thể cho nút bằng một định dạng rõ ràng và linh hoạt.
Sao chép
Nhúng
A@{ shape: rect }
Cú pháp này tạo nút A thành hình chữ nhật. Cách kết xuất của nó giống với [A] hoặc A.
Danh sách đầy đủ các hình dạng nút
Dưới đây là danh sách đầy đủ các hình dạng nút mới được giới thiệu cùng ý nghĩa, tên viết tắt và bí danh tương ứng:
| Tên ngữ nghĩa | Cú pháp đồ thị | Tên viết tắt cú pháp | Cú pháp thay thế | Mô tả chi tiết |
|---|---|---|---|---|
| Thẻ | Notched Rectangle | notch-rect | card, notched-rectangle | Biểu diễn một thẻ |
| Sắp xếp | Hourglass | hourglass | collate | Biểu diễn thao tác sắp xếp |
| Đường truyền thông | Lightning Bolt | bolt | com-link, lightning-bolt | Đường truyền thông |
| Chú thích | Curly Brace | brace | brace-l, comment | Thêm chú thích |
| Chú thích bên phải | Curly Brace | brace-r | Thêm chú thích | |
| Chú thích có dấu ngoặc nhọn ở hai bên | Curly Braces | braces | Thêm chú thích | |
| Nhập hoặc xuất dữ liệu | Lean Right | lean-r | in-out, lean-right | Biểu diễn nhập hoặc xuất |
| Nhập hoặc xuất dữ liệu | Lean Left | lean-l | lean-left, out-in | Biểu diễn xuất hoặc nhập |
| Cơ sở dữ liệu | Cylinder | cyl | cylinder, database, db | Lưu trữ cơ sở dữ liệu |
| Phán định | Diamond | diam | decision, diamond, question | Bước ra quyết định |
| Độ trễ | Half-Rounded Rectangle | delay | half-rounded-rectangle | Biểu diễn độ trễ |
| Lưu trữ truy cập trực tiếp | Horizontal Cylinder | h-cyl | das, horizontal-cylinder | Lưu trữ truy cập trực tiếp |
| Lưu trữ trên đĩa | Lined Cylinder | lin-cyl | disk, lined-cylinder | Lưu trữ trên đĩa |
| Hiển thị | Curved Trapezoid | curv-trap | curved-trapezoid, display | Biểu diễn thông tin hiển thị trên màn hình, thiết bị đầu cuối và các thiết bị khác |
| Xử lý phân chia | Divided Rectangle | div-rect | div-proc, divided-process, divided-rectangle | Hình dạng xử lý phân chia |
| Tài liệu | Document | doc | document | Biểu diễn một tài liệu |
| Sự kiện | Rounded Rectangle | rounded | event | Biểu diễn một sự kiện |
| Trích xuất | Triangle | tri | extract, triangle | Quá trình trích xuất |
| Phân nhánh/Hợp nhất | Filled Rectangle | fork | join | Phân nhánh hoặc hợp nhất trong lưu đồ |
| Lưu trữ nội bộ | Window Pane | win-pane | internal-storage, window-pane | Lưu trữ nội bộ |
| Điểm kết nối | Filled Circle | f-circ | filled-circle, junction | Điểm kết nối |
| Tài liệu có đường | Lined Document | lin-doc | lined-document | Tài liệu có đường |
| Quy trình có đường/bóng | Lined Rectangle | lin-rect | lin-proc, lined-process, lined-rectangle, shaded-process | Hình dạng quy trình có đường |
| Giới hạn vòng lặp | Trapezoidal Pentagon | notch-pent | loop-limit, notched-pentagon | Bước giới hạn vòng lặp |
| Tệp thủ công | Flipped Triangle | flip-tri | flipped-triangle, manual-file | Thao tác tệp thủ công |
| Nhập thủ công | Sloped Rectangle | sl-rect | manual-input, sloped-rectangle | Bước nhập thủ công |
| Thao tác thủ công | Trapezoid Base Top | trap-t | inv-trapezoid, manual, trapezoid-top | Biểu diễn một tác vụ do con người thực hiện |
| Nhiều tài liệu | Stacked Document | docs | documents, st-doc, stacked-document | 多个文档 |
| Nhiều tiến trình | Stacked Rectangle | st-rect | processes, procs, stacked-rectangle | 多个进程 |
| Hình dạng không đều | Odd | odd | Hình dạng không đều | |
| Băng giấy | Flag | flag | paper-tape | Băng giấy |
| Điều kiện chuẩn bị | Hexagon | hex | hexagon, prepare | Bước chuẩn bị hoặc điều kiện |
| Hành động ưu tiên | Trapezoid Base Bottom | trap-b | priority, trapezoid, trapezoid-bottom | Hành động ưu tiên |
| Xử lý | Rectangle | rect | proc, process, rectangle | Hình dạng xử lý chuẩn |
| Bắt đầu | Circle | circle | circ | Điểm bắt đầu |
| Bắt đầu | Small Circle | sm-circ | small-circle, start | Điểm bắt đầu hình tròn nhỏ |
| Dừng | Double Circle | dbl-circ | double-circle | Biểu diễn điểm dừng |
| Dừng | Framed Circle | fr-circ | framed-circle, stop | Biểu diễn điểm dừng |
| Lưu trữ dữ liệu | Bow Tie Rectangle | bow-rect | bow-tie-rectangle, stored-data | Lưu trữ dữ liệu |
| Lưu đồ con | Framed Rectangle | fr-rect | framed-rectangle, subproc, subprocess, subroutine | Lưu đồ con, chương trình con |
| Tóm tắt | Crossed Circle | cross-circ | crossed-circle, summary | Tóm tắt |
| Tài liệu được gắn thẻ | Tagged Document | tag-doc | tagged-document | Tài liệu được gắn thẻ |
| Quy trình đã chuẩn hóa | Tagged Rectangle | tag-rect | tag-proc, tagged-process, tagged-rectangle | 已标准进程 |
| Điểm kết thúc | Stadium | stadium | pill, terminal | Điểm kết thúc |
| Khối văn bản | Text Block | text | Khối văn bản |
Dưới đây là ví dụ mã lưu đồ sử dụng các hình dạng mới được giới thiệu:
Sao chép
Nhúng
flowchart RL
A@{ shape: manual-file, label: "File Handling"}
B@{ shape: manual-input, label: "User Input"}
C@{ shape: docs, label: "Multiple Documents"}
D@{ shape: procs, label: "Process Automation"}
E@{ shape: paper-tape, label: "Paper Records"}
Tiến trình
Sao chép
Nhúng
flowchart TD
A@{ shape: rect, label: "This is a process" }
Sự kiện
Sao chép
Nhúng
flowchart TD
A@{ shape: rounded, label: "This is an event" }
Tiến trình con
Sao chép
Nhúng
flowchart TD
A@{ shape: subproc, label: "This is a subprocess" }
Cơ sở dữ liệu (hình trụ)
Sao chép
Nhúng
flowchart TD
A@{ shape: cyl, label: "Database" }
Bắt đầu (hình tròn)
Sao chép
Nhúng
flowchart TD
A@{ shape: circle, label: "Start" }
Hình dạng không đều
Sao chép
Nhúng
flowchart TD
A@{ shape: odd, label: "Odd shape" }
Phán định (hình thoi)
Sao chép
Nhúng
flowchart TD
A@{ shape: diamond, label: "Decision" }
Điều kiện chuẩn bị (hình lục giác)
Sao chép
Nhúng
flowchart TD
A@{ shape: hex, label: "Prepare conditional" }
Nhập/xuất dữ liệu (nghiêng sang phải)
Sao chép
Nhúng
flowchart TD
A@{ shape: lean-r, label: "Input/Output" }
Nhập/xuất dữ liệu (nghiêng sang trái)
Sao chép
Nhúng
flowchart TD
A@{ shape: lean-l, label: "Input/Output" }
Hành động ưu tiên (hình thang)
Sao chép
Nhúng
flowchart TD
A@{ shape: trap-b, label: "Priority action" }
Thao tác thủ công (hình thang ngược)
Sao chép
Nhúng
flowchart TD
A@{ shape: trap-t, label: "Manual operation" }
Dừng (hai vòng tròn)
Sao chép
Nhúng
flowchart TD
A@{ shape: dbl-circ, label: "Stop" }
Khối văn bản
Sao chép
Nhúng
flowchart TD
A@{ shape: text, label: "This is a text block" }
Thẻ (hình chữ nhật khuyết góc)
Sao chép
Nhúng
flowchart TD
A@{ shape: notch-rect, label: "Card" }
Quy trình có đường/bóng
Sao chép
Nhúng
flowchart TD
A@{ shape: lin-rect, label: "Lined process" }
Bắt đầu (hình tròn nhỏ)
Sao chép
Nhúng
flowchart TD
A@{ shape: sm-circ, label: "Small start" }
Dừng (hình tròn có khung)
Sao chép
Nhúng
flowchart TD
A@{ shape: framed-circle, label: "Stop" }
Phân nhánh/Hợp nhất (hình chữ nhật dài)
Sao chép
Nhúng
flowchart TD
A@{ shape: fork, label: "Fork or Join" }
Sắp xếp (đồng hồ cát)
Sao chép
Nhúng
flowchart TD
A@{ shape: hourglass, label: "Collate" }
Chú thích (dấu ngoặc nhọn)
Sao chép
Nhúng
flowchart TD
A@{ shape: comment, label: "Comment" }
Chú thích bên phải (dấu ngoặc nhọn bên phải)
Sao chép
Nhúng
flowchart TD
A@{ shape: brace-r, label: "Comment" }
Chú thích (có ngoặc ở cả hai bên)
Sao chép
Nhúng
flowchart TD
A@{ shape: braces, label: "Comment" }
Đường truyền thông (tia sét)
Sao chép
Nhúng
flowchart TD
A@{ shape: bolt, label: "Communication link" }
Tài liệu
Sao chép
Nhúng
flowchart TD
A@{ shape: doc, label: "Document" }
Độ trễ (hình chữ nhật bo góc nửa)
Sao chép
Nhúng
flowchart TD
A@{ shape: delay, label: "Delay" }
直接存取存储（水平圆柱）
Sao chép
Nhúng
flowchart TD
A@{ shape: das, label: "Direct access to storage" }
Lưu trữ trên đĩa (hình trụ có rãnh)
Sao chép
Nhúng
flowchart TD
A@{ shape: lin-cyl, label: "Disk storage" }
Hiển thị (hình dạng hiển thị)
Sao chép
Nhúng
flowchart TD
A@{ shape: curv-trap, label: "Display" }
Xử lý phân chia (hình chữ nhật phân chia)
Sao chép
Nhúng
flowchart TD
A@{ shape: div-rect, label: "Divided process" }
Trích xuất (tam giác nhỏ)
Sao chép
Nhúng
flowchart TD
A@{ shape: tri, label: "Extract" }
Lưu trữ nội bộ (bảng cửa sổ)
Sao chép
Nhúng
flowchart TD
A@{ shape: win-pane, label: "Internal storage" }
Điểm kết nối (hình tròn đặc)
Sao chép
Nhúng
flowchart TD
A@{ shape: f-circ, label: "Connect" }
Tài liệu có đường
Sao chép
Nhúng
flowchart TD
A@{ shape: lin-doc, label: "Lined document" }
Giới hạn vòng lặp (hình ngũ giác khuyết)
Sao chép
Nhúng
flowchart TD
A@{ shape: notch-pent, label: "Loop limit" }
Tệp thủ công (tam giác lật)
Sao chép
Nhúng
flowchart TD
A@{ shape: flip-tri, label: "Manual file" }
Nhập thủ công (hình thang vuông)
Sao chép
Nhúng
flowchart TD
A@{ shape: sl-rect, label: "Manual input" }
Nhiều tài liệu (tài liệu xếp chồng)
Sao chép
Nhúng
flowchart TD
A@{ shape: docs, label: "Multi-document" }
Nhiều tiến trình (hình chữ nhật xếp chồng)
Sao chép
Nhúng
flowchart TD
A@{ shape: processes, label: "Multiple processes" }
Băng giấy (lá cờ)
Sao chép
Nhúng
flowchart TD
A@{ shape: flag, label: "Paper tape" }
Lưu trữ dữ liệu (hình chữ nhật nơ bướm)
Sao chép
Nhúng
flowchart TD
A@{ shape: bow-rect, label: "Data stored" }
Tóm tắt (hình tròn có dấu chéo)
Sao chép
Nhúng
flowchart TD
A@{ shape: cross-circ, label: "Summary" }
Tài liệu được gắn thẻ
Sao chép
Nhúng
flowchart TD
A@{ shape: tag-doc, label: "Tagged document" }
Quy trình được đánh dấu
Sao chép
Nhúng
flowchart TD
A@{ shape: tag-rect, label: "Tagged process" }
Hình dạng đặc biệt trong lưu đồ Mermaid
Mermaid cũng giới thiệu hình ảnh để nâng cao lưu đồ của bạn, cho phép bạn đưa hình ảnh trực tiếp vào lưu đồ, từ đó cung cấp thêm bối cảnh trực quan và độ rõ ràng.
Hình dạng ảnh
Bạn có thể dùng image để chèn hình ảnh vào lưu đồ, cú pháp định nghĩa hình ảnh như sau:
Sao chép
Nhúng
flowchart TD
A@{ img: "https://www.processon.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
Tham số
- img: địa chỉ URL của hình ảnh cần hiển thị.
- label: nhãn văn bản gắn với hình ảnh, có thể là bất kỳ chuỗi nào. Nếu không định nghĩa, sẽ không hiển thị nhãn nào.
- pos: vị trí của nhãn. Nếu không định nghĩa, nhãn sẽ mặc định ở phía dưới hình ảnh.
- w: chiều rộng của hình ảnh. Nếu không định nghĩa, mặc định là chiều rộng tự nhiên của hình ảnh.
- h: chiều cao của hình ảnh. Nếu không định nghĩa, mặc định là chiều cao tự nhiên của hình ảnh.
- constraint: xác định liệu hình ảnh có giới hạn kích thước nút hay không. Cài đặt này cũng đảm bảo hình ảnh giữ nguyên tỷ lệ khung hình gốc và điều chỉnh chiều cao theo chiều rộng. Nếu không định nghĩa, mặc định là off.
Hình ảnh mang lại sự linh hoạt và sức hấp dẫn trực quan bổ sung cho lưu đồ của bạn, khiến nó trở nên giàu thông tin và hấp dẫn hơn.
Kết nối giữa các nút
Các nút có thể được kết nối bằng đường kết nối và mũi tên. Có nhiều loại liên kết khác nhau, và bạn cũng có thể gắn chuỗi văn bản vào liên kết.
Liên kết có mũi tên
Sao chép
Nhúng
flowchart LR
A-->B
Một liên kết mở
Sao chép
Nhúng
flowchart LR
A --- B
Liên kết có văn bản
Sao chép
Nhúng
flowchart LR
A-- This is the text! ---B
hoặc
Sao chép
Nhúng
flowchart LR
A --- | This is the text| B
Liên kết có mũi tên và văn bản
Sao chép
Nhúng
flowchart LR
A-->|text|B
hoặc
Sao chép
Nhúng
flowchart LR
A-- text -->B
Liên kết nét đứt
Sao chép
Nhúng
flowchart LR
A-.->B;
Liên kết nét đứt có văn bản
Sao chép
Nhúng
flowchart LR
A-. text .->B;
Liên kết đậm
Sao chép
Nhúng
flowchart LR
A ==> B
Liên kết đậm có văn bản
Sao chép
Nhúng
flowchart LR
A == |text| ==> B
Liên kết vô hình
Sao chép
Nhúng
flowchart LR
A ~~~ B
Kết nối chuỗi của các liên kết
Sao chép
Nhúng
flowchart LR
A -- text --> B -- text2 --> C
Bạn cũng có thể khai báo nhiều liên kết nút trên cùng một dòng, như sau:
Sao chép
Nhúng
flowchart LR
a --> b & c--> d
Bạn cũng có thể mô tả sự phụ thuộc, như đoạn mã dưới đây:
Sao chép
Nhúng
flowchart LR
a --> b & c--> d & e--> f
Nếu dùng cú pháp cơ bản để mô tả cùng một đồ thị, cần 8 dòng. Cần lưu ý rằng việc lạm dụng phương pháp này có thể khiến lưu đồ ở định dạng Markdown khó đọc hơn.
Sao chép
Nhúng
flowchart TB
a --> b
a --> c
b --> d
b --> e
c --> d
c --> e
d --> f
e --> f
Thêm ID cho đường kết nối
Mermaid hiện hỗ trợ thêm ID cho đường kết nối, tương tự như gắn ID và siêu dữ liệu vào nút. Tính năng này đặt nền tảng cho các chức năng tạo kiểu, lớp và hoạt ảnh nâng cao hơn trên đường kết nối.
Cú pháp:Để thêm ID cho đường kết nối, hãy đặt ID trước cú pháp đường kết nối, theo sau ngay bởi ký tự @. Ví dụ:
Sao chép
Nhúng
flowchart LR
A e1@--> B
Trong ví dụ này, e1 là ID của đường kết nối nối A và B. Bạn có thể dùng ID này trong các câu lệnh định nghĩa hoặc tạo kiểu tiếp theo, giống như dùng với nút.
Bật hoạt ảnh
Sau khi thêm ID cho đường kết nối, bạn có thể bật hoạt ảnh cho đường kết nối bằng cách định nghĩa thuộc tính của nó:
Sao chép
Nhúng
flowchart LR
A e1@==> B
e1@{ animate: true }
Điều này cho Mermaid biết rằng đường kết nối e1 là hoạt ảnh.
Chọn loại hoạt ảnh
Trong phiên bản đầu tiên, có hỗ trợ hai tốc độ hoạt ảnh: fast và slow. Chọn một loại hoạt ảnh cụ thể là cách đơn giản để bật hoạt ảnh và đặt tốc độ hoạt ảnh cùng lúc.
Sao chép
Nhúng
flowchart LR
A e1@--> B
e1@{ animation: fast }
这相当于 e1@{ animate: true, animation: fast }。
Tạo hoạt ảnh bằng câu lệnh classDef
Bạn cũng có thể thêm hoạt ảnh cho đường kết nối bằng cách gán một lớp cho nó, rồi định nghĩa thuộc tính hoạt ảnh trong câu lệnh classDef. Ví dụ:
Sao chép
Nhúng
flowchart LR
A e1@--> B
classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
class e1 animate
Trong đoạn mã này:
- e1@--> 创建了一个 ID 为 e1 的连接线
- classDef animate định nghĩa một lớp tên là animate, có các thuộc tính tạo kiểu và hoạt ảnh.
- class e1 animate áp dụng lớp animate cho đường kết nối e1.
Lưu ý về việc thoát dấu phẩy: khi đặt thuộc tính stroke-dasharray, hãy nhớ thoát dấu phẩy thành , vì dấu phẩy được dùng làm dấu phân cách trong định nghĩa kiểu của Mermaid.
Loại mũi tên mới
Hỗ trợ loại mũi tên mới
- Đường kết nối có chấm tròn đặc
- Đường kết nối có dấu gạch chéo
Đường kết nối có chấm tròn đặc
Sao chép
Nhúng
flowchart LR
A --o B
Đường kết nối có dấu gạch chéo
Sao chép
Nhúng
flowchart LR
A --x B
Mũi tên đa hướng
Có thể sử dụng mũi tên đa hướng, ví dụ:
Sao chép
Nhúng
flowchart LR
A o--o B
B <--> C
C x--x D
Độ dài đường kết nối
Mỗi nút trong lưu đồ, tùy theo nút mà nó kết nối, được gán vào một cấp trong đồ thị kết xuất, tức là cấp dọc hoặc ngang (phụ thuộc vào hướng của lưu đồ). Theo mặc định, liên kết có thể vượt qua bất kỳ số cấp nào, nhưng bạn có thể yêu cầu một liên kết dài hơn các liên kết khác bằng cách thêm các dấu gạch ngang bổ sung vào định nghĩa kết nối.
Trong ví dụ này, thêm hai dấu gạch ngang bổ sung vào kết nối từ nút B đến nút E, khiến nó vượt qua nhiều hơn hai cấp so với liên kết thông thường:
Sao chép
Nhúng
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
Khi nhãn kết nối được viết ở giữa kết nối, phải thêm các dấu gạch ngang bổ sung vào bên phải kết nối. Ví dụ này tương đương với ví dụ trước:
Sao chép
Nhúng
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B -- No ----> E[End]
Đối với đường chấm hoặc liên kết đậm, ký tự cần thêm là dấu bằng hoặc dấu chấm, như bảng dưới đây:
| Độ dài | 1 | 2 | 3 |
|---|---|---|---|
| Kết nối thông thường | --- | ---- | ----- |
| Kết nối thông thường có mũi tên | --> | ---> | ----> |
| Kết nối đậm | === | ==== | ===== |
| Kết nối đậm có mũi tên | ==> | ===> | ====> |
| Đường chấm | -.- | -..- | -...- |
| Đường chấm có mũi tên | -.- | -..-> | -...-> |
Ký tự đặc biệt
Có thể đặt văn bản trong dấu ngoặc kép để kết xuất các ký tự phức tạp hơn. Như ví dụ dưới đây:
Sao chép
Nhúng
flowchart LR
id1["This is the (text) in the box"]
Mã thực thể dùng để thoát ký tự
Có thể dùng cú pháp trong ví dụ để thoát ký tự.
Sao chép
Nhúng
flowchart LR
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
Con số đưa ra là hệ thập phân, do đó # có thể được mã hóa thành #35. Cũng hỗ trợ sử dụng tên ký tự HTML.
Đồ thị con
Sao chép
Nhúng
subgraph title
graph definition
end
Dưới đây là một ví dụ:
Sao chép
Nhúng
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
Bạn cũng có thể đặt id cho đồ thị con.
Sao chép
Nhúng
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
Biểu đồ luồng
Với biểu đồ kiểu lưu đồ, bạn cũng có thể đặt đường kết nối đến và đi từ đồ thị con giống như lưu đồ dưới đây.
Sao chép
Nhúng
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
Hướng của đồ thị con
Khi dùng kiểu lưu đồ, bạn có thể dùng câu lệnh hướng để đặt hướng kết xuất của đồ thị con, như sau:
Sao chép
Nhúng
flowchart LR
subgraph TOP
direction TB
subgraph B1
direction RL
i1 -->f1
end
subgraph B2
direction BT
i2 -->f2
end
end
A --> TOP --> B
B1 --> B2
Hạn chế
Nếu bất kỳ nút nào của đồ thị con được kết nối với bên ngoài, hướng của đồ thị con sẽ bị bỏ qua. Nếu không, đồ thị con sẽ kế thừa hướng của đồ thị cha:
Sao chép
Nhúng
flowchart LR
subgraph subgraph1
direction TB
top1[top] --> bottom1[bottom]
end
subgraph subgraph2
direction TB
top2[top] --> bottom2[bottom]
end
%% ^ These subgraphs are identical, except for the links to them:
%% Link *to* subgraph1: subgraph1 direction is maintained
outside --> subgraph1
%% Link *within* subgraph2:
%% subgraph2 inherits the direction of the top-level graph (LR)
outside ---> top2
Chuỗi Markdown
Chuỗi Markdown nâng cao lưu đồ và sơ đồ tư duy bằng cách cung cấp một kiểu chuỗi linh hoạt hơn, hỗ trợ các tùy chọn định dạng văn bản như in đậm và in nghiêng, đồng thời có thể tự động ngắt dòng văn bản trong nhãn.
Sao chép
Nhúng
flowchart LR
subgraph "One"
a("`The **cat**
in the hat`") -- "edge label" --> b{{"`The **dog** in the hog`"}}
end
subgraph "`**Two**`"
c("`The **cat**
in the hat`") -- "`Bold **edge label**`" --> d("The dog in the hog")
end
- Để in đậm văn bản, hãy dùng hai dấu sao (**) ở trước và sau văn bản.
- In nghiêng dùng một dấu sao (*) đặt trước và sau văn bản.
- Đối với chuỗi truyền thống, bạn cần thêm thẻ <br> để văn bản ngắt dòng trong nút. Tuy nhiên, chuỗi Markdown sẽ tự động ngắt dòng khi văn bản quá dài, và chỉ cần dùng ký tự xuống dòng thay vì thẻ <br> là có thể bắt đầu dòng mới.
Tính năng này áp dụng cho nhãn nút, nhãn đường kết nối và nhãn đồ thị con
Có thể vô hiệu hóa tự động ngắt dòng bằng cách sử dụng cú pháp đặc biệt
Sao chép
Nhúng
---
config:
markdownAutoWrap: false
---
graph LR
Chú thích
Có thể nhập chú thích trong lưu đồ, trình soạn thảo sẽ bỏ qua các chú thích này. Chú thích cần chiếm một dòng riêng và phải bắt đầu bằng hai dấu phần trăm (%%). Mọi văn bản từ khi bắt đầu chú thích đến dòng tiếp theo đều được coi là chú thích, bao gồm cả bất kỳ cú pháp lưu đồ nào.
Sao chép
Nhúng
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
Kiểu và lớp
Kiểu liên kết
Có thể đặt kiểu cho liên kết. Ví dụ, bạn có thể muốn tạo kiểu cho một liên kết di chuyển ngược lại trong quy trình; vì liên kết không có ID như nút, nên cần xác định kiểu mà liên kết sẽ dùng theo cách khác. Hãy dùng số thứ tự khi định nghĩa liên kết, hoặc dùng giá trị mặc định để áp dụng cho tất cả liên kết.
Sao chép
Nhúng
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
Cũng có thể thêm kiểu cho nhiều liên kết bằng cách phân tách số liên kết bằng dấu phẩy trong một câu lệnh:
Sao chép
Nhúng
linkStyle 1,2,7 color:blue;
Đặt kiểu đường cong cho đường kết nối
Nếu phương pháp mặc định không đáp ứng nhu cầu của bạn, bạn có thể đặt kiểu đường cong cho đường kết nối giữa các mục. Các kiểu đường cong khả dụng bao gồm basis, bumpX, bumpY, cardinal, catmullRom, linear, monotoneX, monotoneY, natural, step, stepAfter và stepBefore.
Trong ví dụ dưới đây, một biểu đồ từ trái sang phải sử dụng kiểu đường cong stepBefore.
Sao chép
Nhúng
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
Đặt kiểu cho nút
Có thể đặt kiểu cụ thể cho nút, ví dụ viền đậm hơn hoặc màu nền khác.
Sao chép
Nhúng
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f99,stroke:#33d,stroke-width:4px
style id2 fill:#bfc,stroke:#f96,stroke-width:2px,color:#000,stroke-dasharray: 5 5
Lớp
Thay vì định nghĩa kiểu mỗi lần, tiện hơn là định nghĩa một lớp kiểu và gắn lớp đó vào các nút cần giao diện khác biệt.
Định nghĩa lớp như sau:
Sao chép
Nhúng
classDef className fill:pink,stroke:#333,stroke-width:4px;
Ngoài ra, cũng có thể định nghĩa kiểu cho nhiều lớp trong một câu lệnh:
Sao chép
Nhúng
classDef firstClassName,secondClassName font-size:12pt;
Thao tác gắn lớp vào nút như sau:
Sao chép
Nhúng
class nodeId1 className;
Cũng có thể gắn một lớp vào danh sách nút trong một câu lệnh:
Sao chép
Nhúng
class nodeId1,nodeId2 className;
Thêm lớp có thể dùng toán tử ::: để gắn tên lớp vào nút, như sau:
Sao chép
Nhúng
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96
Có thể dùng dạng này khi khai báo nhiều liên kết giữa các nút:
Sao chép
Nhúng
flowchart LR
A:::foo & B:::bar --> C:::foobar
classDef foo stroke:#f00
classDef bar stroke:#0f0
classDef foobar stroke:#00f
- Trong khai báo đồ thị, câu lệnh giờ đây cũng có thể không kết thúc bằng dấu chấm phẩy. Sau phiên bản 0.2.16, việc kết thúc câu lệnh đồ thị bằng dấu chấm phẩy chỉ là tùy chọn. Do đó, khai báo đồ thị dưới đây cũng hợp lệ giống như khai báo đồ thị cũ.
- Giữa đỉnh và liên kết được phép có một dấu cách. Tuy nhiên, giữa đỉnh với văn bản của nó cũng như giữa liên kết với văn bản của nó không nên có bất kỳ dấu cách nào. Khai báo đồ thị cũ vẫn còn hợp lệ, vì vậy tính năng mới này là tùy chọn, nhằm nâng cao khả năng đọc.
Dưới đây là khai báo mới cho đường kết nối, cũng hợp lệ giống như khai báo đường kết nối cũ.
Sao chép
Nhúng
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
