Learning
레슨 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 형태로 작성합니다.