📊
무료 Mermaid 다이어그램 편집기
라이브 미리보기와 함께 Mermaid 구문으로 플로우차트, 시퀀스 다이어그램, 간트 차트 등을 작성합니다. SVG 또는 PNG로 내보내기. 브라우저에서 완전히 실행됩니다.
미리보기
100%
입력을 시작하면 다이어그램이 표시됩니다…
드래그하거나 스크롤해서 이동하세요. 핀치 또는 Ctrl + 스크롤로 확대/축소합니다. 아래쪽 가장자리를 드래그하면 미리보기가 더 높아집니다.
PNG 스케일
💡 Mermaid 문법으로 다이어그램을 작성하세요. 플로차트, 시퀀스 다이어그램, 간트 차트, 클래스 다이어그램 등을 만들고 SVG나 PNG로 내보낼 수 있습니다. 모든 처리는 브라우저에서 이루어집니다. 다이어그램 텍스트는 절대 업로드되지 않으며, Mermaid 렌더링 엔진도 외부 CDN이 아닌 이 사이트에서 제공됩니다.
주요 용도
- 순서도 만들기텍스트에서 순서도를 만들고 이미지로 내보냅니다.
- 시퀀스 다이어그램 그리기시스템 또는 사람이 시간에 따라 상호 작용하는 방식을 다이어그램으로 표시합니다.
- README에 다이어그램 추가GitHub가 README에서 기본적으로 렌더링하는 다이어그램을 만듭니다.
- 간트 차트 만들기프로젝트 타임라인을 텍스트로 간트 차트로 배치합니다.
- 클래스 다이어그램 만들기소프트웨어 설계를 위해 클래스 및 해당 관계를 다이어그램으로 표시합니다.
사용 방법
Mermaid를 사용하면 다이어그램을 텍스트로 작성하고 자동으로 렌더링하도록 할 수 있습니다 — 다이어그램을 버전 관리에 유지하는 데 좋습니다. 이것은 입력할 때 렌더링하는 라이브 편집기입니다.
- 1Mermaid 엔진이 로드됩니다Mermaid 라이브러리는 도구를 처음 사용할 때 LibraTool에서 불러오고, 이후에는 브라우저가 캐시합니다.
- 2다이어그램 코드를 작성합니다흐름도, 시퀀스 다이어그램, Gantt 차트, 클래스 다이어그램, 원형 차트 및 기타 — Mermaid의 텍스트 구문을 사용합니다.
- 3라이브로 렌더링됩니다코드가 파싱되고 입력할 때 브라우저에서 SVG로 렌더링되며, 밝은 테마와 어두운 테마가 있습니다.
- 4SVG 또는 PNG로 내보냅니다다이어그램을 확장 가능한 SVG 또는 2배 PNG로 다운로드해 문서, 슬라이드, README에 넣을 수 있습니다.
다이어그램 코드는 내부 시스템을 설명할 수 있으며, 브라우저에서 완전히 렌더링되고 절대 업로드되지 않습니다.