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: 래스터 이미지 형식으로 일반적인 이미지 용도에 적합하다
내보내기 방법
- 다이어그램을 작성한 후 미리보기 창을 연다
- 미리보기 창에서 우클릭하거나 상단의 내보내기 버튼을 클릭한다
- 원하는 형식(SVG 또는 PNG)을 선택한다
- 저장할 위치를 지정하고 파일을 저장한다
이 기능을 통해 프레젠테이션, 문서, 웹사이트 등에서 고품질의 다이어그램을 활용할 수 있다.
기본 사용법
파일 생성 및 미리보기
- 새 파일을 생성하고
.mmd확장자로 저장한다 Ctrl+Shift+P를 눌러 Command Palette를 연다- "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 startEnd2. 서브그래프 사용
flowchart TB
subgraph "프론트엔드"
A[React App]
B[Redux Store]
end
subgraph "백엔드"
C[Express Server]
D[MongoDB]
end
A --> C
C --> D3. 유용한 단축키
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 --> H2. 코드 리뷰 프로세스
flowchart LR
A[코드 작성] --> B[Pull Request 생성]
B --> C{리뷰어 배정}
C --> D[코드 리뷰]
D --> E{승인 여부}
E -->|승인| F[메인 브랜치 병합]
E -->|수정 요청| G[코드 수정]
G --> D
F --> H[CI/CD 파이프라인 실행]Mermaid의 장점
- 버전 관리 친화적: 텍스트 기반이므로 Git으로 변경사항 추적이 가능하다
- 협업 용이: 코드 리뷰 과정에서 다이어그램 변경사항도 함께 검토할 수 있다
- 유지보수성: 시스템 변경 시 다이어그램도 쉽게 업데이트할 수 있다
- 일관성: 팀 전체가 동일한 스타일과 표준으로 문서를 작성할 수 있다
- 다양한 형식 지원: SVG, PNG 등 다양한 형식으로 내보내기가 가능하다
주의사항 및 제한사항
- 복잡한 다이어그램의 한계: 매우 복잡한 다이어그램은 전문 도구가 더 적합할 수 있다
- 브라우저 호환성: 일부 오래된 브라우저에서는 렌더링이 제대로 되지 않을 수 있다
- 성능: 매우 큰 다이어그램은 렌더링 시간이 오래 걸릴 수 있다
마무리
Mermaid Chart는 개발자들이 문서화를 더 쉽고 효율적으로 할 수 있게 도와주는 강력한 도구이다. 특히 VSCode Extension과 함께 사용하면 개발 환경에서 바로 다이어그램을 작성하고 미리볼 수 있어 매우 편리하다.
SVG와 PNG 형식으로 내보내기가 가능한 점은 프레젠테이션이나 문서 작성 시 특히 유용하다. 코드와 함께 관리되는 문서화는 프로젝트의 품질을 높이고 팀 협업을 원활하게 만든다. 오늘부터 Mermaid를 활용해서 더 나은 문서화를 시작해보자!
더 많은 예제와 문법은 Mermaid 공식 문서에서 확인할 수 있다.