개발

Mermaid 라이브 편집기 — 다이어그램 생성기

무료 온라인 Mermaid 다이어그램 편집기. 순서도, 시퀀스 다이어그램, 클래스 다이어그램, 간트 차트, 원형 차트 및 마인드 맵을 만듭니다. SVG 또는 PNG로 내보냅니다. 가입이 필요하지 않습니다.

무료 사용 가입 불필요 브라우저에서 실행

도구 작업 영역

Preview will appear here...

Mermaid는(는) 무엇인가요?

Mermaid는 Markdown에서 영감을 받은 텍스트 정의를 렌더링하여 다이어그램을 동적으로 생성하고 수정하는 JavaScript 기반 다이어그램 작성 및 차트 작성 도구입니다. 순서도, 시퀀스 다이어그램, 클래스 다이어그램, 상태 다이어그램, 간트 차트, 파이 차트, ER 다이어그램 및 마인드 맵을 지원합니다. Mermaid는 문서, README 파일 및 기술 위키에서 널리 사용됩니다.

Mermaid 편집기 사용 방법

  1. 1왼쪽 편집기 패널에 Mermaid 구문을 입력하거나 붙여넣습니다.
  2. 2입력할 때 다이어그램 미리보기가 자동으로 업데이트됩니다.
  3. 3다이어그램 스타일을 변경하려면 테마(기본값, 어두움, 숲, 중립)를 선택하세요.
  4. 4다양한 차트 유형에 대한 예제 다이어그램을 로드하려면 샘플 버튼을 클릭하세요.
  5. 5내보내기 버튼을 사용하여 다이어그램을 SVG(벡터) 또는 PNG(래스터)로 내보냅니다.

Common Mermaid 라이브 편집기 — 다이어그램 생성기 use cases

Developer debugging

Use Mermaid 라이브 편집기 — 다이어그램 생성기 to quickly inspect generated output, API payloads, configuration values, or encoded data while building and debugging software.

Review before reuse

Validate or transform mermaid, diagram, flowchart, sequence, gantt, class before adding the result to a project, document, form, message, or shared file.

Privacy-first browser processing

Run common mermaid, diagram, flowchart, sequence, gantt, class tasks locally in the browser without sending sensitive development data to a backend service.

자주 묻는 질문

이 도구는 오프라인에서 작동하나요?

그렇습니다. 페이지가 로드되면 모든 다이어그램 렌더링이 브라우저에서 발생합니다. 후속 편집에는 인터넷 연결이 필요하지 않습니다.

어떤 다이어그램 유형이 지원되나요?

순서도, 시퀀스 다이어그램, 클래스 다이어그램, 상태 다이어그램, 간트 차트, 파이 차트, ER 다이어그램, 마인드 맵 등. 전체 목록은 Mermaid 문서를 참조하세요.