터미널에서 mermaid 파일 변환하기

 

vs-code 터미널에 아래 명령어를 입력하여 mermaid-cli를 설치합니다.

npm install -g @mermaid-js/mermaid-cli

 

아래의 diagram.mmd 처럼 원하는 내용으로 파일을 생성합니다. 간단하게 gpt에 '로그인 흐름을 정리한 mermaid 작성해줘.' 라고 입력하여 생성해 봅니다.

sequenceDiagram
    participant Client
    participant Frontend
    participant Backend
    participant Redis

    Note over Client,Frontend: 1. 로그인 요청
    Client->>Frontend: 로그인 정보 입력
    Frontend->>Backend: POST /auth/login (id, pw)

    Note over Backend,Redis: 2. 사용자 인증 후 토큰 발급
    Backend-->>Redis: 저장(refreshToken, userId, 만료시간)
    Backend-->>Frontend: accessToken + refreshToken (HttpOnly Cookie)

    Note over Frontend: accessToken은 메모리 or 쿠키에 저장, refreshToken은 HttpOnly 쿠키에 저장됨

    Note over Frontend,Backend: 3. 보호된 리소스 요청
    Frontend->>Backend: GET /protected (Authorization: Bearer accessToken)
    Backend-->>Frontend: 리소스 응답 or accessToken 만료

    alt accessToken 만료
        Note over Frontend,Backend: 4. refreshToken으로 재발급 요청
        Frontend->>Backend: POST /auth/refresh (Cookie에 refreshToken 포함)
        Backend->>Redis: refreshToken 존재 여부 및 만료 여부 확인
        Redis-->>Backend: 유효함
        Backend-->>Frontend: 새 accessToken 발급
    end

    Note over Frontend: 이후 요청은 새 accessToken 사용

    alt 로그아웃 시
        Frontend->>Backend: POST /auth/logout
        Backend->>Redis: delete(refreshToken)
        Backend-->>Frontend: 로그아웃 완료
    end

 

다시 터미널에 아래 명령어를 입력하여 원하는 확장자로 파일을 생성합니다. 아래 예시에서는 png 파일을 생성하였습니다. (pdf등 다른 확장자도 가능)

mmdc -i diagram.mmd -o diagram.png

 

그러면 아래와 같이 diagram.png 파일이 생성된 것을 확인할 수 있습니다.

mermaid-cli를 이용하여 생성한 diagram.png