머메이드 다이어그램
📋 포맷/변환간단한 텍스트 문법으로 플로우차트·시퀀스·ER·간트 차트 등을 그립니다. SVG/PNG 내보내기 지원.
템플릿
코드를 입력하면 다이어그램이 표시됩니다
자주 쓰는 문법
플로우차트
graph TD / graph LRTD=위→아래, LR=왼→오른
노드 모양
[사각] (둥근) {{마름모}}괄호 종류로 모양 결정
화살표
--> / ---> / -..->실선 / 긴선 / 점선
시퀀스
A->>B: 메시지실선 화살표 메시지
라벨
A -->|텍스트| B화살표에 텍스트 추가
서브그래프
subgraph 제목 ... end노드 그룹 묶기
• 코드 입력 시 0.5초 후 자동으로 미리보기가 갱신됩니다
• SVG는 벡터 형식(확대해도 선명), PNG는 2배 해상도로 내보냅니다
• 다크모드에서는 다이어그램도 어두운 테마로 표시됩니다
📊 머메이드 다이어그램이란?
텍스트만으로 다이어그램과 차트를 그리는 오픈소스 도구입니다. 그래픽 편집기 없이 플로우차트, 시퀀스, ER, 간트, 파이 차트, 마인드맵 등 9종 이상을 만들 수 있습니다.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로 설정
💡 실무 팁
API 호출 흐름은 sequenceDiagram, DB 스키마는 erDiagram, 상태 머신은 stateDiagram-v2가 정답입니다. 한 종류로 다 그리려 하지 마세요.
자주 묻는 질문
머메이드 문법을 모르는데 사용할 수 있나요?▼
템플릿을 클릭하면 예제 코드가 자동으로 입력됩니다. 예제를 수정하면서 익히는 것이 가장 빠른 방법입니다.
SVG와 PNG 중 어떤 형식으로 다운로드해야 하나요?▼
SVG는 벡터 형식으로 확대해도 선명하며, 웹이나 문서에 적합합니다. PNG는 슬라이드나 SNS 공유에 적합합니다.
GitHub README에서 사용하는 문법과 동일한가요?▼
네, 동일합니다. 여기서 작성한 코드를 GitHub 마크다운의 ```mermaid 코드 블록에 그대로 복사하면 됩니다.
다이어그램이 렌더링되지 않아요▼
구문에 오류가 있을 수 있습니다. 오류 메시지를 확인하고, 템플릿을 참고하여 문법을 수정해 보세요.