Mermaid를 붙여넣고 다이어그램을 확인하세요. 즉시.

Mermaid를 붙여넣고 즉시 미리보기, SVG/PNG 내보내기, 파일 업로드, 드래그로 이동, URL로 공유.

빠른 템플릿
Mermaid 파일 열기아무 곳에나 놓으세요 — .mmd · .mermaid · .md · .txt · .mmd 파일 여는 방법
Mermaid 로딩 중... 1, 1
팁: 미리보기에서 클릭 후 드래그(또는 터치 드래그)하여 이동할 수 있습니다. 파일을 미리보기에 드롭하면 로드됩니다.

Mermaid란?

Mermaid는 Markdown에서 영감을 받은 텍스트 정의를 사용해 다이어그램을 동적으로 만들고 수정하는 JavaScript 기반 다이어그램/차트 도구입니다. 간단한 텍스트 설명만으로 다이어그램을 생성할 수 있는 오픈 소스 프로젝트입니다.

복잡한 드로잉 도구 대신 다이어그램을 설명하는 코드 형태의 문법을 작성하면 Mermaid가 이를 시각적 다이어그램으로 렌더링합니다. 이 접근 방식은 다이어그램을 버전 관리하기 쉽게 하고, 업데이트를 간단하게 하며, 문서화에 이상적입니다.

Mermaid는 문서화 플랫폼, 위키, Markdown 파일과 원활하게 통합되어 개발자와 기술 문서 작성자에게 사랑받는 도구가 되었습니다.

왜 Mermaid를 사용할까요?

  • 버전 관리: 다이어그램은 텍스트 파일이므로 코드와 함께 Git에서 추적할 수 있습니다
  • 빠른 업데이트: 전체 다이어그램을 다시 그리는 대신 몇 줄의 텍스트만 변경하세요
  • 일관성: Mermaid가 레이아웃과 스타일을 자동으로 처리해 일관된 다이어그램을 보장합니다
  • 디자인 도구 불필요: Visio, Lucidchart 등 비싼 도구가 필요 없습니다
  • 코드로서의 문서화: 다이어그램을 문서와 같은 저장소에 보관하세요
  • 크로스 플랫폼: 브라우저와 Node.js에서 작동하며 많은 플랫폼과 통합됩니다
  • 무료 오픈 소스: 라이선스 비용이 없고 활발한 커뮤니티
  • 다양한 다이어그램 유형: 플로우차트, 시퀀스 다이어그램, 클래스 다이어그램 등 지원
광고

Mermaid 다이어그램 완전 가이드

간단한 텍스트 기반 문법으로 전문적인 다이어그램을 만드는 방법을 배워보세요

자주 묻는 질문

Mermaid Viewer 사용과 다이어그램 생성에 대한 자주 묻는 질문

이 Mermaid 에디터는 정말 무료인가요?
네, 완전히 무료입니다. 회원가입이나 결제 없이 무제한으로 다이어그램을 만들고, SVG/PNG로 내보내고, URL로 공유하며 모든 기능을 사용할 수 있습니다. 서비스는 방해되지 않는 광고로 운영됩니다.
설치가 필요한가요?
아니요, 설치가 필요 없습니다. 이 도구는 브라우저에서 100% 동작하는 웹 기반 도구입니다. 사이트를 열면 데스크톱, 태블릿, 모바일에서 바로 사용할 수 있습니다.
다이어그램은 어떻게 저장하나요?
저장 방법은 여러 가지입니다. 1) SVG/PNG로 내보내기, 2) URL 공유(코드가 URL에 인코딩됨), 3) Mermaid 텍스트 코드를 파일에 복사해 저장, 4) .mmd 또는 .mermaid 파일 업로드/다운로드.
문서에 다이어그램을 사용할 수 있나요?
물론입니다. 다이어그램을 SVG(확대해도 선명) 또는 PNG로 내보내 문서, 발표자료, 웹사이트에 사용할 수 있습니다. GitHub, GitLab, Notion 같은 플랫폼에는 Mermaid 코드를 직접 임베드할 수도 있습니다.
SVG와 PNG의 차이는 무엇인가요?
SVG는 벡터 형식이라 어떤 크기에서도 품질이 유지되어 문서/웹에 적합합니다. PNG는 래스터 이미지라 빠르게 공유하기 좋지만, 크기 조절 시 품질 저하가 생길 수 있습니다.
왜 다이어그램이 렌더링되지 않나요?
Mermaid 코드의 문법 오류를 확인하세요. 자주 발생하는 문제는 닫히지 않은 따옴표, 누락된 콜론/세미콜론, 잘못된 노드 ID, 미지원 문법입니다. 문제 지점을 찾기 위해 다이어그램을 단순화해 보세요.
다른 사람과 협업할 수 있나요?
실시간 협업 기능은 내장되어 있지 않지만, URL 공유로 충분히 협업할 수 있습니다. 다른 사람이 링크를 열어 수정한 뒤 자신의 버전을 다시 공유할 수 있습니다. Mermaid는 텍스트 기반이라 Git과도 잘 맞습니다.
오프라인에서도 동작하나요?
최초 로딩에는 인터넷 연결이 필요합니다. 로딩 후에는 기본 편집 기능이 오프라인에서 동작하는 경우가 많지만, 내보내기 같은 일부 기능은 연결이 필요할 수 있습니다.
Mermaid 문법은 어떻게 배우나요?
모든 다이어그램 유형 예제가 있는 Mermaid 가이드부터 시작하세요. 빠른 시작을 위해 템플릿 패널을 활용하고, mermaid.js.org의 공식 문서도 함께 참고하세요.
모양을 커스터마이즈할 수 있나요?
네. 다이어그램은 사이트 테마를 따릅니다. 상단 바의 테마 버튼으로 라이트와 다크를 전환하면 다이어그램이 해당 Mermaid 테마로 다시 렌더링됩니다. 고급 커스터마이징은 %%{init:...}%% 지시어로 색상, 글꼴, 기타 시각 속성을 정의하면 됩니다.
어떤 다이어그램 유형을 지원하나요?
이 편집기는 Mermaid의 주요 다이어그램 유형을 지원합니다: Flowchart, Sequence Diagram, Class Diagram, State Diagram, ER Diagram, Gantt Chart, Pie Chart, Git Graph, User Journey 등.
내 다이어그램 데이터는 비공개인가요?
다이어그램 코드는 서버로 전송되지 않습니다. 렌더링은 브라우저에서만 수행됩니다. URL 공유 시 코드는 URL 자체에 인코딩되며, 우리는 내용을 저장하거나 추적하지 않습니다.
왜 텍스트 기반 다이어그램을 써야 하나요?
텍스트 기반 다이어그램은 장점이 많습니다: 버전 관리에 유리함(Git에 적합), 빠른 수정, 일관된 스타일, 검색 가능, 가벼운 포맷, 자동 생성 용이성. Pull Request 리뷰도 더 수월합니다.
웹사이트에 Mermaid를 임베드할 수 있나요?
네. 웹사이트에 Mermaid JavaScript 라이브러리를 포함하고 Mermaid 코드 블록을 추가하면 됩니다. GitHub, GitLab, Notion, Obsidian 등 많은 플랫폼이 이미 Mermaid를 기본 지원합니다.
권장 최대 다이어그램 크기는 얼마인가요?
엄격한 제한은 없지만, 매우 큰 다이어그램(약 100개 이상 노드)은 기기에 따라 렌더링이 느릴 수 있습니다. 복잡한 시스템은 더 작고 집중된 여러 다이어그램으로 나누는 것이 좋습니다.