📊Mermaid 다이어그램 에디터
텍스트 코드로 순서도·시퀀스·간트차트·클래스 다이어그램·파이차트를 그립니다. GitHub README·노션·옵시디언에 그대로 임베드 가능. SVG·PNG 다운로드.
🔒 브라우저에서 처리✓ 워터마크 없음✓ 가입 불필요
사용 방법
- 1샘플 중 하나를 선택해 시작합니다.
- 2왼쪽 코드를 편집하면 오른쪽 미리보기가 실시간 갱신됩니다.
- 3SVG 또는 PNG로 다운로드합니다.
자주 묻는 질문
Mermaid가 뭐예요?+
다이어그램을 텍스트로 그리는 오픈소스 도구. 코드처럼 작성하므로 버전 관리·복사·수정이 쉬워 개발자·기술 글에 많이 쓰입니다.
GitHub README에 임베드?+
GitHub는 2022년부터 마크다운 안의 ```mermaid 코드 블록을 자동 렌더링합니다. 본 도구로 코드 만들고 README에 그대로 붙여넣으면 됩니다.
노션·옵시디언에서도?+
옵시디언은 코드 블록 그대로 렌더링. 노션은 일부 플러그인 필요. 결과 PNG를 첨부하는 게 가장 호환성 좋음.
어떤 다이어그램?+
순서도(flowchart), 시퀀스 다이어그램(sequenceDiagram), 간트차트(gantt), 클래스 다이어그램(classDiagram), 상태 다이어그램, ER 다이어그램, 파이차트(pie) 등 10종 이상.
PowerPoint·키노트에 쓰려면?+
PNG 다운로드 후 슬라이드에 이미지로 삽입. 2배 해상도로 추출하므로 인쇄용으로도 깨끗합니다.
복잡한 디자인 가능?+
Mermaid는 빠르고 명확한 다이어그램 위주. 자유로운 디자인이 필요하면 draw.io, Figma, Excalidraw가 적합합니다.