mermaid.design은 무료 온라인 Mermaid 다이어그램 에디터입니다. 왼쪽에 Mermaid 문법을 작성하면 오른쪽에서 다이어그램이 실시간으로 렌더링됩니다. 모든 작업은 브라우저 안에서만 실행되며, 다이어그램은 절대 기기를 떠나지 않습니다.
첫 번째 다이어그램
- mermaid.design을 엽니다 — 예제 플로차트가 로드된 에디터가 표시됩니다.
- 왼쪽 창에서 Mermaid 코드를 편집합니다. 예:
flowchart TD
A[시작] --> B{준비됐나요?}
B -- 예 --> C[배포하기]
B -- 아니요 --> D[계속 코딩]- 입력할 때마다 미리보기가 자동으로 다시 렌더링됩니다(짧은 디바운스 적용). 문법이 올바르지 않으면 오류 배너 뒤에 마지막으로 정상 렌더링된 다이어그램이 유지되고, 코드 에디터가 오류가 있는 줄을 표시합니다.
워크벤치
에디터는 세 개의 창으로 구성된 워크벤치입니다:
- 코드 에디터(왼쪽) — Monaco 에디터(VS Code와 동일한 엔진)로, Mermaid 구문 강조, 인라인 오류 표시, 서식/복사/지우기 도구 모음을 제공합니다. 얇은 아이콘 스트립으로 접거나 구분선을 드래그해 크기를 조절할 수 있습니다.
- 미리보기(가운데) — 실시간으로 렌더링되는 다이어그램입니다. 드래그로 이동, Ctrl/⌘ + 스크롤로 확대/축소, 더블 클릭으로 화면에 맞추기가 가능합니다. 플로팅 도구 모음에서 확대/축소 컨트롤과 캔버스 배경 전환(도트 / 화이트 / 체커)을 제공합니다.
- 테마 패널(오른쪽) — 원클릭 프리셋, 세부 테마 변수, 시드 컬러 기반 테마 생성을 제공합니다. 아래를 참조하세요.
좁은 화면에서는 워크벤치가 단일 창으로 바뀌고 하단에 코드 / 미리보기 / 테마 탭 바가 표시됩니다.
렌더링 모드
내비게이션 바의 세그먼트 컨트롤을 사용해 다이어그램 렌더링 방식을 전환하세요:
- 공식 — Mermaid 엔진이 렌더링하는 그대로의 표준 Mermaid SVG 출력입니다.
- ASCII — 다이어그램을 코드 주석, 문서, 터미널에 붙여 넣을 수 있는 텍스트 아트로 변환합니다. ASCII 렌더링을 참조하세요.
모드는 URL의 일부이므로 특정 모드의 링크를 북마크하거나 공유할 수 있습니다.
테마
모든 다이어그램은 base 테마와 70개 이상의 편집 가능한 테마 변수로 렌더링됩니다:
- 프리셋 — 11개의 Mermaid 기본 테마(Default, Neutral, Forest, Dark, Base 등)와 디자이너 프리셋이 미니 미리보기와 함께 제공됩니다.
- 테마 변수 — 검색 기능으로 그룹별 개별 색상, 테두리, 글꼴을 미세 조정합니다.
- 생성 — 하나의 시드 컬러에서 라이트 또는 다크의 완전한 테마를 생성합니다.
작업은 자동으로 저장됩니다
에디터는 코드, 테마, 레이아웃을 브라우저의 로컬 스토리지에 저장합니다. 탭을 닫았다가 나중에 돌아와도 다이어그램이 그대로 남아 있습니다. 서버에 업로드되는 것은 없습니다.