mermaid를 이용해서 시퀀스 다이어그램 그리기

eunoia73·2025년 2월 15일
1

TIL

목록 보기
15/32

1. 시퀀스 다이어그램(sequence diagram)

시간 순서로 정렬된 객체 상호작용을 보여주는 다이어그램.
시나리오 기능을 수행하는데 필수적인 객체들 간에 교환되는 메시지를 표현한다.

Mermaid 관련 링크

Mermaid doc

Mermaid Live Editor

2. 시퀀스 다이어그램을 프로젝트 초기 단계에서 사용하는 이유

  1. 복잡한 시스템 상호작용의 명확한 시각화
    시퀀스 다이어그램은 시스템 내 객체 간의 상호작용과 데이터 흐름을 시간 순서대로 나타낸다. 이는 복잡한 프로세스를 직관적으로 이해하는 데 도움을 준다.

  2. 문제 조기 발견
    시퀀스 다이어그램은 설계 단계에서 병목현상, 비효율성 같은 잠재적인 문제를 조기에 식별할 수 있도록 돕는다.
    개발 중 발생할 수 있는 오류를 줄이고, 개발 시간을 절약할 수 있다.

  3. 협업 및 커뮤니케이션 강화
    Mermaid는 간단한 텍스트 기반 문법으로 다이어그램을 작성할 수 있어, 팀원 간의 협업이 용이하다.

3. Mermaid를 이용한 시퀀스 다이어그램 예시

  • 사내 캘린더에서 프롬프트를 이용한 일정 생성 ai기능에 대한 시퀀스 다이어그램

sequenceDiagram
    participant User
    participant Client
    participant Server
    participant Ai Server
    participant Database

    
    User->>Client: 프롬프트 입력 후 버튼 클릭
    Client->>Server: POST /api/ai/natural
    Note over Client, Server: prompt, 토큰
    Server->>Server: 토큰 유효성 검사
    alt 토큰이 유효하지 않은 경우
        Server->>Client: 인증 오류 코드
        Client->>User: 토큰 인증 오류를 적절히 표현
    else 토큰이 유효한 경우
        Server->> Ai Server: prompt 기반 ai 요청
        Ai Server-->>Server: ai 서버 응답
        Server-->>Client: ai 기반으로 생성된 일정 정보 반환
        Client-->>User: 정보가 채워진 일정 생성 화면
     end
        User->>Client: 일정 생성 버튼 클릭
        Client->>Server: POST /api/calendar/{calendarId}/events
        Note over Client,Server: 일정 정보, 토큰
        Server->>Server: 토큰 유효성 검사
        alt 토큰이 유효하지 않은 경우
            Server->>Client: 인증 오류 코드
            Client->>User: 토큰 인증 오류를 적절히 표현
        else 토큰이 유효한 경우
            Server->>Database: 일정 생성
            Database-->>Server: 일정 저장 완료
            Server-->>Client: 생성된 일정 정보
            Client-->>User: 새로운 일정이 추가된 캘린더 화면
        end
   

0개의 댓글