다이어그램
마크다운은 Mermaid 문법을 사용해 다양한 종류의 다이어그램과 순서도를 만들 수 있어, 문서에 시각적 표현을 더할 수 있습니다.
Mermaid 소개
Mermaid는 텍스트 기반 다이어그램 생성 도구로, 여러 다이어그램 유형을 지원합니다:
- 순서도(Flowchart)
- 시퀀스 다이어그램(Sequence Diagram)
- 간트 차트(Gantt Chart)
- 클래스 다이어그램(Class Diagram)
- 상태 다이어그램(State Diagram)
- 파이 차트(Pie Chart)
- 사용자 여정(User Journey)
- Git 그래프(Git Graph)
기본 문법
순서도(Flowchart)
markdown
```mermaid
flowchart TD
A[시작] --> B{로그인됨?}
B -->|예| C[홈 화면 표시]
B -->|아니오| D[로그인 화면 표시]
C --> E[종료]
D --> F[사용자 로그인]
F --> G{로그인 성공?}
G -->|예| C
G -->|아니오| H[오류 표시]
H --> D
**렌더링 결과:**
```mermaid
flowchart TD
A[시작] --> B{로그인됨?}
B -->|예| C[홈 화면 표시]
B -->|아니오| D[로그인 화면 표시]
C --> E[종료]
D --> F[사용자 로그인]
F --> G{로그인 성공?}
G -->|예| C
G -->|아니오| H[오류 표시]
H --> D시퀀스 다이어그램
markdown
```mermaid
sequenceDiagram
participant 사용자
participant 프론트엔드
participant 백엔드
participant 데이터베이스
사용자->>프론트엔드: 로그인 요청
프론트엔드->>백엔드: 사용자 검증
백엔드->>데이터베이스: 사용자 데이터 조회
데이터베이스-->>백엔드: 사용자 정보 반환
백엔드-->>프론트엔드: 검증 결과
프론트엔드-->>사용자: 로그인 응답
**렌더링 결과:**
```mermaid
sequenceDiagram
participant 사용자
participant 프론트엔드
participant 백엔드
participant 데이터베이스
사용자->>프론트엔드: 로그인 요청
프론트엔드->>백엔드: 사용자 검증
백엔드->>데이터베이스: 사용자 데이터 조회
데이터베이스-->>백엔드: 사용자 정보 반환
백엔드-->>프론트엔드: 검증 결과
프론트엔드-->>사용자: 로그인 응답순서도 상세
노드 유형
markdown
```mermaid
flowchart LR
A[사각형 노드]
B(둥근 노드)
C((원형 노드))
D{마름모 노드}
E[[서브루틴]]
F[(데이터베이스)]
G>라벨 노드]
**렌더링 결과:**
```mermaid
flowchart LR
A[사각형 노드]
B(둥근 노드)
C((원형 노드))
D{마름모 노드}
E[[서브루틴]]
F[(데이터베이스)]
G>라벨 노드]엣지(선) 유형
markdown
```mermaid
flowchart TD
A --> B
C --- D
E -.-> F
G ==> H
I --o J
K --x L
**렌더링 결과:**
```mermaid
flowchart TD
A --> B
C --- D
E -.-> F
G ==> H
I --o J
K --x L방향 제어
markdown
<!-- 위에서 아래로 -->
```mermaid
flowchart TD
A --> Bmermaid
flowchart BT
A --> Bmermaid
flowchart LR
A --> Bmermaid
flowchart RL
A --> B
### 복잡한 순서도 예시
```markdown
```mermaid
flowchart TD
Start([프로젝트 시작]) --> Analysis[요구사항 분석]
Analysis --> Design[시스템 설계]
Design --> Dev{개발 단계}
Dev --> Frontend[프론트엔드 개발]
Dev --> Backend[백엔드 개발]
Dev --> Database[데이터베이스 설계]
Frontend --> FrontTest[프론트엔드 테스트]
Backend --> BackTest[백엔드 테스트]
Database --> DataTest[데이터 테스트]
FrontTest --> Integration[통합 테스트]
BackTest --> Integration
DataTest --> Integration
Integration --> Deploy{배포 준비}
Deploy -->|성공| Production[운영]
Deploy -->|실패| Bug[문제 수정]
Bug --> Integration
Production --> Monitor[모니터링]
Monitor --> End([프로젝트 완료])
style Start fill:#e1f5fe
style End fill:#e8f5e8
style Bug fill:#ffebee
**렌더링 결과:**
```mermaid
flowchart TD
Start([프로젝트 시작]) --> Analysis[요구사항 분석]
Analysis --> Design[시스템 설계]
Design --> Dev{개발 단계}
Dev --> Frontend[프론트엔드 개발]
Dev --> Backend[백엔드 개발]
Dev --> Database[데이터베이스 설계]
Frontend --> FrontTest[프론트엔드 테스트]
Backend --> BackTest[백엔드 테스트]
Database --> DataTest[데이터 테스트]
FrontTest --> Integration[통합 테스트]
BackTest --> Integration
DataTest --> Integration
Integration --> Deploy{배포 준비}
Deploy -->|성공| Production[운영]
Deploy -->|실패| Bug[문제 수정]
Bug --> Integration
Production --> Monitor[모니터링]
Monitor --> End([프로젝트 완료])
style Start fill:#e1f5fe
style End fill:#e8f5e8
style Bug fill:#ffebee시퀀스 다이어그램 상세
기본 문법
mermaid
sequenceDiagram
Alice->>Bob: 안녕 Bob, 잘 지내?
Bob-->>Alice: 잘 지내, 고마워!
Alice-)Bob: 잘 가!렌더링 결과:
mermaid
sequenceDiagram
Alice->>Bob: 안녕 Bob, 잘 지내?
Bob-->>Alice: 잘 지내, 고마워!
Alice-)Bob: 잘 가!활성화 바와 생명선
mermaid
sequenceDiagram
participant A as 클라이언트
participant B as 서버
A->>+B: 데이터 요청
Note right of B: 요청 처리 중
B-->>-A: 데이터 반환
A->>+B: 또 다른 요청
B->>+B: 내부 처리
B-->>-B: 처리 완료
B-->>-A: 결과 반환렌더링 결과:
mermaid
sequenceDiagram
participant A as 클라이언트
participant B as 서버
A->>+B: 데이터 요청
Note right of B: 요청 처리 중
B-->>-A: 데이터 반환
A->>+B: 또 다른 요청
B->>+B: 내부 처리
B-->>-B: 처리 완료
B-->>-A: 결과 반환반복과 조건
mermaid
sequenceDiagram
participant U as 사용자
participant S as 시스템
U->>S: 로그인 요청
alt 사용자명 존재
S->>S: 비밀번호 검증
alt 비밀번호 일치
S-->>U: 로그인 성공
else 비밀번호 불일치
S-->>U: 비밀번호 오류
end
else 사용자명 없음
S-->>U: 사용자 없음
end
opt "로그인 상태 저장"
S->>S: 로그인 상태 저장
end렌더링 결과:
mermaid
sequenceDiagram
participant U as 사용자
participant S as 시스템
U->>S: 로그인 요청
alt 사용자명 존재
S->>S: 비밀번호 검증
alt 비밀번호 일치
S-->>U: 로그인 성공
else 비밀번호 불일치
S-->>U: 비밀번호 오류
end
else 사용자명 없음
S-->>U: 사용자 없음
end
opt "로그인 상태 저장"
S->>S: 로그인 상태 저장
end클래스 다이어그램
mermaid
classDiagram
class 동물 {
+String 이름
+int 나이
+먹다()
+자다()
}
class 개 {
+String 품종
+짖다()
+꼬리흔들기()
}
class 고양이 {
+String 색상
+야옹()
+갸르릉()
}
동물 <|-- 개
동물 <|-- 고양이
class 주인 {
+String 이름
+반려동물먹이주기()
}
주인 --> 동물 : 소유렌더링 결과:
mermaid
classDiagram
class 동물 {
+String 이름
+int 나이
+먹다()
+자다()
}
class 개 {
+String 품종
+짖다()
+꼬리흔들기()
}
class 고양이 {
+String 색상
+야옹()
+갸르릉()
}
동물 <|-- 개
동물 <|-- 고양이
class 주인 {
+String 이름
+반려동물먹이주기()
}
주인 --> 동물 : 소유상태 다이어그램
mermaid
stateDiagram-v2
[*] --> 대기
대기 --> 실행중 : 시작
실행중 --> 일시정지 : 일시정지
실행중 --> 완료 : 종료
일시정지 --> 실행중 : 재개
일시정지 --> 중지 : 중지
중지 --> 대기 : 리셋
완료 --> 대기 : 리셋
완료 --> [*]
state 실행중 {
[*] --> 초기화
초기화 --> 처리중
처리중 --> 검증
검증 --> [*]
}렌더링 결과:
mermaid
stateDiagram-v2
[*] --> 대기
대기 --> 실행중 : 시작
실행중 --> 일시정지 : 일시정지
실행중 --> 완료 : 종료
일시정지 --> 실행중 : 재개
일시정지 --> 중지 : 중지
중지 --> 대기 : 리셋
완료 --> 대기 : 리셋
완료 --> [*]
state 실행중 {
[*] --> 초기화
초기화 --> 처리중
처리중 --> 검증
검증 --> [*]
}간트 차트
mermaid
gantt
title 프로젝트 개발 일정
dateFormat YYYY-MM-DD
section 요구사항 분석
요구사항 수집 :done, des1, 2024-01-01,2024-01-05
요구사항 분석 :done, des2, after des1, 5d
요구사항 검토 :done, des3, after des2, 2d
section 설계 단계
시스템 설계 :active, design1, 2024-01-12, 7d
UI 설계 : design2, after design1, 5d
데이터베이스 설계 : design3, after design1, 3d
section 개발 단계
프론트엔드 개발 : dev1, after design2, 10d
백엔드 개발 : dev2, after design3, 12d
테스트 : test1, after dev1, 5d파이 차트
mermaid
pie title 웹사이트 트래픽 소스
"검색 엔진" : 45
"소셜 미디어" : 25
"직접 방문" : 20
"이메일 마케팅" : 7
"기타" : 3사용자 여정
mermaid
journey
title 사용자 쇼핑 여정
section 탐색
홈페이지 방문: 3: 사용자
Browse Products: 4: 사용자
Search Products: 4: 사용자
section 고려
상세 보기: 4: 사용자
가격 비교: 3: 사용자
리뷰 읽기: 5: 사용자
section 구매
장바구니 담기: 4: 사용자
결제하기: 3: 사용자
결제 완료: 2: 사용자
section 사용
상품 수령: 5: 사용자
상품 사용: 4: 사용자
리뷰 작성: 4: 사용자Git 그래프
mermaid
gitgraph
commit id: "최초 커밋"
commit id: "사용자 모듈 추가"
branch feature/auth
commit id: "로그인 기능 추가"
commit id: "회원가입 기능 추가"
checkout main
commit id: "홈 버그 수정"
merge feature/auth
commit id: "v1.0 릴리즈"
branch hotfix
commit id: "긴급 수정"
checkout main
merge hotfix
commit id: "v1.0.1 릴리즈"실전 시나리오
시스템 아키텍처 다이어그램
mermaid
flowchart TB
subgraph "사용자 계층"
Web[웹 브라우저]
Mobile[모바일 앱]
API[API 클라이언트]
end
subgraph "게이트웨이 계층"
Gateway[API 게이트웨이]
Auth[인증 서비스]
end
subgraph "서비스 계층"
UserService[사용자 서비스]
OrderService[주문 서비스]
PaymentService[결제 서비스]
NotificationService[알림 서비스]
end
subgraph "데이터 계층"
UserDB[(사용자 DB)]
OrderDB[(주문 DB)]
Cache[(Redis 캐시)]
Queue[메시지 큐]
end
Web --> Gateway
Mobile --> Gateway
API --> Gateway
Gateway --> Auth
Gateway --> UserService
Gateway --> OrderService
Gateway --> PaymentService
UserService --> UserDB
OrderService --> OrderDB
PaymentService --> Queue
NotificationService --> Queue
UserService --> Cache
OrderService --> Cache
style Gateway fill:#e1f5fe
style Auth fill:#fff3e0
style Cache fill:#f3e5f5API 호출 흐름
mermaid
sequenceDiagram
participant C as 클라이언트
participant G as API 게이트웨이
participant A as 인증 서비스
participant U as 사용자 서비스
participant D as 데이터베이스
participant R as Redis
C->>G: 사용자 정보 요청
G->>A: 토큰 검증
A->>R: 토큰 캐시 확인
R-->>A: 토큰 유효
A-->>G: 인증 성공
G->>U: 사용자 정보 가져오기
U->>R: 사용자 캐시 확인
alt 캐시 있음
R-->>U: 사용자 데이터 반환
else 캐시 없음
U->>D: 데이터베이스 조회
D-->>U: 사용자 정보 반환
U->>R: 캐시 업데이트
end
U-->>G: 사용자 정보 반환
G-->>C: 사용자 데이터 응답비즈니스 순서도
mermaid
flowchart TD
Start([사용자 주문]) --> Check{재고 확인}
Check -->|재고 있음| Reserve[재고 예약]
Check -->|재고 없음| OutOfStock[재고 부족]
OutOfStock --> Notify[사용자 알림]
Notify --> End1([종료])
Reserve --> Payment{결제 처리}
Payment -->|성공| ConfirmOrder[주문 확정]
Payment -->|실패| ReleaseStock[재고 해제]
ReleaseStock --> PaymentFailed[결제 실패]
PaymentFailed --> End2([종료])
ConfirmOrder --> UpdateInventory[재고 업데이트]
UpdateInventory --> SendNotification[알림 전송]
SendNotification --> Logistics[물류 처리]
Logistics --> End3([주문 완료])
style Start fill:#e8f5e8
style End1 fill:#ffebee
style End2 fill:#ffebee
style End3 fill:#e8f5e8
style OutOfStock fill:#ffebee
style PaymentFailed fill:#ffebee스타일과 테마
노드 스타일
mermaid
flowchart LR
A[기본 스타일] --> B[스타일 1]
A --> C[스타일 2]
A --> D[스타일 3]
style B fill:#f9f,stroke:#333,stroke-width:4px
style C fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
style D fill:#f96,stroke:#333,stroke-width:4px,color:#fff클래스 스타일
mermaid
flowchart LR
A[노드 A]:::classA --> B[노드 B]:::classB
A --> C[노드 C]:::classC
classDef classA fill:#e1f5fe,stroke:#01579b,stroke-width:2px
classDef classB fill:#f3e5f5,stroke:#4a148c,stroke-width:2px
classDef classC fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px설정 및 호환성
VitePress 설정
javascript
// .vitepress/config.js
export default {
markdown: {
mermaid: true
}
}GitHub 지원
GitHub는 Mermaid를 기본 지원하므로, 마크다운 파일에서 바로 사용할 수 있습니다:
markdown
```mermaid
graph LR
A --> B
### 기타 플랫폼 지원
| 플랫폼 | 지원 | 설정 필요 여부 |
|--------------|--------------|-------------------|
| **GitHub** | ✅ 기본 | 없음 |
| **GitLab** | ✅ 기본 | 없음 |
| **VitePress**| ✅ 플러그인 | 설정 필요 |
| **Jekyll** | ✅ 플러그인 | 플러그인 설치 |
| **Hugo** | ✅ 테마 | 테마에 따라 다름 |
## 베스트 프랙티스
### 설계 팁
```markdown
✅ 권장:
1. **단순하게 유지하세요:**
- 너무 복잡한 다이어그램은 피하세요
- 명확한 라벨과 연결 사용
2. **논리적 레이아웃:**
- 적절한 다이어그램 방향 선택
- 논리적 흐름을 명확히
3. **일관된 스타일:**
- 일관된 색상 테마 사용
- 다이어그램 스타일 통일
4. **설명 추가:**
- 복잡한 다이어그램에는 제목 추가
- 필요한 텍스트 설명 제공
❌ 피해야 할 것:
1. 너무 복잡해서 이해하기 어려운 다이어그램
2. 교차선이 너무 많은 경우
3. 모호한 라벨
4. 범례 누락성능 고려사항
markdown
- **대형 다이어그램 최적화:**
- 복잡한 다이어그램은 분할을 고려
- 서브그래프로 구성
- **로드 성능:**
- 한 페이지에 다이어그램이 너무 많지 않게