템플릿
테마
코드를 입력하면 다이어그램이 표시됩니다
자주 쓰는 문법
플로우차트
graph TD / graph LRTD=위→아래, LR=왼→오른
노드 모양
[사각] (둥근) {{마름모}}괄호 종류로 모양 결정
화살표
--> / ---> / -..->실선 / 긴선 / 점선
시퀀스
A->>B: 메시지실선 화살표 메시지
라벨
A -->|텍스트| B화살표에 텍스트 추가
서브그래프
subgraph 제목 ... end노드 그룹 묶기
• 코드 입력 시 0.5초 후 자동으로 미리보기가 갱신됩니다
• SVG는 벡터 형식(확대해도 선명), PNG는 2배 해상도로 내보냅니다
• 다크모드에서는 다이어그램도 어두운 테마로 표시됩니다
📊 머메이드 다이어그램이란?
머메이드(Mermaid)는 텍스트 기반으로 다이어그램과 차트를 만드는 오픈소스 도구입니다. 복잡한 그래픽 편집기 없이도 간단한 문법만으로 플로우차트, 시퀀스 다이어그램, ER 다이어그램, 간트 차트, 파이 차트, 마인드맵 등 다양한 다이어그램을 만들 수 있습니다. GitHub, Notion, GitLab 등에서 기본 지원하며, 개발 문서와 기술 블로그에서 널리 사용됩니다.
지원하는 다이어그램 종류
| 종류 | 키워드 | 용도 |
|---|---|---|
| 플로우차트 | graph TD | 프로세스 흐름, 의사결정 트리 |
| 시퀀스 | sequenceDiagram | API 호출 흐름, 시스템 간 통신 |
| 클래스 | classDiagram | 객체 관계, 클래스 구조 |
| ER | erDiagram | 데이터베이스 테이블 관계 |
| 간트 | gantt | 프로젝트 일정 관리 |
| 파이 차트 | pie | 비율, 점유율 시각화 |
| 상태 | stateDiagram-v2 | 상태 머신, 생명주기 |
| 마인드맵 | mindmap | 아이디어 정리, 브레인스토밍 |
| Git 그래프 | gitGraph | 브랜치 전략, Git 흐름 |
활용 팁
- GitHub README에 Mermaid 코드 블록을 넣으면 자동으로 다이어그램이 렌더링됩니다
- Notion에서도 /mermaid 블록으로 다이어그램을 삽입할 수 있습니다
- SVG로 내보내면 어떤 해상도에서도 선명하게 표시됩니다
- 다이어그램 방향은 TD(위→아래), LR(왼→오른), BT(아래→위), RL(오른→왼)로 설정
자주 묻는 질문
머메이드 문법을 모르는데 사용할 수 있나요?▼
템플릿을 클릭하면 예제 코드가 자동으로 입력됩니다. 예제를 수정하면서 익히는 것이 가장 빠른 방법입니다.
SVG와 PNG 중 어떤 형식으로 다운로드해야 하나요?▼
SVG는 벡터 형식으로 확대해도 선명하며, 웹이나 문서에 적합합니다. PNG는 슬라이드나 SNS 공유에 적합합니다.
GitHub README에서 사용하는 문법과 동일한가요?▼
네, 동일합니다. 여기서 작성한 코드를 GitHub 마크다운의 ```mermaid 코드 블록에 그대로 복사하면 됩니다.
다이어그램이 렌더링되지 않아요▼
구문에 오류가 있을 수 있습니다. 오류 메시지를 확인하고, 템플릿을 참고하여 문법을 수정해 보세요.