Mermaid.js 다이어그램 완전 가이드
간단한 텍스트 기반 문법으로 전문적인 다이어그램을 만드는 방법을 배워보세요
Mermaid.js란?
Mermaid는 Markdown에서 영감을 받은 텍스트 정의를 사용해 다이어그램을 동적으로 만들고 수정하는 JavaScript 기반 다이어그램/차트 도구입니다. 간단한 텍스트 설명만으로 다이어그램을 생성할 수 있는 오픈 소스 프로젝트입니다.
복잡한 드로잉 도구 대신 다이어그램을 설명하는 코드 형태의 문법을 작성하면 Mermaid가 이를 시각적 다이어그램으로 렌더링합니다. 이 접근 방식은 다이어그램을 버전 관리하기 쉽게 하고, 업데이트를 간단하게 하며, 문서화에 이상적입니다.
Mermaid는 문서화 플랫폼, 위키, Markdown 파일과 원활하게 통합되어 개발자와 기술 문서 작성자에게 사랑받는 도구가 되었습니다.
왜 Mermaid.js를 사용할까요?
- 버전 관리: 다이어그램은 텍스트 파일이므로 코드와 함께 Git에서 추적할 수 있습니다
- 빠른 업데이트: 전체 다이어그램을 다시 그리는 대신 몇 줄의 텍스트만 변경하세요
- 일관성: Mermaid가 레이아웃과 스타일을 자동으로 처리해 일관된 다이어그램을 보장합니다
- 디자인 도구 불필요: Visio, Lucidchart 등 비싼 도구가 필요 없습니다
- 코드로서의 문서화: 다이어그램을 문서와 같은 저장소에 보관하세요
- 크로스 플랫폼: 브라우저와 Node.js에서 작동하며 많은 플랫폼과 통합됩니다
- 무료 오픈 소스: 라이선스 비용이 없고 활발한 커뮤니티
- 다양한 다이어그램 유형: 플로우차트, 시퀀스 다이어그램, 클래스 다이어그램 등 지원
지원되는 다이어그램 유형
Mermaid는 다양한 문서화 요구를 충족하기 위해 여러 종류의 다이어그램 유형을 지원합니다:
플로우차트
노드와 엣지로 워크플로, 프로세스, 의사결정 트리를 시각화합니다.
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Process]
B -->|No| D[Alternative]
C --> E[End]
D --> E사용 사례: 프로세스 흐름, 알고리즘, 의사결정 로직
시퀀스 다이어그램
시간에 따른 서로 다른 액터 또는 시스템 간의 상호작용을 보여줍니다.
sequenceDiagram
participant User
participant API
participant DB
User->>API: Request data
API->>DB: Query
DB-->>API: Results
API-->>User: Response사용 사례: API 상호작용, 시스템 통신, 사용자 흐름
클래스 다이어그램
클래스, 속성, 관계로 객체지향 시스템을 모델링합니다.
classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+bark()
}
Animal <|-- Dog사용 사례: 소프트웨어 아키텍처, OOP 설계, 데이터베이스 스키마
상태 다이어그램
시스템이나 프로세스의 상태와 전이를 나타냅니다.
stateDiagram-v2
[*] --> Idle
Idle --> Loading: Start
Loading --> Success: Complete
Loading --> Error: Fail
Success --> [*]
Error --> Idle: Retry사용 사례: 상태 머신, 라이프사이클 관리, UI 상태
ER 다이어그램
데이터베이스 구조와 엔티티 간 관계를 모델링합니다.
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
CUSTOMER {
int id
string name
string email
}사용 사례: 데이터베이스 설계, 데이터 모델링, 시스템 아키텍처
간트 차트
프로젝트 일정과 타임라인을 계획하고 시각화합니다.
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Phase 1
Design :a1, 2024-01-01, 30d
Development :a2, after a1, 45d사용 사례: 프로젝트 계획, 스프린트 타임라인, 로드맵
원형 차트
비율 데이터와 퍼센트를 시각적으로 보여줍니다.
pie title Distribution
"Category A" : 42
"Category B" : 30
"Category C" : 28사용 사례: 설문 결과, 시장 점유율, 리소스 할당
Git 그래프
Git 브랜칭 전략과 커밋 히스토리를 시각화합니다.
gitGraph
commit
branch develop
checkout develop
commit
checkout main
merge develop사용 사례: Git 워크플로 문서화, 브랜칭 전략
Mermaid 시작하기
1. 다이어그램 유형 선택
먼저 표시하려는 내용을 가장 잘 나타내는 다이어그램 유형을 결정하세요. 각 유형은 'flowchart', 'sequenceDiagram', 'classDiagram'과 같은 특정 키워드로 시작합니다.
2. 텍스트 문법 작성
Mermaid의 간단한 문법으로 다이어그램을 설명하세요. 문법은 직관적이며 거의 자연어처럼 읽힙니다. 예를 들어 'A --> B'는 A에서 B로 가는 화살표를 만듭니다.
3. 다이어그램 미리보기
온라인 뷰어 또는 Mermaid 호환 도구를 사용해 다이어그램을 실시간으로 확인하세요. 만족할 때까지 조정하면 됩니다.
4. 내보내기 및 공유
다이어그램을 SVG 또는 PNG로 내보내 발표에 사용하거나 팀과 URL을 공유하세요. Mermaid를 Markdown 파일에 직접 포함할 수도 있습니다.
모범 사례
- 다이어그램을 하나의 개념이나 워크플로에 집중하세요
- 실제 비즈니스 로직을 설명하는 의미 있는 라벨을 사용하세요
- 복잡한 다이어그램은 더 작은, 서로 연결된 다이어그램으로 나누세요
- 복잡한 부분을 설명하기 위해 %%로 주석을 추가하세요
- 다이어그램 전반에 일관된 명명 규칙을 사용하세요
- 최종화하기 전에 대상 환경에서 다이어그램을 테스트하세요
- 필요 시 레이아웃을 제어하기 위해 방향 힌트(TD, LR)를 포함하세요
- 플로우차트에서 관련 노드를 그룹화하려면 subgraph를 사용하세요
- 가독성을 유지하기 위해 스타일 옵션을 절제해 사용하세요
- 다이어그램 소스 파일을 코드와 함께 버전 관리하세요
일반적인 사용 사례
소프트웨어 문서화
시스템 아키텍처, API 흐름, 컴포넌트 상호작용을 코드와 함께 문서화합니다.
프로젝트 계획
스프린트 계획, 프로젝트 타임라인, 리소스 할당을 위한 간트 차트를 만듭니다.
기술 제안
제안된 솔루션, 시스템 설계, 아키텍처 결정을 시각화합니다.
사용자 여정
사용자 흐름, 고객 경험, 상호작용 패턴을 맵핑합니다.
데이터베이스 설계
엔티티 관계, 스키마 구조, 데이터 의존성을 모델링합니다.
프로세스 문서화
비즈니스 프로세스, 워크플로, 표준 운영 절차를 문서화합니다.
교육 자료
튜토리얼과 기술 과정용으로 명확하고 버전 관리되는 다이어그램을 만듭니다.
API 문서화
요청/응답 흐름, 인증 시퀀스, 엔드포인트 상호작용을 설명합니다.
추가 자료
자주 묻는 질문
Mermaid Viewer 사용과 다이어그램 생성에 대한 자주 묻는 질문
첫 번째 다이어그램을 만들 준비가 되셨나요?
무료 온라인 Mermaid 뷰어를 사용해 몇 분 만에 전문적인 다이어그램을 만들어 보세요.
Mermaid Viewer 열기