cypress/platform/state-refactor.html
| Dagre | Dagre with rough | ELK | ELK with rough | |
|---|---|---|---|---|
| Simple State (only id) |
stateId
|
stateDiagram-v2
stateId
|
%%{init: {"look": "handDrawn"} }%%
stateDiagram-v2
stateId
|
%%{init: {"handDrawn": false, "layout": "elk"} }%%
stateDiagram-v2
stateId
|
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
stateDiagram-v2
stateId
|
| |
| State with description with as keyword
state "description text" as s2
|
stateDiagram-v2
state "This is a state description" as s2
|
%%{init: {"look": "handDrawn"} }%%
stateDiagram-v2
state "This is a state description" as s3
|
%%{init: {"handDrawn": false, "layout": "elk"} }%%
stateDiagram-v2
state "This is a state description" as s4
|
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
stateDiagram-v2
state "This is a state description" as s5
|
| |
| State with description with : syntax
s2 : description text
|
stateDiagram-v2
s21 : This is a state description
|
%%{init: {"look": "handDrawn"} }%%
stateDiagram-v2
s22 : This is a state description
|
%%{init: {"handDrawn": false, "layout": "elk"} }%%
stateDiagram-v2
s23 : This is a state description
|
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
stateDiagram-v2
s24 : This is a state description
| | | | State with transition
s1 --> s2
|
stateDiagram-v2
s31 --> s32
|
%%{init: {"look": "handDrawn"} }%%
stateDiagram-v2
s41 --> s42
|
%%{init: {"handDrawn": false, "layout": "elk"} }%%
stateDiagram-v2
s51 --> s52
|
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
stateDiagram-v2
s61 --> s62
| | | | State transition with label
s1 --> s2: A transition
|
stateDiagram-v2
a1 --> a2: A transition
|
%%{init: {"look": "handDrawn"} }%%
stateDiagram-v2
a3 --> a4: A transition
|
%%{init: {"handDrawn": false, "layout": "elk"} }%%
stateDiagram-v2
a5 --> a6: A transition
|
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
stateDiagram-v2
a7 --> a8: A transition
| | | | Start & End
[*] --> test
test --> [*]
|
stateDiagram-v2
[*] --> test
test --> [*]
|
%%{init: {"look": "handDrawn"} }%%
stateDiagram-v2
[*] --> test
test --> [*]
|
%%{init: {"handDrawn": false, "layout": "elk"} }%%
stateDiagram-v2
[*] --> test
test --> [*]
|
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
stateDiagram-v2
[*] --> test
test --> [*]
| | | | Composite state
[*] --> First
state First {
[*] --> second
second --> [*]
}
|
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
|
%%{init: {"look": "handDrawn"} }%%
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
|
%%{init: {"handDrawn": false, "layout": "elk"} }%%
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
|
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
stateDiagram-v2
[*] --> First
state First {
[*] --> second
second --> [*]
}
| | | | Nested Composite state
[*] --> Level1
state Level1 {
[*] --> Level2
state Level2 {
[*] --> level2
level2 --> Level3
state Level3 {
[*] --> level3
level3 --> [*]
}
}
}
|
stateDiagram-v2
[*] --> Level1
state Level1 {
[*] --> Level2
state Level2 {
[*] --> level2
level2 --> Level3
state Level3 {
[*] --> level3
level3 --> [*]
}
}
}
|
%%{init: {"look": "handDrawn"} }%%
stateDiagram-v2
[*] --> Level1
state Level1 {
[*] --> Level2
state Level2 {
[*] --> level2
level2 --> Level3
state Level3 {
[*] --> level3
level3 --> [*]
}
}
}
|
%%{init: {"handDrawn": false, "layout": "elk"} }%%
stateDiagram-v2
[*] --> Level1
state Level1 {
[*] --> Level2
state Level2 {
[*] --> level2
level2 --> Level3
state Level3 {
[*] --> level3
level3 --> [*]
}
}
}
|
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
stateDiagram-v2
[*] --> Level1
state Level1 {
[*] --> Level2
state Level2 {
[*] --> level2
level2 --> Level3
state Level3 {
[*] --> level3
level3 --> [*]
}
}
}
| | | | Composite state with transition
[*] --> B1
B1 --> B2
B1 --> B3
state B1 {
[*] --> B11
B11 --> [*]
}
state B2 {
[*] --> B22
B22 --> [*]
}
state B3 {
[*] --> B33
B33 --> [*]
}
|
stateDiagram-v2
[*] --> B1
B1 --> B2
B1 --> B3
state B1 {
[*] --> B11
B11 --> [*]
}
state B2 {
[*] --> B22
B22 --> [*]
}
state B3 {
[*] --> B33
B33 --> [*]
}
|
%%{init: {"look": "handDrawn"} }%%
stateDiagram-v2
[*] --> B1
B1 --> B2
B1 --> B3
state B1 {
[*] --> B11
B11 --> [*]
}
state B2 {
[*] --> B22
B22 --> [*]
}
state B3 {
[*] --> B33
B33 --> [*]
}
|
%%{init: {"handDrawn": false, "layout": "elk"} }%%
stateDiagram-v2
[*] --> B1
B1 --> B2
B1 --> B3
state B1 {
[*] --> B11
B11 --> [*]
}
state B2 {
[*] --> B22
B22 --> [*]
}
state B3 {
[*] --> B33
B33 --> [*]
}
|
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
stateDiagram-v2
[*] --> B1
B1 --> B2
B1 --> B3
state B1 {
[*] --> B11
B11 --> [*]
}
state B2 {
[*] --> B22
B22 --> [*]
}
state B3 {
[*] --> B33
B33 --> [*]
}
| | | | Choice
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
|
stateDiagram-v2
state if_state <\> [\*] --\> IsPositive IsPositive --\> if\_state if\_state --\> False: if n \< 0 if\_state --\> True : if n \>= 0
|
%%{init: {"look": "handDrawn"} }%%
stateDiagram-v2
state if_state <\> [\*] --\> IsPositive IsPositive --\> if\_state if\_state --\> False: if n \< 0 if\_state --\> True : if n \>= 0
|
%%{init: {"handDrawn": false, "layout": "elk"} }%%
stateDiagram-v2
state if_state <\> [\*] --\> IsPositive IsPositive --\> if\_state if\_state --\> False: if n \< 0 if\_state --\> True : if n \>= 0
|
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
stateDiagram-v2
state if_state <\> [\*] --\> IsPositive IsPositive --\> if\_state if\_state --\> False: if n \< 0 if\_state --\> True : if n \>= 0
| | | | Fork & Join
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 --> [*]
|
stateDiagram-v2
state fork_state <\> [\*] --\> fork\_state fork\_state --\> State2 fork\_state --\> State3 state join\_state \<\> State2 --\> join\_state State3 --\> join\_state join\_state --\> State4 State4 --\> [\*]
|
%%{init: {"look": "handDrawn"} }%%
stateDiagram-v2
state fork_state <\> [\*] --\> fork\_state fork\_state --\> State2 fork\_state --\> State3 state join\_state \<\> State2 --\> join\_state State3 --\> join\_state join\_state --\> State4 State4 --\> [\*]
|
%%{init: {"handDrawn": false, "layout": "elk"} }%%
stateDiagram-v2
state fork_state <\> [\*] --\> fork\_state fork\_state --\> State2 fork\_state --\> State3 state join\_state \<\> State2 --\> join\_state State3 --\> join\_state join\_state --\> State4 State4 --\> [\*]
|
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
stateDiagram-v2
state fork_state <\> [\*] --\> fork\_state fork\_state --\> State2 fork\_state --\> State3 state join\_state \<\> State2 --\> join\_state State3 --\> join\_state join\_state --\> State4 State4 --\> [\*]
| | | | Notes
TN1: The state with a note
note right of TN1
note text
end note
TN1 --> TN2
note left of TN2 : note text
|
stateDiagram-v2
TN1: The state with a note
note right of TN1
Important information! You can write
notes.
end note
TN1 --> TN2
note left of TN2 : This is the note to the left.
|
%%{init: {"look": "handDrawn"} }%%
stateDiagram-v2
TN3: The state with a note
note right of TN3
Important information! You can write
notes.
end note
TN3 --> TN4
note left of TN4 : This is the note to the left.
|
%%{init: {"handDrawn": false, "layout": "elk"} }%%
stateDiagram-v2
TN5: The state with a note
note right of TN5
Important information! You can write
notes.
end note
TN5 --> TN6
note left of TN6 : This is the note to the left.
|
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
stateDiagram-v2
TN7: The state with a note
note right of TN7
Important information! You can write
notes.
end note
TN7 --> TN8
note left of TN8 : This is the note to the left.
| | | | Concurrent states
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
}
|
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
}
|
%%{init: {"look": "handDrawn"} }%%
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
}
|
%%{init: {"handDrawn": false, "layout": "elk"} }%%
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
}
|
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
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
}
| | | | Directions
direction LR
[*] --> D1
D1 --> D2
D2 --> D3
state D3 {
direction TB
D11 --> D22
}
D2 --> D4
|
stateDiagram-v2
direction LR
[*] --> D1
D1 --> D2
D2 --> D3
state D3 {
direction TB
D11 --> D22
}
D2 --> D4
|
%%{init: {"look": "handDrawn"} }%%
stateDiagram-v2
direction LR
[*] --> D1
D1 --> D2
D2 --> D3
state D3 {
direction TB
D11 --> D22
}
D2 --> D4
|
%%{init: {"handDrawn": false, "layout": "elk"} }%%
stateDiagram-v2
direction LR
[*] --> D1
D1 --> D2
D2 --> D3
state D3 {
direction TB
D11 --> D22
}
D2 --> D4
|
%%{init: {"look": "handDrawn", "layout": "elk"} }%%
stateDiagram-v2
direction LR
[*] --> D1
D1 --> D2
D2 --> D3
state D3 {
direction TB
D11 --> D22
}
D2 --> D4
| | | | Additional Content | New content 1 | New content 2 | New content 3 | New content 4 |