Mermaid 다이어그램 한눈에 보기(플로우차트부터 시퀀스까지)-고슴도치 군단

Mermaid 개요

Mermaid는 텍스트 기반으로 다이어그램을 그릴 수 있는 오픈소스 도구임.

코드처럼 작성한 텍스트가 자동으로 시각적인 다이어그램으로 변환되어, 별도의 그래픽 툴 없이도 플로우차트·시퀀스 다이어그램·ER 다이어그램 등을 만들 수 있음.

Markdown과 궁합이 좋아 GitHub README, GitLab, Notion, Obsidian 등 다양한 플랫폼에서 기본 지원하고 있음.

플로우차트 기본 문법

Mermaid에서 가장 많이 사용하는 다이어그램 유형은 플로우차트(flowchart)임.

flowchart TD 또는 graph TD로 시작하며, TD는 Top-Down(위에서 아래), LR은 Left-Right(왼쪽에서 오른쪽) 방향을 의미함.

노드 모양은 [](사각형), ()(둥근 사각형), {}(마름모) 등으로 구분하며, 화살표로 흐름을 연결함.

flowchart TD
    A[시작] --> B{조건 확인}
    B -- Yes --> C[실행]
    B -- No --> D[종료]
    C --> D

시퀀스 다이어그램 작성법

시퀀스 다이어그램은 여러 객체 간의 메시지 흐름을 시간 순서대로 표현할 때 사용함.

API 호출 흐름이나 서비스 간 통신 과정을 설명할 때 매우 유용하며, sequenceDiagram 키워드로 시작함.

participant로 참여자를 정의하고, ->> 는 실선 화살표, -->> 는 점선 화살표로 응답을 표현하는 방식임.

sequenceDiagram
    participant C as 클라이언트
    participant S as 서버
    participant DB as 데이터베이스

    C->>S: 로그인 요청
    S->>DB: 사용자 조회
    DB-->>S: 결과 반환
    S-->>C: JWT 토큰 발급

클래스 다이어그램

클래스 다이어그램은 객체지향 설계에서 클래스 구조와 관계를 표현하는 데 사용함.

classDiagram 키워드로 시작하며, 상속(<|--), 구성(*--), 연관(-->) 등 다양한 관계를 표현할 수 있음.

코드 리뷰나 아키텍처 문서에 활용하면 팀 커뮤니케이션과 온보딩에 큰 도움이 됨.

classDiagram
    Animal <|-- Dog
    Animal <|-- Cat
    class Animal {
        +String name
        +speak()
    }
    class Dog {
        +fetch()
    }
    class Cat {
        +purr()
    }

Gantt 차트 및 기타 다이어그램

Mermaid는 플로우차트와 시퀀스 외에도 Gantt 차트, Pie 차트, ER 다이어그램, Git 그래프 등 다양한 유형을 지원함.

Gantt 차트는 프로젝트 일정을 시각화할 때 사용하며, gantt 키워드로 시작하고 날짜 형식과 섹션을 지정해 항목별 기간을 한눈에 보여줌.

특히 GitHub에서는 별도 플러그인 없이 마크다운 코드 블록에 ```mermaid를 지정하면 자동 렌더링이 되어 문서에 바로 삽입할 수 있음.

gantt
    title 프로젝트 일정
    dateFormat  YYYY-MM-DD
    section 기획
    요구사항 분석    :a1, 2024-01-01, 7d
    section 개발
    백엔드 개발      :a2, after a1, 14d
    프론트엔드 개발  :a3, after a1, 14d

주요 사용 환경

Mermaid는 다양한 환경에서 기본 지원하거나 플러그인으로 쉽게 연동이 가능함.

GitHub, GitLab 등 주요 Git 플랫폼에서 README에 바로 렌더링되며, VS Code에서는 Mermaid Preview 확장을 통해 실시간 미리보기가 가능함.

공식 라이브 에디터(mermaid.live)에서는 별도 설치 없이 브라우저에서 바로 작성하고 PNG/SVG로 내보낼 수 있어 처음 입문하기에 최적임.

마무리

Mermaid는 코드 작성에 익숙한 개발자라면 빠르게 익힐 수 있는 다이어그램 도구임.

텍스트 기반이라 Git으로 버전 관리가 가능하고, 다양한 플랫폼에서 지원하므로 문서화 작업 효율을 크게 높일 수 있음.

플로우차트부터 시작해서 시퀀스, 클래스, Gantt 차트 순으로 익혀나가면 대부분의 개발 문서 시각화 요구사항을 커버할 수 있음.