Mermaid 다이어그램 편집기

Mermaid 코드로 순서도, 시퀀스 다이어그램 등을 그리고 SVG·PNG로 저장합니다

예시

테마

Mermaid 코드

미리보기Mermaid 불러오는 중…

배경

PNG 크기

Mermaid 다이어그램 편집기 사용 방법

Mermaid 코드로 순서도, 시퀀스, ER, 간트, 마인드맵 등 10가지 다이어그램을 바로 그립니다. 미리보기를 확대·이동하고 SVG나 최대 4배 PNG로 내보냅니다.

편집기에 Mermaid 코드를 쓰거나, '예시'에서 다이어그램 종류를 골라 시작합니다.

테마를 '기본', '뉴트럴', '다크', '포레스트' 중에서 고릅니다.

미리보기를 확인합니다. 휠이나 핀치로 확대·축소하고 드래그로 이동하며, '화면에 맞춤'과 '전체 화면'도 쓸 수 있습니다.

'배경'과 'PNG 크기'를 정한 뒤 SVG나 PNG를 눌러 내려받거나, 'SVG 복사'·'PNG 복사'로 클립보드에 복사합니다.

자주 묻는 질문

아니요. Mermaid가 페이지 안에서 실행되므로 코드와 다이어그램은 브라우저에 머뭅니다. 코드는 로컬에 저장되어 다음에도 이어서 쓸 수 있습니다.

편집기 아래에 오류와 줄 번호가 표시되고, 미리보기에는 마지막으로 그려진 다이어그램이 그대로 남습니다.

네. SVG나 PNG를 내보내기 전에 '배경'을 '투명'으로 바꾸세요.

'PNG 크기'를 2×, 3×, 4× 중에서 고르세요. 실제 픽셀 크기가 옆에 표시됩니다.

편집기에서 Ctrl/⌘ + S를 누르면 SVG가 내려받아집니다. 미리보기에서는 +와 −로 확대·축소, 방향키로 이동, 0으로 100% 복귀, F로 화면에 맞춥니다.