깃허브 머메이드 - 시퀀스 다이어그램 그리기 (Draw Sequence Diagram using GitHub Mermaid)

Git / GitHub 전체 링크

 

참고

- https://mermaid.js.org/syntax/sequenceDiagram.html

- 시퀀스 다이어그램

 

깃허브 머메이드를 이용해 시퀀스 다이어그램을 그려보자.

 

actor나 participant로 오브젝트(or Role)를 생성할 수 있고 as를 이용해 nickname을 만들 수 있다.

```mermaid
---
title: Sequence Diagram example
---
  sequenceDiagram
    actor A
    participant B   
    actor C as Cookie
    participant D as Dragon
    
    A ->> B : step 1  
    B ->> C : step 2
    C ->> D : step 3
```

 

participant와 participant 사이에 화살표를 명시하고, ":" 이후에 Text를 추가해야 한다.

participant -> participant : Text

 

제공되는 화살표 옵션은 다음과 같다.

```mermaid
  sequenceDiagram
    participant A
    participant B

    A -> B: Solid line without arrow
    A --> B : Dotted line without arrow
    A ->> B : Solid line with arrowhead
    A -->> B : Dotted line with arrowhead
    A -x B : Solid line with a cross at the end
    A --x B : Dotted line with a cross at the end.
    A -) B : Solid line with an open arrow at the end (async)
    A --) B : Dotted line with a open arrow at the end (async)        
```

---

Activations

 

메서드가 호출된 뒤에 박스를 만들고 싶다면 participant 뒤에 + / - 키워드를 추가하면 된다.

```mermaid
  sequenceDiagram
    participant A
    participant B

    A ->> +B : Synchronous Message
    B --) -A : Response Message
    
    A -) B : Asynchronous Message      
```

 

또는 activate와 deactivate로 명시할 수 있다.

```mermaid
  sequenceDiagram
    participant A
    participant B

    A ->> B : Synchronous Message
    activate B

    activate B
    B ->> B : Self Message
    deactivate B

    B --) A : Response Message
    deactivate B
    
    A -) B : Asynchronous Message      
```

---

오브젝트 생성과 삭제

 

create와 destroy로 오브젝트(participant)를 생성하고 삭제할 수 있다.

```mermaid
  sequenceDiagram
    participant A
    participant B

    A->>B : Quit
    activate B

    create participant Popup
    B --) Popup : Create
    destroy Popup
    B -x Popup : Click Cancel

    B --) A : Response Message
    deactivate B    
```

---

Note, Comment

 

Note 키워드로 메모를 할 수 있고, %%로 주석을 추가할 수 있다.

```mermaid
  sequenceDiagram
    participant A
    participant B

    A ->> +B : Synchronous Message
    %% comment
    Note left of A : A is Actor
    B --) -A : Response Message
    Note over A, B : A <-> B<br/>Interaction
    
    A -) B : Asynchronous Message      
```

---

Fragments

 

loop, opt, break는 다음과 같이 사용한다.

 

loop [text] ~ end

opt [text] ~ end 

break [text] ~ end

```mermaid
  sequenceDiagram
    participant A
    participant B
    
    loop min, max
      A ->> B : repeated
    end

    opt A to B 
      A -) B : optional      
    end

    break A to B  
      A -) B : exception
    end     
```

 

alt, par, critical은 optional한 조건이 추가된다.

 

alt [text] ~ [else] ~ end

par [text] ~ [and] ~ end

critical [text] ~ [option] ~ end

```mermaid
  sequenceDiagram
    participant A
    participant B
    
    alt condition 1
      A ->> B : alternative 1
    else condition 2
      A ->> B : alternative 2
    end

    par Action 1
      A ->> B : concurrent 1
    and Action 2
      A ->> B : concurrent 2
    end

    critical must be performed
      A ->> B : atomic 1
      option [Circumstance A]
      A ->> B : atomic 1      
    end      
```

---

옵션

 

autonumber : 다이어그램의 화살표에 자동으로 번호를 추가한다.

box [color] [text] ~ end : participant 주변을 box로 감쌀 수 있고, 색상도 지정할 수 있다.

rect color ~ end : 지정한 영역의 배경색을 설정한다. 

color : 고유 색상이나 (r, g, b) / (r, g, b, a)로 설정할 수 있다.

```mermaid
  sequenceDiagram
    autonumber
    
    rect rgb(160, 255, 255)  

    box skyblue A and B
    participant A
    participant B
    end    

    rect rgb(191, 223, 255, .7)
    A->>B : Quit
    activate B
    end

    rect rgb(255, 180, 180)    

    create participant Popup
    B --) Popup : Create
    destroy Popup    
    B -x Popup : Click Cancel

    end

    B --) A : Response Message

    end
    deactivate B    
```