3. 플로우차트 — Mermaid
published 섹션: 다이어그램 시리즈 > 플로우차트 Updated: 2026-04-22
Mermaid는 텍스트(코드)로 다이어그램을 그리는 도구입니다. 마크다운 안에 코드를 적으면 자동으로 그림이 됩니다.
1. 왜 Mermaid인가
- GitHub에 push하면 자동 렌더링 (별도 도구 불필요)
- Notion, Obsidian에서도 지원
- 텍스트라서 Git diff로 변경점 확인 가능
- AI에게 "이거 플로우차트로 그려줘"하면 바로 생성 가능
2. 기본 문법 (5분이면 충분)
flowchart TD
A[시작] --> B{조건?}
B -->|Yes| C[작업 수행]
B -->|No| D[종료]
C --> D
| 문법 |
뜻 |
flowchart TD |
위→아래 플로우차트 (TD = Top Down) |
flowchart LR |
왼→오 플로우차트 (LR = Left Right) |
A[텍스트] |
사각형 노드 |
A{텍스트} |
마름모 (분기) |
A([텍스트]) |
둥근 사각형 (시작/끝) |
--> |
화살표 |
| `--> |
텍스트 |
-.-> |
점선 화살표 |
style A fill:#색상 |
노드 색상 지정 |
3. 어디서 쓸 수 있는가
| 환경 |
방법 |
| GitHub |
.md 파일에 코드블록으로 넣으면 자동 렌더링 |
| mermaid.live |
브라우저에서 바로 편집 + 미리보기 |
| VS Code |
Markdown Preview Enhanced 확장 |
| Notion |
/mermaid 블록 |
| Obsidian |
기본 지원 |
4. 장점
- 수정이 가장 빠름: 노드 하나 추가 = 코드 한 줄 추가. 자동 레이아웃.
- Git 친화적: 텍스트 diff로 "뭐가 바뀌었는지" 코드리뷰 가능
- AI 생성 최적: "이 플로우를 Mermaid로 그려줘" 한마디면 됨
- 문서와 함께 관리: 마크다운 안에 다이어그램이 같이 있으니 따로 파일 관리 불필요
5. 단점
- 레이아웃 자유도 낮음: 자동 배치라서 "이 노드를 저기로 옮기기" 불가
- 노드 20개 넘으면 자동 레이아웃이 복잡해짐
- 스타일링 제한: 색상·크기 정도만 조절 가능, 세밀한 디자인 어려움
- 인터랙션 없음: 클릭, 확대/축소 등 불가
6. 이런 사람에게 추천
- 문서(README, PR)에 다이어그램을 넣고 싶은 사람
- 빠르게 그리고 빠르게 수정하고 싶은 사람
- Git으로 변경 이력을 관리하고 싶은 사람
- AI와 함께 작업하는 사람
7. 이런 경우엔 비추
- 노드를 정확한 위치에 배치해야 하는 경우 → draw.io
- 손그림 느낌의 스케치가 필요한 경우 → Excalidraw
- 30개 이상의 복잡한 다이어그램 → draw.io
다음: 03-4. 플로우차트 — draw.io