깃허브 머메이드 - 상태 다이어그램 그리기 (Draw Statechart Diagram using GitHub Mermaid)

Git / GitHub 전체 링크

 

참고

- 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 --> [*]    
```