실시간 미리보기
코드를 수정하면 다이어그램도 바로 바뀌어요. 문법 오류를 찾거나 배치를 조정할 때 편리해요.
온라인 다이어그램 만들기
Mermaid 코드를 붙여넣고 순서도, 시퀀스 다이어그램, ERD를 만들어 보세요. 수정한 내용은 미리보기에 바로 반영돼요. 예제로 쉽게 시작하고 PNG, SVG, PDF로 저장하거나 링크로 공유할 수 있어요.
Mermaid 다이어그램에 필요한 기능을 한곳에
코드를 쓰고 결과를 확인한 뒤 문서나 발표 자료에 넣을 다이어그램을 저장하세요.
템플릿과 예제
순서도, 시퀀스 다이어그램, ERD, 간트 차트 예제를 골라 내 상황에 맞게 수정하세요.
33가지 다이어그램
순서도와 마인드맵은 물론 C4, 생키 다이어그램, 칸반 보드도 만들 수 있어요.
이미지, PDF, 코드 저장
PNG, SVG, PDF로 저장하거나 MMD 파일로 코드를 남겨 두세요.
링크로 공유
동료에게 링크를 보내면 같은 다이어그램을 브라우저에서 열 수 있어요.
브라우저에서 편집
편집하거나 내보낼 때 다이어그램 코드를 서버에 업로드할 필요가 없어요.
11개 언어 지원
한국어로 사용하거나 다른 지원 언어로 바꿀 수 있어요.
Git으로 다이어그램 관리
텍스트로 된 다이어그램이라 복사하고 변경 사항을 비교하거나 Git으로 관리하기 쉬워요.
세 단계로 다이어그램 완성하기
- 01
코드를 붙여넣거나 템플릿 고르기
Mermaid 코드를 넣거나 예제를 열어 내용을 바꿔 보세요.
- 02
미리보기 확인하기
글자와 연결 관계를 수정하면서 다이어그램이 어떻게 바뀌는지 확인하세요.
- 03
저장하거나 공유하기
이미지, PDF, MMD 파일로 저장하거나 공유 링크를 만드세요.
순서도부터 ERD까지, 33가지 다이어그램
업무 흐름, 서비스 간 통신, 데이터베이스 구조, 프로젝트 일정에 맞는 다이어그램을 골라 보세요.
- 순서도
- 클래스 다이어그램
- 시퀀스 다이어그램
- 개체 관계도 (ERD)
- 상태 다이어그램
- 마인드맵
- 아키텍처 다이어그램
- 블록 다이어그램
- C4 다이어그램
- Cynefin 프레임워크
- 이벤트 모델링
- 간트 차트
- Git 그래프
- 이시카와 다이어그램(피시본)
- 칸반 보드
- 네트워크 패킷 다이어그램
- 파이 차트
- 사분면 차트
- 레이더 차트
- 구문 다이어그램(ABNF)
- 구문 다이어그램(EBNF)
- 구문 다이어그램(IR)
- 구문 다이어그램(PEG)
- 요구사항 다이어그램
- 생키 다이어그램
- 타임라인
- 트리 뷰
- 트리맵
- 사용자 여정 지도
- 벤 다이어그램
- 워들리 맵
- XY 차트
- ZenUML
프로젝트, 문서, 수업에 활용해 보세요
소프트웨어 개발자
API, 서비스 상호작용, 데이터 모델, 상태 전이, Git 흐름, 네트워크 패킷과 시스템 아키텍처를 문서화하세요.
제품 및 프로젝트 팀
사용자 여정, 업무 흐름, 로드맵, 칸반, 타임라인, 요구사항과 프로젝트 일정을 정리하세요.
기술 문서 작성자
README, 지식 베이스, 명세서, 튜토리얼과 내부 문서에 유지보수하기 쉬운 시각 자료를 추가하세요.
학생과 교육자
복잡한 시스템을 설명하고 개념을 비교하며 마인드맵과 학습 다이어그램을 만드세요.
어떤 형식으로 저장할까요?
발표 자료에는 PNG, 확대해서 볼 때는 SVG, 인쇄할 때는 PDF를 선택하세요. MMD로 저장하면 나중에 코드를 다시 편집할 수 있어요.
- 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, 코드 리뷰, 기술 문서와 함께 관리하기 쉽습니다.