Mermaid 다이어그램 생성기
Mermaid 다이어그램 문법을 입력하면 즉시 렌더링되는 모습을 확인할 수 있습니다. 바로 사용할 수 있는 템플릿에서 시작해 문법 오류를 그때그때 고치고, 다이어그램을 SVG나 PNG로 복사하거나 다운로드하세요.
브라우저에서 완전히 실행됩니다 — 파일이 기기 밖으로 전송되지 않습니다.
사용 방법
- 01왼쪽 패널에 Mermaid 문법을 입력하거나 붙여넣으세요. 또는 Examples 버튼으로 순서도, 시퀀스, 클래스, 상태, 간트, 파이, 개체-관계(ER) 템플릿을 불러오세요.
- 02입력하는 즉시 다이어그램이 자동으로 렌더링됩니다. 문법이 잘못되면 미리보기를 지우는 대신 이해하기 쉬운 오류 메시지를 보여주면서 마지막으로 유효했던 다이어그램을 계속 표시합니다.
- 03미리보기 위의 −/%/+ 컨트롤로 50%에서 200%까지 확대·축소하며 세부 사항을 확인하세요 — 내보낼 파일 크기에는 영향을 주지 않습니다.
- 04렌더링된 다이어그램을 SVG 문자열로 복사하거나, "Download as"로 독립된 .svg 또는 .png 파일로 저장하세요.
- 05SVG나 PNG를 문서에 붙여넣거나, Mermaid를 지원하는 렌더러(GitHub, GitLab, Notion 등은 Mermaid 코드 펜스를 네이티브로 렌더링합니다)에서는 Mermaid 소스를 마크다운에 직접 삽입하세요.
자주 묻는 질문
이 Mermaid 다이어그램 생성기는 무료인가요?
네, 계정 등록이나 제한이 없습니다. 다이어그램은 Mermaid.js 라이브러리를 사용해 전적으로 브라우저에서 파싱되고 렌더링됩니다.
제 다이어그램 소스가 어딘가로 업로드되나요?
아니요. 렌더링은 전적으로 클라이언트 측에서 이루어집니다 — 입력한 문법이 기기 밖으로 나가는 일은 없습니다.
Mermaid는 어떤 다이어그램 유형을 지원하나요?
순서도, 시퀀스 다이어그램, 클래스 다이어그램, 상태 다이어그램, 개체-관계(ER) 다이어그램, 간트 차트, 파이 차트 등 다양한 유형을 지원합니다 — 이 도구는 순서도뿐 아니라 유효한 Mermaid 문법이라면 무엇이든 렌더링합니다. Examples 메뉴에는 이 7가지 유형 각각에 대해 바로 사용할 수 있는 시작 템플릿이 들어 있습니다.
문법에 오류가 있으면 어떻게 되나요?
다이어그램 패널은 충돌하거나 빈 화면을 보여주는 대신, Mermaid가 파싱하지 못한 부분을 알기 쉬운 문장으로 설명하는 오류 메시지를 표시합니다. 이전에 유효한 다이어그램이 렌더링되어 있었다면 오류 아래에 그대로 남아 있어 작업 흐름을 잃지 않습니다 — 문법을 고치면 미리보기가 자동으로 갱신됩니다.
SVG뿐 아니라 PNG로도 내보낼 수 있나요?
네. "Download as" 메뉴에서 "PNG"를 선택하면 현재 미리보기의 확대 비율과 관계없이 흰색 배경에 2배 해상도로 다이어그램을 렌더링합니다.
결과물을 마크다운에 바로 사용할 수 있나요?
GitHub, GitLab, Notion, Obsidian 등 많은 렌더러가 ```mermaid 코드 펜스를 네이티브로 렌더링합니다 — 이 경우 내보내기 과정 없이 원본 문법을 마크다운 문서에 그대로 붙여넣으면 됩니다. Mermaid를 네이티브로 지원하지 않는 렌더러에는 이 도구의 SVG나 PNG 내보내기를 사용하세요.