실시간 미리보기
코드 변경이 즉시 렌더링되어 문법 오류와 레이아웃 문제를 빠르게 확인할 수 있습니다.
온라인 다이어그램 만들기
Mermaid 코드를 온라인에서 편집하고 실시간으로 미리보세요. 템플릿과 예제를 활용해 PNG, SVG, PDF, MMD로 내보내고 링크로 공유할 수 있으며 데이터는 브라우저에서 처리됩니다.
Mermaid 코드를 다이어그램으로 바꾸는 데 필요한 모든 기능
개발자, 제품 팀, 기술 문서 작성자, 학생과 교육자를 위한 빠른 코드 중심 워크플로입니다.
템플릿과 예제
플로차트, 시퀀스, ERD, 간트, 아키텍처 등 실무 예제로 빠르게 시작하세요.
33개 다이어그램 유형
일반적인 플로차트와 마인드맵부터 C4, Sankey, Wardley Maps, 구문 다이어그램, ZenUML까지 지원합니다.
PNG, SVG, PDF, MMD 내보내기
래스터 이미지, 확장 가능한 벡터, 인쇄용 문서 또는 Mermaid 원본 코드를 다운로드하세요.
링크 공유
동료, 고객 또는 학우가 같은 다이어그램을 빠르게 열 수 있도록 링크를 생성하세요.
브라우저 내 개인정보 보호
편집, 렌더링, 데이터 처리가 브라우저에서 이루어져 민감한 콘텐츠를 기기에 유지하는 데 도움이 됩니다.
11개 인터페이스 언어
English, 简体中文, Tiếng Việt, Русский, Português (Brasil), Español, Français, 日本語, 한국어, Deutsch, العربية를 지원합니다.
Diagram as Code에 최적화
다이어그램을 쉽게 편집, 복사, 리뷰하고 버전 관리할 수 있습니다.
세 단계로 다이어그램 만들기
- 01
Mermaid 코드를 작성하거나 붙여넣기
템플릿, 예제, 문서, GitHub, ChatGPT, Claude 등에서 가져온 코드를 사용할 수 있습니다.
- 02
입력하면서 실시간 미리보기
레이블, 관계, 방향, 스타일, 레이아웃을 수정하면 다이어그램이 즉시 업데이트됩니다.
- 03
내보내기 또는 공유
PNG, SVG, PDF, MMD를 다운로드하거나 공유 링크를 만드세요.
33개 Mermaid 다이어그램 유형 살펴보기
소프트웨어 설계, 프로세스, 프로젝트 관리, 데이터 모델링, 전략, 연구, 문서화에 알맞은 시각화를 선택하세요.
- 플로차트
- 클래스 다이어그램
- 시퀀스 다이어그램
- 개체-관계 다이어그램(ERD)
- 상태 다이어그램
- 마인드맵
- 아키텍처 다이어그램
- 블록 다이어그램
- C4 다이어그램
- Cynefin 프레임워크
- 이벤트 모델링
- 간트 차트
- Git 그래프
- 이시카와 다이어그램(피시본)
- 칸반 보드
- 네트워크 패킷 다이어그램
- 파이 차트
- 사분면 차트
- 레이더 차트
- 구문 다이어그램(ABNF)
- 구문 다이어그램(EBNF)
- 구문 다이어그램(IR)
- 구문 다이어그램(PEG)
- 요구사항 다이어그램
- 생키 다이어그램
- 타임라인
- 트리 뷰
- 트리맵
- 사용자 여정 지도
- 벤 다이어그램
- 워들리 맵
- XY 차트
- ZenUML
실제 문서 작업을 위해 설계되었습니다
소프트웨어 개발자
API, 서비스 상호작용, 데이터 모델, 상태 전이, Git 흐름, 네트워크 패킷과 시스템 아키텍처를 문서화하세요.
제품 및 프로젝트 팀
사용자 여정, 업무 흐름, 로드맵, 칸반, 타임라인, 요구사항과 프로젝트 일정을 정리하세요.
기술 문서 작성자
README, 지식 베이스, 명세서, 튜토리얼과 내부 문서에 유지보수하기 쉬운 시각 자료를 추가하세요.
학생과 교육자
복잡한 시스템을 설명하고 개념을 비교하며 마인드맵과 학습 다이어그램을 만드세요.
워크플로에 맞는 형식으로 내보내기
브라우저 미리보기에서 문서, 디자인, 인쇄, 발표 또는 버전 관리로 다시 그리지 않고 이동하세요.
- PNG
- 슬라이드, 문서, 메신저와 빠른 공유에 적합한 고품질 래스터 이미지.
- SVG
- 웹과 디자인 도구에서 확대해도 선명한 확장형 벡터 형식.
- 인쇄, 보고서, 검토와 보관에 적합한 문서 형식.
- MMD
- 나중에 편집, 재사용, 버전 관리할 수 있는 Mermaid 원본 코드.
다이어그램 데이터는 브라우저에 유지됩니다
Mermaid 콘텐츠는 클라이언트 측에서 처리됩니다. 시스템 아키텍처, 내부 업무 흐름, 데이터베이스 모델처럼 외부 서비스에 업로드하고 싶지 않은 다이어그램에 적합합니다.
자주 묻는 질문
Mermaid 온라인 편집기는 정말 무료인가요?
네. 편집기, 템플릿, 예제, 실시간 미리보기, 링크 공유와 PNG, SVG, PDF, MMD 내보내기를 무료로 사용할 수 있습니다.
Mermaid란 무엇인가요?
Mermaid는 텍스트 기반 다이어그램 문법입니다. 노드, 관계, 이벤트 또는 타임라인을 코드로 작성하면 시각적 다이어그램으로 변환됩니다.
어떤 다이어그램 유형을 지원하나요?
플로차트, 클래스, 시퀀스, ERD, 상태, 마인드맵, 아키텍처, C4, 간트, Git, 칸반, Sankey, 타임라인, 사용자 여정, Venn, Wardley Maps, XY, ZenUML 등 33개 유형을 지원합니다.
PNG, SVG, PDF, MMD로 내보낼 수 있나요?
네. PNG는 일반 이미지, SVG는 확장 가능한 벡터, PDF는 인쇄와 공식 문서, MMD는 편집 가능한 원본 코드 보관에 적합합니다.
Mermaid 코드가 서버로 업로드되나요?
일반적인 편집과 내보내기 과정에서 다이어그램 데이터가 브라우저 측에서 처리되도록 설계되었습니다.
공유 링크는 어떻게 사용하나요?
편집기에서 링크를 만들어 보내면 상대방이 브라우저에서 같은 다이어그램을 열 수 있습니다.
Mermaid나 다른 소프트웨어를 설치해야 하나요?
아니요. 최신 브라우저에서 웹사이트를 열면 바로 사용할 수 있습니다.
템플릿이나 예제로 시작할 수 있나요?
네. 문법을 배우면서 빈 화면부터 시작하지 않고 일반적인 다이어그램을 빠르게 만들 수 있습니다.
ChatGPT나 Claude가 만든 Mermaid 코드를 붙여넣을 수 있나요?
네. 코드를 붙여넣고 미리보기를 확인한 뒤 필요한 문법을 수정해 내보내거나 공유하세요.
드래그 앤 드롭 도구 대신 Mermaid를 쓰는 이유는 무엇인가요?
텍스트 다이어그램은 수정과 복사가 빠르고 Git, 코드 리뷰, 기술 문서와 함께 관리하기 쉽습니다.