깃허브 머메이드 - 활동 다이어그램 그리기 (Draw Activity Diagram using GitHub Mermaid)

Git / GitHub 전체 링크

 

참고

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

 

깃허브 머메이드를 이용해 활동(액티비티) 다이어그램을 그려보자.

 

머메이드에서 액티비티 다이어그램은 지원하지 않고 Flow Chart를 지원한다.

```mermaid
---
title: Activity Diagram
---
flowchart TD
    A --> B    
```

 

좌우로 그리고 싶다면 "LR" 로 표기한다.

```mermaid
flowchart LR
    A --> B    
```

 

총 4가지 (TB = TD) 방식을 지원한다.

TB - Top to bottom
TD - Top-down/ same as top to bottom
BT - Bottom to top
RL - Right to left
LR - Left to right

 

---

Arrow

 

액티비티 다이어그램에서 화살표(Transition) 각각이 큰 의미를 가지지는 않지만,

머메이드 Flow Chart는 여러 화살표를 지원한다. (양방향도 가능, "%%" 는 주석)

```mermaid
flowchart LR
    A --- B 
    C --> D
    E -.- F
    G -.-> H
    I ==> J
    %% ~~~ is invisible link
    K ~~~ L
    M --o N
    O --x P       
```

 

그리고 화살표의 길이도 조절할 수 있다.

```mermaid
flowchart LR
    A --> B
    C ---> D
    E -----> F
    G ------> H
    I -------------> J           
```

 

 

화살표에 텍스트를 추가하는 방법은 -- "Text" -- 또는 arrow |Text| 다.

```mermaid
flowchart LR
    A -- A to B --> B
    A-. dot .-> B
    C -->|C to D| D          
    C -.->|dot| D              
```

 

그리고 아래와 같은 차트가 있다고 가정하자.

```mermaid
flowchart TB
    A --> C
    A --> D
    B --> C
    B --> D
```

 

 

이 차트는 "&" 를 이용해서 한 줄로 표현할 수 있다.

```mermaid
flowchart TB
    A & B--> C & D        
```

---

Node

 

노드는 여러 가지 모양을 지원한다. 

액티비티 다이어그램은 노드 안에 Activity 이름을 넣게 된다.

그리고 노드 모양을 변경하는 것이 nickname을 설정하는 것과 같다.

```mermaid
flowchart LR
    n1[NODE 1] --> n2(NODE 2)
    n3(NODE 3) --> n4[NODE 4] --> n5[(NODE 5)]
    n6((NODE 6)) --> n7>NODE 7] --> n8{NODE 8}
    n9{{NODE 9}} --> n10[/NODE 10 /] --> n11[\NODE 11\]
    n12[/NODE 12\] --> n13[\NODE 13/] --> n14(((NODE 14)))
```

 

분기(Alternative Flow)는 위에서 8번째 도형을 사용하면 된다.

```mermaid
flowchart LR
    n8{Branch}
```

 

 

아쉽게도 상태 다이어그램에 있는 fork / join bar는 지원하지 않는다.