머메이드차트의 종류

머메이드(Mermaid) 차트 완전 정복: 종류별 이해와 현업 활용 가이드

서론: 코드로 만나는 시각적 설계의 혁명

“문서 업데이트할 때마다 다이어그램이 지워져서 또 처음부터 그려야 해!”
“팀원들이 각자 다른 툴로 만든 다이어그램이 호환 안 된다고?”

소프트웨어 개발자부터 기술 문서 작성자까지, 복잡한 시스템을 시각화할 때 누구나 한 번쯤 겪는 고민입니다. 이런 문제의 해답으로 등장한 것이 바로 머메이드(Mermaid.js) 입니다. 머메이는 단순 텍스트 기반 문법으로 다양한 다이어그램을 생성하는 오픈소스 도구로, Git 저장소, 마크다운 파일, Confluence, Notion 등과 쉽게 통합됩니다. 코드처럼 버전 관리가 가능하고, 플랫폼 의존성이 없으며, 이해하기 쉬운 문법으로 협업 효율성을 극대화합니다. 오늘은 머메이가 제공하는 주요 차트 종류를 깊이 파헤치고, 어떤 상황에 어떤 차트를 사용해야 하는지 실전 팁과 함께 소개합니다.

본문: 머메이드의 핵심 차트 종류와 구체적 활용법

1. 플로우차트 (Flowchart)

용도: 프로세스, 알고리즘, 의사결정 흐름, 업무 절차를 직관적으로 표현. 가장 기본적이고 활용도 높은 차트.
MERMAID_PLACEHOLDER_0
주요 특징:
- 노드 모양: [ ] (직사각형 – 과정), { } (마름모 – 조건), (( )) (원 – 시작/종료), >] (뒤집힌 사다리꼴 – 수동 입력), [/ /] (마름모 – 병렬 처리) 등.
- 연결선: --> (실선 화살표), -.-> (점선 화살표), ==> (굵은 화살표), -- 텍스트 --> (라벨 추가).
- 하위 그래프 정의 가능 (subgraph id [...] end).
- 방향 제어 (TD: Top-Down, LR: Left-Right, RL: Right-Left, BT: Bottom-Top).
실용적 팁:
- 복잡한 플로우는 여러 개의 작은 서브그래프로 분할하여 가독성 향상.
- 노드와 선에 CSS 클래스를 적용하여 스타일링 가능 (style 노드id fill:#f9f,stroke:#333).
- 기본 방향(TD) 외 LR(가로) 방향도 많이 사용되며, 디스플레이 공간에 맞춰 선택.

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

용도: 객체나 시스템 컴포넌트 간의 시간 흐름에 따른 상호작용(메시지 교환)을 명확히 보여줌. 특히 API 호출, 메시징 시스템 설계에 필수.
MERMAID_PLACEHOLDER_1
주요 특징:
- 참여자 정의: participant, actor, boundary, database 등으로 역할 지정 및 별칭(as) 사용 가능.
- 메시지 타입: ->> (실선 화살표), -->> (점선 반환 메시지), ->x (비동기, 데이터 없음), ->>+ (비동기 + 활성화).
- 활성화 막대: activate/deactivate 또는 +/- 접두사로 객체가 작업을 수행 중임을 표시 (activate B).
- 루프(loop), 조건문(alt, opt), 병렬 처리(par), 주석(Note) 추가 가능.
실용적 팁:
- 복잡도 관리: 너무 많은 참여자나 메시지가 생기지 않도록 주의.
- loop, alt 구문 내부에 들여쓰기를 활용하여 가독성 확보.
- 주석(Note left of A: ...)을 활용해 핵심 동작 설명 추가.

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

용도: 객체 지향 프로그래밍(OOP)에서 클래스의 구조, 속성(멤버 변수), 메서드, 그리고 클래스 간 관계(상속, 연관, 의존 등)를 표현.
MERMAID_PLACEHOLDER_2
주요 특징:
- 클래스 정의: class 이름 { ... }. 멤버 표기: +(public), -(private), #(protected), ~(package).
- 관계 표현:
  - 상속(Generalization): <|-- (삼각형-실선 자식->부모)
  - 실체화(Realization): <|..
  - 연관(Association): --> (화살표 방향 중요), -- (양방향). 다중성("1", "0..*", "n"), 라벨 추가 가능.
  - 집합(Aggregation): o-- (속이 빈 다이아몬드-실선 전체->부분) – 전체가 사라져도 부분은 존재 가능.
  - 합성(Composition): *-- (속이 찬 다이아몬드-실선 전체->부분) – 전체가 사라지면 부분도 사라짐. 더 강한 관계.
  - 의존(Dependency): ..> (점선 화살표) – 한 클래스 변경이 다른 클래스에 영향 줄 때 사용.
실용적 팁:
- 클래스 사이의 관계는 설계의 핵심 노출하므로 명확하고 정확하게 표현.
- 네임스페이스 지원 (namespace 패키지명 { class A ... }).
- direction LR 또는 direction RL 사용하여 조밀한 다이어그램 레이아웃 최적화.

4. 상태 다이어그램 (State Diagram)

용도: 하나의 객체(시스템, 컴포넌트) 내에서 발생하는 상태 변경(State Transition)과 이를 유발하는 이벤트/조건, 그리고 상태 내에서의 동작을 모델링. 복잡한 병행 상태 표현 가능.
MERMAID_PLACEHOLDER_3
주요 특징:
- 상태: state 상태명 또는 state "상태명" as id. 초기 상태: [*], 최종 상태: [*].
- 전환: 상태 --> 상태 : 이벤트/조건 [조건] / 액션
- 합성 상태(Composite State): 내부에 다시 하위 상태 머신 가짐 (state 큰상태 { ... }).
- 선택점(Choice)/포크(Fork)/조인(Join)/히스토리(History) 등 특수 노드 사용 가능 (state choice_state <<choice>>).
실용적 팁:
- 복잡한 상태 머신 분해를 위해 합성 상태 적극 활용.
- stateDiagram-v2 사용 권장 (기존 v1보다 표현력 향상).

5. 사용자 여정 다이어그램 (User Journey Diagram)

용도: 최종 사용자가 제품/서비스를 사용하며 겪는 전체적인 여정(사용자 스토리)을 페르소나별로 시각화. 사용자 경험(UX) 디자인, 고객 지도(Customer Journey Mapping) 핵심 도구.

journey
  title 쇼핑 웹사이트 구매 과정
  section 홈페이지 방문
    랜딩 페이지 확인: 5: User
    상품 검색: 5: User
    카테고리 탐색: 5: User
  section 상품 상세
    상품 상세 페이지

import mermaid from ‘https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs’;

mermaid.initialize({
startOnLoad: true,
theme: ‘default’,
securityLevel: ‘strict’,
fontFamily: ‘Arial, sans-serif’,
flowchart: {
useMaxWidth: true,
htmlLabels: true,
curve: ‘basis’,
},
});

// 페이지 로드 후 렌더링
if (document.readyState === ‘loading’) {
document.addEventListener(‘DOMContentLoaded’, () => {
mermaid.run();
});
} else {
mermaid.run();
}