깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기)
참고
- https://mermaid.js.org/syntax/stateDiagram.html
- 상태 다이어그램
깃허브 머메이드를 이용해 상태 다이어그램을 그려보자.
"[*]"로 Initial State와 Final State를 표시할 수 있고, "-->" 로 transition을 표현할 수 있다.
transition 옆에 ":" 로 텍스트를 추가할 수 있다.
```mermaid
---
title: Statechart Diagram
---
stateDiagram-v2
[*] --> Source
Source --> Target : event [guard] / action
Target --> [*]
```
그리고 direction LR로 방향을 좌우로 변경한다.
```mermaid
stateDiagram-v2
direction LR
[*] --> Source
Source --> Target : event [guard] / action
Target --> [*]
```
Composite States
내부 상태를 나타내려면, state 스테이트 이름 { } 를 이용한다.
state operation인 entry나, do, exit를 표시하는 메모가 따로 없기 때문에 state를 그대로 사용하였다.
```mermaid
stateDiagram-v2
direction LR
[*] --> s1
s1 --> stateA : e1 / a1
s1 --> stateA : e2 / a2
state stateA {
direction LR
e : entry / a3 \n do / a4 \n exit / a5
[*] --> s2
s2 --> s3
s3 --> [*]
}
stateA --> [*]
```
Orthogonal State
"--" 를 이용해서 Concurrency한 상태를 표시한다.
또한 state 이름에 공백을 추가하거나 nickname을 만들고 싶다면
state "description" as name 또는 state : description을 사용하면 된다.
```mermaid
stateDiagram-v2
state "Orthogonal State" as os
[*] --> os
state os {
state S1 {
[*] --> ss1
ss1 --> ss2
}
--
state S2 {
[*] --> ss3
ss3 --> ss4
}
--
state S3 {
[*] --> ss5
ss5 --> ss6
}
}
es : End State
os --> es
es -->[*]
```
Parallelization / Synchronization Node
<<fork>> 로 병행되는 상태를 동시에 실행(Parallelization, Fork)하거나 대기(Synchronization, Join)할 수 있다.
```mermaid
stateDiagram-v2
state "Orthogonal State" as os
state sync_start <<fork>>
S3 --> sync_start
sync_start --> S1
sync_start --> S2
state os {
state S1 {
[*] --> ss1
ss1 --> ss2
}
--
state S2 {
[*] --> ss3
ss3 --> ss4
}
}
state sync_end <<fork>>
S1 --> sync_end
S2 --> sync_end
sync_end --> S4
```
Choice
<<choice>> 를 이용해서 경로를 나눌 수 있다.
```mermaid
stateDiagram-v2
state choice <<choice>>
[*] --> S1
S1 --> choice
choice --> S2 : if n == 0
choice --> S3 : if n == 1
choice --> S4 : if n >= 2
```
Note, Comment
메모를 추가하려면 note [right / left] of state ~ end note를 사용한다.
```mermaid
stateDiagram-v2
[*] --> S1
S1 --> S2
S2 --> [*]
note right of S1
S1 is
very important
end note
note left of S2
S2 is
not important
end note
```
주석은 "%%"를 사용하면 된다.
```mermaid
stateDiagram-v2
%% this is comment
direction LR
[*] --> Source
Source --> Target : event [guard] / action
Target --> [*]
```
'개발 > Git, GitHub' 카테고리의 다른 글
깃허브 데스크탑 - This diff contains a change in line endings from 'CRLF' to 'LF' 경고 처리하기 (0) | 2024.03.13 |
---|---|
깃허브 머메이드 - 활동 다이어그램 그리기 (Draw Activity Diagram using GitHub Mermaid) (0) | 2024.03.04 |
깃허브 머메이드 - 시퀀스 다이어그램 그리기 (Draw Sequence Diagram using GitHub Mermaid) (0) | 2024.03.02 |
Git Bash - fetch / pull 할 때 ID, Password 자동 입력하기 (0) | 2024.03.01 |
깃허브 - 개인 토큰 발급 받기 (Personal access tokens) (0) | 2024.03.01 |
댓글