입력 대기 중
Mermaid 다이어그램 에디터란?
Mermaid는 JavaScript 기반의 다이어그램 생성 도구로, Markdown과 유사한 텍스트 구문을 사용하여 다양한 다이어그램을 생성합니다. 수동으로 도형을 드래그할 필요 없이 간단한 텍스트 설명만 작성하면 플로우차트, 시퀀스 다이어그램, 클래스 다이어그램 등을 자동으로 생성합니다.
이 도구는 온라인 Mermaid 편집 환경을 제공하며, 실시간 미리보기, 드래그 확대/축소, 내보내기 기능을 지원하여 개발자가 빠르게 다이어그램을 만들고 공유할 수 있도록 도와줍니다.
사용 방법
기본 사용법
- 왼쪽 편집기에 Mermaid 구문을 입력합니다
- 오른쪽에서 다이어그램 미리보기가 실시간으로 렌더링됩니다
- 마우스로 드래그하여 다이어그램을 이동하고, 휠로 확대/축소합니다
- 내보내기 버튼을 클릭하여 PNG 또는 SVG 형식으로 저장합니다
지원하는 다이어그램 유형
예시
플로우차트
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Action A]
B -->|No| D[Action B]
C --> E[End]
D --> E시퀀스 다이어그램
sequenceDiagram
participant Client
participant Server
participant Database
Client->>Server: Send Request
Server->>Database: Query Data
Database-->>Server: Return Results
Server-->>Client: Send Response클래스 다이어그램
classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+fetch()
}
class Cat {
+purr()
}
Animal <|-- Dog
Animal <|-- Cat자주 묻는 질문
어떤 다이어그램 유형을 지원하나요?
플로우차트(graph/flowchart), 시퀀스 다이어그램(sequenceDiagram), 클래스 다이어그램(classDiagram), 상태 다이어그램(stateDiagram), ER 다이어그램(erDiagram), 간트 차트(gantt), 파이 차트(pie), 마인드맵(mindmap), 사용자 여정 맵(journey) 등 총 9가지 다이어그램 유형을 지원합니다.
다이어그램을 어떻게 내보내나요?
오른쪽 패널의 "PNG 내보내기" 또는 "SVG 내보내기" 버튼을 클릭하면 다이어그램을 다운로드할 수 있습니다. PNG 형식은 문서에 삽입하기에 적합하고, SVG 형식은 벡터 편집 및 인쇄에 적합합니다.
다이어그램을 확대/축소하고 이동할 수 있나요?
네. 마우스 휠을 사용하여 확대/축소할 수 있고, 마우스 왼쪽 버튼을 누른 채 드래그하여 다이어그램 위치를 이동할 수 있습니다. 미리보기 영역을 더블 클릭하면 뷰가 초기 상태로 재설정됩니다.
데이터가 서버에 업로드되나요?
아니요. Mermaid 구문 분석과 다이어그램 렌더링은 모두 브라우저에서 로컬로 수행되며, 데이터가 기기를 떠나지 않으므로 완전한 프라이버시가 보장됩니다.