Mermaid 에디터

Mermaid 에디터 사용 방법

Mermaid는 평범한 텍스트를 순서도, 시퀀스 다이어그램, 간트 차트 등으로 바꿔 줍니다. 이 라이브 에디터는 입력하는 대로 다시 렌더링하며, 모든 처리가 브라우저 안에서 이루어집니다 — 무엇도 기기를 떠나지 않습니다.

1. «예제» 드롭다운에서 출발점을 고르세요 — 플로차트, 시퀀스, 클래스, 상태, ER, 간트, 파이, 마인드맵, 타임라인 아홉 가지 예제가 준비되어 있고, 선택하면 해당 코드가 에디터에 로드됩니다.
2. 왼쪽 패널에서 Mermaid 코드를 수정하면 오른쪽 미리보기는 입력을 멈춘 약 3분의 1초 후 다시 렌더링됩니다. 빨간 패널에 구문 오류가 표시되어도 마지막으로 성공한 다이어그램은 그대로 보이므로 비교하며 고칠 수 있습니다.
3. 더하기와 빼기 버튼으로 50%~200% 사이에서 확대·축소하고, «맞춤»을 눌러 다이어그램을 미리보기 상자에 맞추거나, «100%»로 원래 크기로 되돌리세요.
4. 흰 배경 없는 PNG를 원하면 «투명 배경»에 체크하고 «SVG 다운로드» 또는 «PNG 다운로드»를 누르세요 — PNG는 2배 해상도로 내보내져 삽입해도 선명합니다.
5. «코드 복사»로 Mermaid 소스를 클립보드에 담아 문서, 위키, 저장소에 붙여넣으세요.

다이어그램이 그려지지 않을 때는 최근에 고친 줄을 주석 처리해 원인을 좁혀 보세요 — 오류 메시지가 문제의 줄을 알려 주고, 구문이 올바워질 때까지 미리보기는 마지막 정상 버전을 유지합니다.