VSCode에서 Mermaid Chart로 다이어그램 그리기: 개발자를 위한 완벽 가이드

VSCode에서 Mermaid Chart로 다이어그램 그리기: 개발자를 위한 완벽 가이드

개발 과정에서 시스템 구조나 프로세스를 시각화해야 할 때가 있다. 복잡한 그래픽 도구 대신 코드로 다이어그램을 그릴 수 있다면 얼마나 좋을까? Mermaid Chart는 바로 그런 니즈를 충족시켜주는 강력한 도구이다.

Mermaid Chart란?

Mermaid는 텍스트 기반의 다이어그램 생성 도구이다. 마크다운과 유사한 문법을 사용해 다양한 종류의 차트와 다이어그램을 생성할 수 있다. 플로우차트, 시퀀스 다이어그램, 간트 차트, 클래스 다이어그램 등을 코드로 작성할 수 있어 개발자들에게 특히 인기가 높다.

VSCode Mermaid Extension 설치

1. Extension 설치

VSCode에서 Extensions 탭(Ctrl+Shift+X)을 열고 "Mermaid Chart"를 검색한다. 가장 인기 있는 확장 프로그램은 Mermaid Chart이다.

2. 설치 확인

설치가 완료되면 .mmd 또는 .mermaid 파일을 생성하거나, 마크다운 파일에서 mermaid 코드 블록을 사용할 수 있다.

다이어그램 내보내기 (Export)

Mermaid Chart Extension의 가장 유용한 기능 중 하나는 생성된 다이어그램을 다양한 형식으로 내보낼 수 있다는 점이다.

지원하는 내보내기 형식

• SVG: 벡터 그래픽 형식으로 확대해도 화질이 깨지지 않는다
• PNG: 래스터 이미지 형식으로 일반적인 이미지 용도에 적합하다

내보내기 방법

1. 다이어그램을 작성한 후 미리보기 창을 연다
2. 미리보기 창에서 우클릭하거나 상단의 내보내기 버튼을 클릭한다
3. 원하는 형식(SVG 또는 PNG)을 선택한다
4. 저장할 위치를 지정하고 파일을 저장한다

이 기능을 통해 프레젠테이션, 문서, 웹사이트 등에서 고품질의 다이어그램을 활용할 수 있다.

기본 사용법

파일 생성 및 미리보기

1. 새 파일을 생성하고 .mmd 확장자로 저장한다
2. Ctrl+Shift+P를 눌러 Command Palette를 연다
3. "Mermaid: Preview Mermaid Diagram"을 선택하여 미리보기 창을 연다

실전 예제로 배우는 Mermaid

1. 플로우차트 (Flowchart)

사용자 로그인 프로세스를 플로우차트로 표현해보겠다.

flowchart TD
    A[사용자 접속] --> B{로그인 여부 확인}
    B -->|Yes| C[메인 페이지 이동]
    B -->|No| D[로그인 페이지 이동]
    D --> E[로그인 정보 입력]
    E --> F{인증 확인}
    F -->|Success| C
    F -->|Fail| G[에러 메시지 표시]
    G --> D

핵심 문법:

• flowchart TD: 위에서 아래로 흐르는 플로우차트이다
• []: 사각형 박스이다
• {}: 다이아몬드 모양 (조건문)이다
• -->: 화살표 연결이다
• -->|텍스트|: 라벨이 있는 화살표이다

2. 시퀀스 다이어그램 (Sequence Diagram)

API 호출 과정을 시퀀스 다이어그램으로 표현해보겠다.

sequenceDiagram
    participant U as 사용자
    participant F as 프론트엔드
    participant A as API 서버
    participant D as 데이터베이스

    U->>F: 데이터 요청
    F->>A: API 호출
    A->>D: 데이터 조회
    D-->>A: 데이터 반환
    A-->>F: JSON 응답
    F-->>U: 화면 업데이트

    Note over F,A: 인증 토큰 필요

핵심 문법:

• participant: 참여자 정의이다
• ->>: 동기 메시지이다
• -->>: 응답 메시지이다
• Note over: 노트 추가이다

3. 클래스 다이어그램 (Class Diagram)

간단한 전자상거래 시스템의 클래스 구조를 표현해보겠다.

classDiagram
    class User {
        +int id
        +string name
        +string email
        +login()
        +logout()
    }
    class Product {
        +int id
        +string name
        +float price
        +int stock
        +updateStock()
    }
    class Order {
        +int id
        +Date orderDate
        +float totalAmount
        +calculateTotal()
        +processPayment()
    }
    User --|> Order : places // User가 Order를 '생성'하는 관계를 표현한다면
    Order --o Product : contains // Order가 Product를 '포함'하는 관계를 표현한다면

핵심 문법:

