순서도
노드와 화살표, 둥근 사각형·마름모 등 Mermaid 도형으로 흐름과 분기를 표현합니다.
Mermaid 뷰어 온라인
왼쪽에 Mermaid 코드를 붙여넣으면 오른쪽에 다이어그램이 즉시 그려집니다. Mermaid 구문 분석과 원클릭 수정, 코드 최적화, PNG·SVG·PDF 내보내기까지 — 완전 무료, 가입 불필요, 데이터는 브라우저를 떠나지 않습니다.
- 완전 무료
- 가입 불필요
- 100% 브라우저에서 동작
- 12종 이상의 다이어그램
실시간 Mermaid 편집기 & 차트 뷰어
이 Mermaid 차트 뷰어는 입력을 멈출 때마다 미리보기를 새로 고치므로, 간단한 Mermaid 그리기도 글을 쓰듯 쉽습니다. 코드가 깨지면 내장 Mermaid 수정 도구가 문제를 찾아 가장 흔한 구문 오류를 자동으로 고쳐 줍니다. 전각 문장부호, 보이지 않는 문자 같은 전형적인 함정도 한 번에 해결됩니다.
–
Diagnostics
Your diagram renders here as you type.
Could not render this diagram
100%
Everything runs locally in your browser — your diagram code never leaves this page.
렌더링 가능한 Mermaid 다이어그램 유형
순서도부터 타임라인까지 모든 Mermaid 다이어그램 유형을 바로 사용할 수 있습니다. 설치 없이 온라인으로 Mermaid 다이어그램을 그리는 가장 쉬운 방법입니다. 아래 미리보기는 뷰어와 동일한 엔진으로 실시간 렌더링되며, 템플릿을 클릭하면 편집기를 열어 이어서 작업할 수 있습니다.
시퀀스 다이어그램
참여자 간 메시지 주고받기를 루프·분기·활성 구간과 함께 표현합니다.
ER 다이어그램
데이터베이스의 개체·속성·관계를 까마귀 발 표기법으로 모델링합니다.
클래스 다이어그램
소프트웨어 설계를 위한 클래스·인터페이스·멤버·상속을 기술합니다.
상태 다이어그램
시스템의 상태와 상태 간 전이를 추적합니다.
간트 차트
작업·마일스톤·의존 관계·날짜로 프로젝트를 계획합니다.
원형 차트
몇 줄의 숫자를 비중을 보여주는 원형 차트로 바꿉니다.
사용자 여정
작업별 만족도 점수와 함께 사용자 여정을 지도로 그립니다.
타임라인
사건을 세로 타임라인에 기록합니다. 연혁과 로드맵에 적합합니다.
마인드맵
들여쓰기 텍스트만으로 가지치기되는 마인드맵을 만듭니다.
Git 그래프
Git 저장소의 브랜치·커밋·병합을 시각화합니다.
사분면 차트
두 축으로 항목을 4개 사분면에 배치합니다. 우선순위×노력 등에 활용.
Mermaid 구문 필수 사항
Mermaid 구문은 일반 텍스트입니다. 한 줄에 하나의 명령문, 노드는 화살표로 연결합니다. 아래의 Mermaid 도형만으로 대부분의 다이어그램을 그릴 수 있습니다. 샘플을 클릭하면 뷰어에서 열어 계속 편집할 수 있습니다.
| 구문 | 그려지는 모양 |
|---|---|
A[라벨] | 직사각형(처리) |
A(라벨) | 둥근 사각형 |
A{라벨} | 마름모(판단) |
A([라벨]) | 경기장 모양 |
A[(라벨)] | 원기둥(DB) |
A((라벨)) | 원 |
A-->B | 화살표(연결) |
A-->|텍스트|B | 라벨이 있는 화살표 |
A---B | 화살표 없는 선 |
subgraph 제목 … end | 노드 그룹화 |
미니 템플릿
Mermaid 다이어그램을 온라인에서 이미지로 변환
Mermaid 다이어그램을 온라인에서 이미지로 변환하는 방법은 3단계입니다. 코드를 붙여넣고, 미리보기가 렌더링되면, 도구 모음에서 PNG, SVG, PDF를 클릭하세요. 모든 변환은 브라우저에서 이루어지며 파일 업로드는 없습니다.
Mermaid → PNG
최대 4배 해상도로 내보냅니다. 슬라이드·문서·메시지 어디서든 선명한 픽셀 이미지입니다.
Mermaid → SVG
진짜 벡터 파일: 무한 확대 가능, Figma·Illustrator에서 편집 가능, 인쇄와 고해상도 화면에 적합합니다.
Mermaid → PDF
한 번의 클릭으로 다이어그램 크기에 맞는 PDF 페이지를 생성합니다. 보고서·티켓·아카이브에 딱입니다.
자주 묻는 질문
Mermaid 뷰어란 무엇인가요?
Mermaid 뷰어는 Mermaid 구문으로 작성된 다이어그램 코드를 실제 다이어그램으로 렌더링하는 도구입니다. 이 사이트는 하나의 페이지에서 뷰어·메이커·수정 도구를 모두 제공합니다. 입력하는 동안 온라인으로 렌더링하고, 구문 문제를 찾아 자동으로 고치고, 결과를 PNG·SVG·PDF로 내보낼 수 있습니다.
유효하지 않은 Mermaid 구문은 어떻게 고치나요?
코드를 붙여넣고 '수정'을 클릭하세요. Mermaid 수정 도구는 스마트 따옴표와 보이지 않는 유니코드 문자, 전각 문장부호, 짝이 맞지 않는 괄호, end 같은 예약어 오용, subgraph·loop에 필요한 end 누락, 실수로 붙은 마크다운 코드 펜스 등을 자동으로 수리합니다. 모든 변경 사항은 진단 목록에 설명과 함께 표시됩니다.
Mermaid를 PNG·SVG·PDF로 변환하려면?
위 뷰어에서 다이어그램을 렌더링한 뒤, 미리보기 도구 모음에서 PNG·SVG·PDF를 클릭하면 됩니다. PNG는 고해상도 비트맵, SVG는 벡터 파일, PDF는 인쇄용 문서로 다운로드됩니다. 무료·무제한·브라우저 내 처리입니다.
PlantUML과 Mermaid 중 무엇을 써야 하나요?
Mermaid는 브라우저에서 바로 렌더링되어 GitHub·GitLab·대부분의 마크다운 플랫폼이 기본 지원하므로 문서용으로 가볍습니다. PlantUML은 UML 2 사양을 더 넓게 커버하지만 렌더링에 Java나 서버가 필요합니다. 문서와 웹에서 쓰는 다이어그램이라면 Mermaid가 보통 더 쉽습니다.
'Mermaid'라는 이름은 무슨 의미인가요?
그리스 신화에 나오는 인어(mermaid)에서 따온 이름입니다. 뱃사람들이 인어의 노래에 홀렸듯이, 평범한 텍스트가 아름다운 다이어그램을 '노래하듯' 만들어낸다는 뜻이 담겨 있습니다. 다이어그램 영역에서 Mermaid는 '코드로 그리는 그림(diagram-as-code)'을 의미합니다.
Mermaid 다이어그램에는 어떤 종류가 있나요?
가장 많이 쓰는 유형은 순서도, 시퀀스 다이어그램, ER 다이어그램, 클래스 다이어그램, 상태 다이어그램, 간트 차트, 원형 차트, 사용자 여정, 타임라인, 마인드맵입니다(전체 갤러리는 위 참고). 모든 유형은 'flowchart TD'나 'sequenceDiagram' 같은 키워드 줄로 시작하고, 이후 한 줄에 하나의 명령문을 씁니다.
제 다이어그램 코드가 서버로 전송되나요?
아니요. 렌더링·수정·최적화·내보내기는 모두 브라우저에서 로컬로 실행됩니다. 서버로 전송되거나 저장되는 것은 없으며, 페이지를 한 번 로드하면 오프라인에서도 사용할 수 있습니다.