레슨 1 / 8·15분
플로우차트
플로우차트란?
Mermaid 플로우차트는 텍스트만으로 프로세스 흐름을 시각화할 수 있는 강력한 도구입니다. Markdown 문서 안에 직접 작성할 수 있어 별도의 그래픽 도구 없이도 깔끔한 다이어그램을 만들 수 있습니다. graph 키워드 뒤에 방향을 지정하면 다이어그램의 기본 레이아웃이 결정됩니다.
- •graph TD — 위에서 아래로(Top → Down)
- •graph LR — 왼쪽에서 오른쪽으로(Left → Right)
- •graph BT — 아래에서 위로(Bottom → Top)
- •graph RL — 오른쪽에서 왼쪽으로(Right → Left)
노드 모양 정의하기
노드는 괄호 종류에 따라 다양한 모양을 갖습니다. 각 모양은 다이어그램에서 서로 다른 역할(프로세스, 판단, 데이터 등)을 표현합니다.
mermaid
graph TD
A[사각형 노드]
B(둥근 사각형)
C{다이아몬드 - 판단}
D((원형 노드))
E[/평행사변형 - 입력/]
A --> B
B --> C
C -->|Yes| D
C -->|No| E화살표와 연결선
노드 사이의 연결선도 여러 스타일을 지원합니다. 실선, 점선, 굵은 선 등을 사용하여 관계의 성격을 시각적으로 구분할 수 있습니다.
mermaid
graph LR
A -->|실선 화살표| B
C ---|실선 연결| D
E -.->|점선 화살표| F
G ==>|굵은 화살표| H
subgraph 주문 프로세스
I[주문 접수] --> J[결제 확인]
J --> K[배송 준비]
end
subgraph 배송 프로세스
K --> L[출고]
L --> M[배송 완료]
end💡
subgraph를 사용하면 관련 노드를 하나의 영역으로 묶어 복잡한 플로우차트를 구조적으로 정리할 수 있습니다. subgraph 이름 … end 형태로 작성합니다.