• class: 클래스 정의이다
• +: public 메소드/속성이다
• -: private 메소드/속성이다
• ||--o{: 일대다 관계이다

4. 간트 차트 (Gantt Chart)

프로젝트 일정을 간트 차트로 표현해보겠다.

gantt
    title 웹 애플리케이션 개발 일정
    dateFormat  YYYY-MM-DD
    section 기획
    요구사항 분석    :done, req, 2024-01-01, 2024-01-07
    UI/UX 설계      :done, design, 2024-01-08, 2024-01-15

    section 개발
    프론트엔드 개발  :active, frontend, 2024-01-16, 2024-02-15
    백엔드 개발      :backend, 2024-01-20, 2024-02-20

    section 테스트
    단위 테스트      :test1, after frontend, 5d
    통합 테스트      :test2, after backend, 3d

    section 배포
    배포 준비        :deploy, after test2, 2d
    서비스 런칭      :launch, after deploy, 1d

마크다운과 함께 사용하기

README.md 파일이나 문서에서 Mermaid를 사용하려면 다음과 같이 코드 블록을 작성한다:

```mermaid
graph LR
    A[개발] --> B[테스트]
    B --> C[배포]
    C --> D[모니터링]
    D --> A
```

고급 기능 및 팁

1. 스타일 커스터마이징

flowchart LR
    A[시작] --> B[처리]
    B --> C[완료]

    classDef startEnd fill:#f96,stroke:#333,stroke-width:2px
    classDef process fill:#bbf,stroke:#333,stroke-width:2px

    class A startEnd
    class B process
    class C startEnd

2. 서브그래프 사용

flowchart TB
    subgraph "프론트엔드"
        A[React App]
        B[Redux Store]
    end

    subgraph "백엔드"
        C[Express Server]
        D[MongoDB]
    end

    A --> C
    C --> D

3. 유용한 단축키

• Ctrl+Shift+V: 마크다운 미리보기 (mermaid 포함)이다
• Ctrl+K V: 마크다운을 옆에서 미리보기이다
• Ctrl+Shift+P → "Mermaid: Preview": Mermaid 전용 미리보기이다

실무에서의 활용 사례

1. 시스템 아키텍처 문서화

graph TB
    subgraph "Client"
        A[웹 브라우저]
        B[모바일 앱]
    end

    subgraph "CDN"
        C[CloudFront]
    end

    subgraph "Load Balancer"
        D[ALB]
    end

    subgraph "Application"
        E[EC2 Instance 1]
        F[EC2 Instance 2]
    end

    subgraph "Database"
        G[RDS MySQL]
        H[Redis Cache]
    end

    A --> C
    B --> C
    C --> D
    D --> E
    D --> F
    E --> G
    F --> G
    E --> H
    F --> H

2. 코드 리뷰 프로세스

flowchart LR
    A[코드 작성] --> B[Pull Request 생성]
    B --> C{리뷰어 배정}
    C --> D[코드 리뷰]
    D --> E{승인 여부}
    E -->|승인| F[메인 브랜치 병합]
    E -->|수정 요청| G[코드 수정]
    G --> D
    F --> H[CI/CD 파이프라인 실행]

Mermaid의 장점

1. 버전 관리 친화적: 텍스트 기반이므로 Git으로 변경사항 추적이 가능하다
2. 협업 용이: 코드 리뷰 과정에서 다이어그램 변경사항도 함께 검토할 수 있다
3. 유지보수성: 시스템 변경 시 다이어그램도 쉽게 업데이트할 수 있다
4. 일관성: 팀 전체가 동일한 스타일과 표준으로 문서를 작성할 수 있다
5. 다양한 형식 지원: SVG, PNG 등 다양한 형식으로 내보내기가 가능하다

주의사항 및 제한사항

1. 복잡한 다이어그램의 한계: 매우 복잡한 다이어그램은 전문 도구가 더 적합할 수 있다
2. 브라우저 호환성: 일부 오래된 브라우저에서는 렌더링이 제대로 되지 않을 수 있다
3. 성능: 매우 큰 다이어그램은 렌더링 시간이 오래 걸릴 수 있다

마무리

Mermaid Chart는 개발자들이 문서화를 더 쉽고 효율적으로 할 수 있게 도와주는 강력한 도구이다. 특히 VSCode Extension과 함께 사용하면 개발 환경에서 바로 다이어그램을 작성하고 미리볼 수 있어 매우 편리하다.

SVG와 PNG 형식으로 내보내기가 가능한 점은 프레젠테이션이나 문서 작성 시 특히 유용하다. 코드와 함께 관리되는 문서화는 프로젝트의 품질을 높이고 팀 협업을 원활하게 만든다. 오늘부터 Mermaid를 활용해서 더 나은 문서화를 시작해보자!

---

더 많은 예제와 문법은 Mermaid 공식 문서에서 확인할 수 있다.