📊 Mermaid 다이어그램 생성기
코드로 다양한 다이어그램을 쉽게 생성하고 시각화하세요
🎯 다이어그램 타입 선택
💻 Mermaid 코드 입력
플로우차트 코드
🖼️ 다이어그램 미리보기
미리보기
코드를 입력하고 '다이어그램 생성' 버튼을 클릭하세요
📚 Mermaid 문법 가이드
플로우차트 문법
기본 노드
A[사각형] --> B(둥근사각형)
B --> C{다이아몬드}
C --> D((원))
화살표 종류
A --> B (화살표)
A --- B (선)
A -.-> B (점선화살표)
A ==> B (굵은화살표)
서브그래프
subgraph "제목"
A --> B
end
시퀀스 다이어그램 문법
참가자 정의
participant A as Alice
participant B as Bob
메시지 종류
A->>B: 동기 메시지
A-->>B: 비동기 메시지
A-)B: 응답없는 메시지
활성화
activate A
A->>B: 작업 요청
deactivate A
간트 차트 문법
기본 구조
gantt
title 프로젝트 일정
dateFormat YYYY-MM-DD
섹션과 태스크
section 개발
설계 :done, des1, 2024-01-01, 2024-01-05
구현 :active, dev1, after des1, 10d
파이 차트 문법
기본 구조
pie title 제목
"라벨1" : 값1
"라벨2" : 값2
예시
pie title 브라우저 점유율
"Chrome" : 65
"Firefox" : 15
"Safari" : 12
"Others" : 8
🎨 템플릿 갤러리
기본 프로세스
간단한 의사결정 플로우
API 호출
클라이언트-서버 통신
프로젝트 일정
개발 프로젝트 타임라인
Git 워크플로우
브랜치 전략 시각화