Biểu đồ trạng thái
Cú pháp biểu đồ trạng thái của Mermaid tương thích với cú pháp được dùng trong plantUml, điều này giúp người dùng dễ dàng chia sẻ biểu đồ giữa mermaid và plantUml hơn.
Sao chép
Nhúng
---
title: Simple sample
---
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Trình soạn thảo cũ:
Sao chép
Nhúng
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Trình soạn thảo mới:
Trong biểu đồ trạng thái, hệ thống được mô tả dựa trên các trạng thái và cách một trạng thái chuyển sang trạng thái khác thông qua chuyển đổi. Biểu đồ ví dụ ở trên hiển thị ba trạng thái: đứng yên, di chuyển và va chạm. Bạn bắt đầu từ trạng thái đứng yên, từ trạng thái đứng yên có thể chuyển sang trạng thái di chuyển. Từ trạng thái di chuyển, bạn có thể quay lại trạng thái đứng yên, hoặc chuyển sang trạng thái va chạm. Không có chuyển đổi từ trạng thái đứng yên sang trạng thái va chạm. (Nếu giữ nguyên đứng yên, bạn sẽ không bị va chạm.)
状态
Có thể khai báo trạng thái theo nhiều cách, cách đơn giản nhất là chỉ dùng một id để định nghĩa trạng thái:
Sao chép
Nhúng
stateDiagram-v2
stateId
Cách khác là dùng cú pháp state, và thêm mô tả sau:
Sao chép
Nhúng
stateDiagram-v2
state "This is a state description" as s2
Một cách khác để định nghĩa trạng thái có mô tả là định nghĩa ID trạng thái trước, rồi thêm dấu hai chấm và mô tả:
Sao chép
Nhúng
stateDiagram-v2
s2 : This is a state description
Chuyển đổi
Chuyển đổi là đường kết nối khi một trạng thái chuyển sang trạng thái khác, được biểu diễn bằng mũi tên văn bản "-->".
Khi bạn định nghĩa chuyển đổi giữa hai trạng thái, và trạng thái chưa được định nghĩa, trạng thái chưa định nghĩa sẽ được định nghĩa bằng id trong chuyển đổi. Sau đó, bạn có thể thêm mô tả cho trạng thái được định nghĩa theo cách này.
Sao chép
Nhúng
stateDiagram-v2
s1 --> s2
Có thể thêm văn bản vào chuyển đổi để mô tả nội dung mà nó đại diện:
Sao chép
Nhúng
stateDiagram-v2
s1 --> s2: A transition
Bắt đầu và kết thúc
Có hai trạng thái đặc biệt biểu diễn sự bắt đầu và dừng của biểu đồ. Hai trạng thái này được biểu diễn bằng cú pháp [*], hướng chuyển tới trạng thái đó quyết định nó là trạng thái bắt đầu hay trạng thái kết thúc.
Sao chép
Nhúng
stateDiagram-v2
[*] --> s1
s1 --> [*]
Trạng thái phức hợp
Khi sử dụng biểu đồ trạng thái trong thực tế, bạn thường gặp các biểu đồ đa chiều, vì một trạng thái có thể có nhiều trạng thái bên trong, đây được gọi là trạng thái phức hợp.
Để định nghĩa trạng thái phức hợp, bạn cần dùng cú pháp state, theo sau là một id, và viết phần thân của trạng thái phức hợp trong dấu ngoặc nhọn {}. Bạn có thể đặt tên cho trạng thái phức hợp trên một dòng riêng, giống như định nghĩa trạng thái đơn giản. Hãy xem ví dụ dưới đây:
Sao chép
Nhúng
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
[*] --> NamedComposite
NamedComposite: Another Composite
state NamedComposite {
[*] --> namedSimple
namedSimple --> [*]
namedSimple: Another simple
}
Bạn có thể thao tác theo nhiều cấp độ:
Sao chép
Nhúng
stateDiagram-v2
[*] --> First
state First {
[*] --> Second
state Second {
[*] --> second
second --> Third
state Third {
[*] --> third
third --> [*]
}
}
}
Bạn cũng có thể định nghĩa chuyển đổi giữa các trạng thái phức hợp:
Sao chép
Nhúng
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
Lưu ý: không thể định nghĩa chuyển đổi giữa các trạng thái bên trong thuộc các trạng thái phức hợp khác nhau.
Lựa chọn
Đôi khi bạn cần mô phỏng việc lựa chọn giữa hai hoặc nhiều đường, có thể dùng <<choice>> để thực hiện.
Sao chép
Nhúng
stateDiagram-v2
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
Phân nhánh/Hợp nhất
Có thể dùng <<fork>> <<join>> để chỉ định một điểm phân nhánh/hợp nhất trong biểu đồ.
Sao chép
Nhúng
stateDiagram-v2
state fork_state <<fork>>
[*] --> fork_state
fork_state --> State2
fork_state --> State3
state join_state <<join>>
State2 --> join_state
State3 --> join_state
join_state --> State4
State4 --> [*]
Lưu ý
Trong biểu đồ trạng thái, dùng chú thích giúp diễn đạt rõ ràng hơn, có thể chọn đặt chú thích ở bên phải hoặc bên trái của nút.
Sao chép
Nhúng
stateDiagram-v2
State1: The state with a note
note right of State1
Important information! You can write
notes.
end note
State1 --> State2
note left of State2 : This is the note to the left.
Đồng thời
Giống như trong plantUml, bạn có thể dùng ký hiệu dấu gạch ngang -- để chỉ định tính đồng thời.
Sao chép
Nhúng
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
}
Đặt hướng của biểu đồ
Đối với biểu đồ trạng thái, bạn có thể dùng câu lệnh hướng để đặt hướng kết xuất biểu đồ, như ví dụ này.
Sao chép
Nhúng
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
Chú thích
Có thể nhập chú thích trong biểu đồ trạng thái, trình soạn thảo sẽ bỏ qua các chú thích này. Chú thích phải bắt đầu bằng hai dấu phần trăm (%%), toàn bộ văn bản từ dấu hiệu đó đến ký tự xuống dòng tiếp theo đều được coi là chú thích, bao gồm cả bất kỳ cú pháp biểu đồ nào. Chú thích có thể chiếm một dòng riêng, cũng có thể đặt ở cuối câu lệnh.
Sao chép
Nhúng
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Tạo kiểu bằng classDefs
Hạn chế hiện tại của classDef trong biểu đồ trạng thái:
1. Không thể áp dụng cho trạng thái bắt đầu hoặc kết thúc
2. Không thể áp dụng cho trạng thái phức hợp hoặc bên trong trạng thái phức hợp
Bạn có thể dùng cú pháp classDef (viết tắt của class definition, trong đó "class" tương tự như lớp trong CSS) để định nghĩa kiểu. Sau classDef là tên kiểu, tiếp theo là một hoặc nhiều cặp 'thuộc tính-giá trị', mỗi cặp gồm một tên thuộc tính CSS hợp lệ, một dấu hai chấm (:) và giá trị tương ứng.
Dưới đây là ví dụ về classDef chỉ có một cặp 'thuộc tính-giá trị':
Sao chép
Nhúng
classDef movement font-style:italic;
- Tên kiểu là movement
- Thuộc tính duy nhất là font-style, giá trị là italic
Nếu bạn muốn có nhiều cặp 'thuộc tính-giá trị', thì có thể đặt một dấu phẩy (,) giữa mỗi cặp 'thuộc tính-giá trị'.
Dưới đây là một ví dụ chứa ba cặp 'thuộc tính-giá trị':
Sao chép
Nhúng
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
- Tên kiểu là badBadEvent
- Thuộc tính thứ nhất là fill, giá trị của nó là #f00
- Thuộc tính thứ hai là color, giá trị của nó là white
- Thuộc tính thứ ba là font-weight, giá trị của nó là bold
- Thuộc tính thứ tư là stroke-width, giá trị của nó là 2px
- Thuộc tính thứ năm là stroke, giá trị của nó là yellow
Áp dụng kiểu classDef cho trạng thái
Có hai cách để áp dụng kiểu classDef cho trạng thái:
- Dùng cú pháp class để áp dụng kiểu classDef cho một hoặc nhiều trạng thái trong một câu lệnh
- Dùng toán tử ::: để áp dụng kiểu classDef khi trạng thái được dùng trong câu lệnh chuyển đổi (ví dụ, có mũi tên trỏ tới/từ một trạng thái khác)
1. Câu lệnh class
Câu lệnh class cho Mermaid biết áp dụng classDef đã chỉ định cho một hoặc nhiều lớp. Có dạng:
Sao chép
Nhúng
class [one or more state names, separated by commas] [name of a style defined with classDef]
Dưới đây là ví dụ áp dụng kiểu badBadEvent cho trạng thái tên là Crash:
Sao chép
Nhúng
class Crash badBadEvent
Dưới đây là ví dụ áp dụng kiểu movement cho hai trạng thái Moving và Crash:
Sao chép
Nhúng
class Moving,Crash movement
Đây là một ví dụ. Xin lưu ý, trạng thái Crash được áp dụng hai kiểu classDef: movement và badBadEvent
Sao chép
Nhúng
stateDiagram
direction TB
accTitle: This is the accessible title
accDescr: This is an accessible description
classDef notMoving fill:white
classDef movement font-style:italic
classDef badBadEvent fill:pink,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
[*]--> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
class Still notMoving
class Moving, Crash movement
class Crash badBadEvent
class end badBadEvent
2. Dùng toán tử ::: để áp dụng kiểu cho trạng thái
Bạn có thể dùng toán tử ::: để áp dụng kiểu classDef cho trạng thái. Cú pháp là:
Sao chép
Nhúng
[state]:::[style name]
Bạn có thể áp dụng nó trong câu lệnh sử dụng lớp, điều này bao gồm cả trạng thái bắt đầu và trạng thái kết thúc. Ví dụ:
Sao chép
Nhúng
stateDiagram
direction TB
accTitle: This is the accessible title
accDescr: This is an accessible description
classDef notMoving fill:white
classDef movement font-style:italic;
classDef badBadEvent fill:pink,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
[*] --> Still:::notMoving
Still --> [*]
Still --> Moving:::movement
Moving --> Still
Moving --> Crash:::movement
Crash:::badBadEvent --> [*]
Khoảng trắng trong tên trạng thái
Có thể định nghĩa trạng thái bằng id trước, sau đó tham chiếu id đó để thêm khoảng trắng vào trạng thái.
Trong ví dụ dưới đây, có một trạng thái có ID là yswsii, được mô tả là ''Your state with spaces in it''. Sau khi định nghĩa, yswsii được dùng trong chuyển đổi đầu tiên của biểu đồ ([*] --> yswsii), và cũng được dùng khi chuyển tới YetAnotherState (yswsii --> YetAnotherState). yswsii đã được tạo kiểu để khác biệt với các trạng thái khác.
Sao chép
Nhúng
stateDiagram
classDef yourState font-style:italic,font-weight:bold,fill:white
yswsii: Your state with spaces in it
[*] --> yswsii:::yourState
[*] --> SomeOtherState
SomeOtherState --> YetAnotherState
yswsii --> YetAnotherState
YetAnotherState --> [*]
