Mermaid, Diagram 그리기

1. Mermaid

Markdown에서 각종 다이어그램을 그리기 위한 언어이다. VS Code에서 사용하기 위해서는 아래의 Extension을 설치해야 한다.

 

1) 다이어그램 종류(Diagram Types)

• flowchart(graph)
• sequenceDiagram
• gantt
• classDiagram
• erDiagram
• stateDiagram
• journey
• gitGraph

```mermaid
[다이어그램 종류] [방향]
```

2. Flow Chart

플로우차트는 각 상태를 나타내는 Node와 Node를 선으로 이어주는 Edge로 구성된다. flowchart로 다이어그램을 명시해 주고(graph와 같음) 다이어그램을 그릴 방향을 아래와 같이 명시한다.

• TB(TD): Tob to Bottom
• BT: Bottom to Top
• RL: Righ to Left
• LR: Left to Right

```mermaid
graph TD
    A[Start] --> B{고객 정보 입력}
    B -- 입력 완료 --> C{상품 재고 확인}
    C -- 재고 있음 --> D[주문 생성]
    C -- 재고 없음 --> E[재고 부족 알림]
    D --> F{결제 정보 입력}
    F -- 입력 완료 --> G{결제 처리}
    G -- 결제 성공 --> H[주문 완료 알림]
    G -- 결제 실패 --> I[결제 실패 알림]
    H --> J[(Database)]
    I --> J
    J --> K{데이터 저장}
    K -- 저장 완료 --> L{데이터 처리}
    L -- 성공 --> M[거래 완료 알림]
    L -- 실패 --> N[거래 실패 알림]
    M --> O[End]
    E --> O
```

3. sequenceDiagram

Flow Chart를 제외한 다이어그램 타입들은 https://mermaid.js.org/intro/를 참고하여 예제를 사용.

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```

4. gantt

```mermaid
gantt
    dateFormat  YYYY-MM-DD
    title Example Gantt Chart

    section Project A
    Task 1     :a1, 2023-07-19, 3d
    Task 2     :after a1, 2d
    Task 3     : 2023-07-22, 5d

    section Project B
    Task 4     :2023-07-19, 4d
    Task 5     :2023-07-24, 2d
    Task 6     :after a3, 3d
```

5. classDiagram

```mermaid
classDiagram
    note "From Duck till Zebra"
    Animal <|-- Duck
    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }
```

 

6) erDiagram

```mermaid
erDiagram
    CAR ||--o{ NAMED-DRIVER : allows
    CAR {
        string registrationNumber PK
        string make
        string model
        string[] parts
    }
    PERSON ||--o{ NAMED-DRIVER : is
    PERSON {
        string driversLicense PK "The license #"
        string(99) firstName "Only 99 characters are allowed"
        string lastName
        string phone UK
        int age
    }
    NAMED-DRIVER {
        string carRegistrationNumber PK, FK
        string driverLicence PK, FK
    }
    MANUFACTURER only one to zero or more CAR : makes
```

 

7) StateDiagram

```mermaid
stateDiagram-v2
    [*] --> First

    state First {
        [*] --> Second

        state Second {
            [*] --> second
            second --> Third

            state Third {
                [*] --> third
                third --> [*]
            }
        }
    }
```

 

8) journey

```mermaid
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me
```

 

9) gitGraph

```mermaid
%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
      gitGraph
        commit
        branch hotfix
        checkout hotfix
        commit
        branch develop
        checkout develop
        commit id:"ash" tag:"abc"
        branch featureB
        checkout featureB
        commit type:HIGHLIGHT
        checkout main
        checkout hotfix
        commit type:NORMAL
        checkout develop
        commit type:REVERSE
        checkout featureB
        commit
        checkout main
        merge hotfix
        checkout featureB
        commit
        checkout develop
        branch featureA
        commit
        checkout develop
        merge hotfix
        checkout featureA
        commit
        checkout featureB
        commit
        checkout develop
        merge featureA
        branch release
        checkout release
        commit
        checkout main
        commit
        checkout release
        merge main
        checkout develop
        merge release
```