MerMaid를 통해서 손쉽게 다이어그램 그리기

Mermaid란?

Mermaid는 텍스트 기반 DSL(Domain-Specific Language)을 사용해 플로우차트, 시퀀스 다이어그램, 클래스 다이어그램, 상태도, 간트 차트 등 다양한 시각화를 정의할 수 있는 DSL(Domain Specific Language)이다.

• 장점: GUI 조작 없이 텍스트로 작성 → 버전 관리(Git) 용이, 협업 최적화
• 지원 환경: Draw.io, GitHub, GitLab, VS Code, Notion 등

Mermaid 기본 문법

• 블록 선언: mermaid …
• 주석: %% 설명 내용
• 방향: -->, -->|text|, -.-> 등
• 키워드: flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, gantt, erDiagram, pie 등

예시: 간단한 플로우차트

flowchart LR
  A[시작] --> B{조건 판별}
  B -- Yes --> C[작업 1]
  B -- No --> D[작업 2]
  C --> E[종료]
  D --> E

Draw.io에서 Mermaid 사용하기

1. 다이어그램 선택
   • Draw.io(diagrams.net)에서 편집 중인 다이어그램을 연다
2. Mermaid 셰이프 활성화 (필요 시)
   • 왼쪽 Shapes 패널에서 Extras 카테고리를 확장한다
   • Mermaid 아이콘(</>)을 찾아 드래그 앤 드롭하여 캔버스에 배치한다.
3. Mermaid 코드 삽입
   • 캔버스 위의 Mermaid 셰이프를 더블클릭해 텍스트 편집기를 연다.
   • mermaid ... 블록 안에 다이어그램 코드를 붙여넣는다.
4. 렌더링 및 편집
   • 편집기를 닫으면 자동 렌더링되어 SVG 다이어그램이 생성된다.
   • 셰이프 크기·위치 조정, 스타일 적용 가능
5. 버전 관리
   • Mermaid 코드는 텍스트 형태로 관리되므로, Git 저장소에 .drawio 파일로 커밋하면 변경 내용 추적이 용이하다.

플로우차트 (Flowchart)

• 방향 지정: TB(위→아래), LR(왼→오), RL, BT
• 노드 모양: [], (), >{}, [( )]

flowchart TB
  Start((시작))
  Process1[첫 번째 처리]
  Decision{결정 지점}
  Process2[두 번째 처리]
  End((종료))
  Start --> Process1 --> Decision
  Decision -- Yes --> Process2 --> End
  Decision -- No --> End

시퀀스 다이어그램 (Sequence Diagram)

sequenceDiagram
  participant Alice
  participant Bob
  Alice->>Bob: 안녕하세요!
  Bob-->>Alice: 반갑습니다!

클래스 다이어그램 (Class Diagram)

classDiagram
  class Animal {
    +String name
    +eat()
  }
  class Dog {
    +String breed
    +bark()
  }
  Animal <|-- Dog

상태도 (State Diagram)

stateDiagram-v2
  [*] --> Idle
  Idle --> Processing: Start
  Processing --> Idle: Done
  Processing --> Error: Fail
  Error --> Idle: Reset

간트 차트 (Gantt Chart)

gantt
  title 프로젝트 일정
  dateFormat  YYYY-MM-DD

  section 설계
    분석       :a1, 2025-07-01, 5d
    설계       :after a1, 7d

  section 개발
    개발       :2025-07-10, 14d
    테스트     :2025-07-25, 5d

기타 다이어그램

• ER 다이어그램

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE_ITEM : contains

  CUSTOMER {
    string name
    string custNumber
  }
  ORDER {
    int orderNumber
    date orderDate
  }

• Pie Chart

pie title 사용 현황
  "A 옵션" : 45
  "B 옵션" : 25
  "C 옵션" : 30

스타일 & 테마

• 전역 설정: %%{init: { "theme": "forest" }}%%
• 노드 스타일: style 노드ID fill:#f9f,stroke:#333,stroke-width:2px

%%{init:{"theme":"dark"}}%%
flowchart LR
  A --> B
  style A fill:#bbf,stroke:#333,stroke-width:2px

Tip

• 자주 쓰는 코드 스니펫은 Draw.io 템플릿으로 저장
• 여러 다이어그램을 한 캔버스에 배치해 문서화
• Mermaid 코드는 .drawio 파일 내 XML로 포함되어 관리됨