머메이드 라이브 에디터 (Mermaid 온라인)

마크다운 에디터에 내장된 Mermaid 에디터

Mermaid는 몇 줄의 텍스트를 다이어그램으로 바꿔 주므로, 다이어그램의 변경 내용을 비교(diff)하고 검토하기 쉽고, 설명하는 문서 옆에 함께 보관하기도 좋습니다. 이 페이지의 편집기는 Mermaid를 기본 지원하는 분할형 마크다운 편집기입니다. 다이어그램을 문서의 필요한 위치에 쓰면 입력을 멈춘 뒤 곧바로 미리보기가 다시 그려 줍니다. 바꾸지 않은 다이어그램은 캐시에서 불러오므로 주변 글을 고치는 동안에도 빠르게 동작하고, 엔진 자체는 문서에 다이어그램이 처음 들어 있을 때 로드되므로 잠시 걸릴 수 있습니다.

편집기에서 이 블록으로 시작해 보세요.

```mermaid
flowchart LR
  Idea --> Draft --> Review
  Review -->|changes| Draft
  Review -->|approved| Publish
```

그러면 오른쪽에 순서도가 나타납니다. LR(왼쪽에서 오른쪽)을 TD(위에서 아래)로 바꾸거나, 노드를 추가하거나, 화살표 이름을 바꾸면 그림이 따라서 바뀝니다.

그릴 수 있는 다이어그램 종류

아래 다이어그램은 모두 미리보기에서 렌더링됩니다. 펜스 안의 첫 줄에 다이어그램 키워드를 넣으세요.

• 순서도(flowchart TD) — 프로세스, 분기, 아키텍처 스케치.
• 시퀀스 다이어그램(sequenceDiagram) — 서비스나 사람 사이의 시간순 호출.
• 클래스 다이어그램(classDiagram)과 상태 다이어그램(stateDiagram-v2).
• 개체-관계(ER) 다이어그램(erDiagram) — 데이터베이스 스키마.
• 간트 차트(gantt), 타임라인(timeline), 사용자 여정(journey).
• 파이 차트(pie), 사분면 차트(quadrantChart), 마인드맵(mindmap).
• Git 그래프(gitGraph), 요구사항 다이어그램(requirementDiagram), C4(C4Context).
• 비교적 새로운 Sankey(sankey-beta), XY 차트(xychart-beta), 블록(block-beta), 패킷, 칸반, 아키텍처(architecture-beta) 다이어그램.

베타 다이어그램의 문법은 Mermaid 릴리스마다 바뀔 수 있으므로 정확한 키워드는 Mermaid 공식 문서에서 확인하세요. 이 편집기는 사이트에 포함된 버전을 실행합니다.

다이어그램 디버깅

Mermaid가 코드를 해석하지 못하면 다이어그램 블록이 오류 상자로 바뀌고 파서 메시지가 표시됩니다 — 줄 번호, 걸린 텍스트, 기대했던 내용이 담겨 있습니다. 그 줄을 고치면 오류 대신 다이어그램이 나타납니다. 분할 레이아웃을 쓰면 둘을 한 번에 볼 수 있고, 미리보기는 편집 중인 줄을 따라 스크롤됩니다. 다이어그램은 Mermaid의 strict 보안 모드로 렌더링되므로 다이어그램 정의 안의 클릭 콜백과 스크립트는 비활성화되고, 문서의 다른 곳에 있는 인라인 HTML도 정제됩니다.

저장, 공유, 내보내기

문서는 브라우저에 자동 저장됩니다. 내보내기 → .md 다운로드로 코드 옆에 커밋할 마크다운 파일을 받을 수 있습니다. 공유는 문서 전체를 담은 링크를 만들어 주므로 동료가 열면 다이어그램이 이미 그려져 있습니다. .html 다운로드는 다이어그램을 SVG로 담은 독립 페이지를 내보내고, 인쇄 / PDF로 저장은 어떤 배율에서도 다이어그램이 선명한 PDF를 만듭니다. 다이어그램 색상은 선택한 라이트·다크 테마를 따릅니다.

이 도구를 쓸 때와 전용 도구를 쓸 때

설정 패널과 이미지 다운로드로 다이어그램 하나만 다듬고 싶다면 mermaid.live 같은 전용 도구가 그 용도로 만들어져 있습니다. 다이어그램이 README, 설계 메모, 에이전트의 계획, 프로젝트 문서 같은 문서에 속한다면 Mermaid를 렌더링하는 마크다운 편집기가 더 빠른 길입니다. 문맥 속에서 다이어그램을 보고 파일 전체를 내려받을 수 있기 때문입니다. 주변 문법이 낯선가요? 마크다운 문법 정리를 보거나 마크다운 에디터를 바로 열어 보세요.