[TIL] Mermaid - 시퀀스 다이어그램

나는 처음 보는 도메인 지식에 대해 쉽게 이해하기 힘들거나, 특정 기능의 flow를 다른 개발자나 일반인들에게 설명하기에 시퀀스 다이어그램이 가장 쉽게 이해가능하다고 생각한다.

그 중에서 Mermaid라는 웹 에디터를 통해 쉽게 작성한 후기를 쓰려 한다.

https://velog.io/@qhflrnfl4324/Mermaid%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%8B%9C%ED%80%80%EC%8A%A4-%EB%8B%A4%EC%9D%B4%EC%96%B4%EA%B7%B8%EB%9E%A8

Mermaid의 기본 문법에 대해 잘 설명해주신 velog를 참고했다.

나의 예제로는 MSA 물류관리/배송 프로젝트를 진행하며 담당 부분인 Gateway - Auth - User 간의 인증 과정 처리를 flow로 쉽게 이해할 수 있게 설명하려 작성했다.

다음 그림처럼 시퀀스를 따라가며 그림도 예쁘게 그려준다.

sequenceDiagram
    autonumber
    participant Client
    participant Gateway Server
    participant Auth Server
    participant User Server
    Client ->> Gateway Server: ex) 주문 생성
    Gateway Server ->> Auth Server : 토큰 검증
    rect rgb(191, 223, 255)
        alt token invalid
            Auth Server-->>Gateway Server: token claim = null
        else token valid
            Auth Server->>Auth Server: Security Context Holder에 저장
        
        end
    end

    rect rgb(255, 255, 255)
        alt role != ADMIN
            Auth Server->>Gateway Server: token claim 전달
        else role == ADMIN
            critical GET
                Auth Server-)User Server: 권한 검증<br />(`/internal/users/{userId}`)
            end
        end
    end

    Auth Server -->> Gateway Server: token claim 전달

    rect rgb(191, 223, 255)
        alt token == null
            Gateway Server-->>Client: ERROR
        else token != null
            Gateway Server->>Order Server: Reqeust Header로 claim 전달
        
        end
    end

이처럼 autonumber 를 통해 자동으로 순서를 나타낼 수 있고, rect 를 통해 사각형의 색깔을 입혀 역동적으로 표현가능하다.

alt 를 통해 조건을 표시할 수 있고, 나는 critical 를 통해 API 요청을 나타내었다.

손으로 직접 하나씩 그리는 것 보다 훨씬 유용하다.

시퀀스 다이어그램이 아니더라도, 많은 기능을 제공하고 있으니 docs 가 필요할 때, 다른 것을 사용해보려 한다.