Mermaid 레퍼런스

다이어그램 타입 총정리

Mermaid가 지원하는 모든 다이어그램 타입과 시작 키워드를 정리합니다. 각 다이어그램은 고유한 문법을 가지며, 첫 줄의 키워드로 종류를 결정합니다.

• •graph / flowchart — 플로우차트 (방향: TD, LR, BT, RL)
• •sequenceDiagram — 시퀀스 다이어그램
• •classDiagram — 클래스 다이어그램
• •stateDiagram-v2 — 상태 다이어그램
• •erDiagram — ER 다이어그램
• •gantt — 간트 차트
• •pie — 파이 차트
• •mindmap — 마인드맵
• •gitgraph — Git 브랜치 다이어그램
• •journey — 사용자 여정 맵
• •timeline — 타임라인
• •C4Context — C4 아키텍처 다이어그램

플로우차트 노드 모양 레퍼런스

graph LR
    A[사각형] --> B(둥근 사각형)
    B --> C{다이아몬드}
    C --> D((원형))
    D --> E[/평행사변형/]
    E --> F[\역 평행사변형\]
    F --> G>깃발 모양]
    G --> H{{육각형}}
    H --> I[[서브루틴]]
    I --> J[(데이터베이스)]

연결선 스타일 레퍼런스

• •A --> B : 실선 화살표
• •A --- B : 실선 (화살표 없음)
• •A -.-> B : 점선 화살표
• •A -.- B : 점선 (화살표 없음)
• •A ==> B : 굵은 실선 화살표
• •A === B : 굵은 실선 (화살표 없음)
• •A -->|텍스트| B : 라벨이 있는 화살표
• •A -- 텍스트 --> B : 라벨이 있는 화살표 (대체 문법)

테마와 설정

Mermaid는 다양한 내장 테마를 제공하며, 디렉티브(directive)를 통해 세밀한 커스터마이징이 가능합니다.

%%{init: {
  'theme': 'base',
  'themeVariables': {
    'primaryColor': '#4f46e5',
    'primaryTextColor': '#ffffff',
    'primaryBorderColor': '#3730a3',
    'lineColor': '#6366f1',
    'secondaryColor': '#e0e7ff',
    'tertiaryColor': '#f5f3ff',
    'fontSize': '16px'
  }
}}%%
graph TD
    A[시작] --> B[처리]
    B --> C{판단}
    C -->|Yes| D[완료]
    C -->|No| E[재시도]
    E --> B

내장 테마 목록

• •default — 기본 테마 (밝은 파란색 계열)
• •dark — 다크 모드 테마
• •forest — 녹색 계열 자연 테마
• •neutral — 회색 계열 중립 테마
• •base — 커스텀 테마의 기반 (themeVariables와 함께 사용)

시퀀스 다이어그램 화살표 레퍼런스

• •->> : 실선 화살표 (동기 호출)
• •-->> : 점선 화살표 (응답/반환)
• •-) : 비동기 메시지 (열린 화살표)
• •--) : 점선 비동기 메시지
• •-x : 실선 X 화살표 (실패)
• •--x : 점선 X 화살표

ER 다이어그램 관계 기호 레퍼런스

||--||  정확히 1 대 정확히 1
||--o|  정확히 1 대 0 또는 1
||--|{  정확히 1 대 1 이상
||--o{  정확히 1 대 0 이상

왼쪽 기호:
  || : 정확히 하나 (필수)
  o| : 0 또는 하나 (선택)

오른쪽 기호:
  || : 정확히 하나 (필수)
  o| : 0 또는 하나 (선택)
  |{ : 하나 이상 (필수 다수)
  o{ : 0 이상 (선택 다수)