Mermaid 상태 다이어그램 뷰어
브라우저에서 Mermaid 상태 다이어그램 및 상태 머신을 렌더링합니다. 전환을 미리 보고 SVG 또는 PNG로 내보냅니다. 무료 온라인 도구입니다.
다이어그램을 미리 보려면 Mermaid 코드를 입력하세요
상태 다이어그램은 가능한 모든 상태와 이벤트에 의해 트리거되는 상태 간의 전환을 보여줌으로써 시스템의 동작을 모델링합니다. 이는 유한 상태 머신 설계, UI 구성 요소 수명 주기 모델링, 주문 워크플로 문서화 및 임베디드 시스템 동작 지정에 필수적입니다. Mermaid의 `stateDiagram-v2` 구문은 개발자가 '결제 주문의 상태를 모델링해줘', 'React 구성 요소의 수명 주기를 보여줘' 또는 '신호등의 상태 머신을 설계해줘'와 같은 질문을 할 때 AI 어시스턴트에 의해 널리 생성됩니다. Zolkit에 출력을 붙여넣으면 전환이 완료되었는지, 도달할 수 없는 상태가 있는지, 성공 경로와 오류 경로가 올바르게 연결되었는지 즉시 확인할 수 있습니다. Zolkit의 상태 다이어그램 뷰어는 초기 및 최종 상태(`[*]`), 전환 레이블, 복합 상태(중첩된 상태 다이어그램), `--`를 사용한 동시 상태, 선택 의사 상태 및 노트를 포함한 `stateDiagram-v2` 기능을 지원합니다. 이 뷰어는 간단한 유한 자동 장치와 실제 애플리케이션에서 발견되는 복잡한 계층적 상태 머신을 모두 렌더링합니다.
무료 온라인 Mermaid 다이어그램 뷰어 및 내보내기 도구
Zolkit의 Mermaid 다이어그램 뷰어를 사용하면 설치, 가입, 서버 업로드 없이 모든 Mermaid 코드를 붙여넣고 렌더링된 다이어그램을 즉시 확인할 수 있습니다. 모든 작업이 브라우저에서 실행되므로 Claude, ChatGPT 또는 Gemini에서 생성된 AI 다이어그램을 확인하는 가장 빠른 방법입니다. 순서도, 시퀀스 다이어그램, 클래스 다이어그램, ER 다이어그램, 간트 차트, 상태 다이어그램, 마인드맵, Git 그래프, 파이 차트, 타임라인 등 모든 주요 Mermaid 다이어그램 유형을 지원합니다.
즉각적인 실시간 미리보기
입력하는 동안 다이어그램이 자동으로 렌더링되며, 300ms 디바운스를 적용하여 느리게 느껴지지 않습니다.
100% 개인 정보 보호
모든 렌더링은 mermaid.js를 사용하여 브라우저에서 이루어집니다. 코드는 어떤 서버로도 전송되지 않습니다.
SVG 및 PNG 내보내기
문서 및 슬라이드에 적합한 선명한 벡터 SVG 또는 고해상도 2× PNG로 다이어그램을 다운로드하세요.
모든 Mermaid 다이어그램 유형 지원
순서도, 시퀀스 다이어그램, 클래스 다이어그램, ER 다이어그램, 간트 차트, 마인드맵, Git 그래프 등 다양한 다이어그램 유형을 지원합니다.
AI 다이어그램 준비 완료
AI 시대를 위해 제작되었습니다. Claude, ChatGPT, Gemini 또는 기타 LLM에서 생성된 다이어그램을 직접 미리 볼 수 있습니다.
항상 무료
계정 필요 없음, 사용량 제한 없음, 워터마크 없음. Zolkit의 Mermaid 뷰어는 영원히 완전 무료입니다.
Mermaid 다이어그램 미리보기 방법
- 1
왼쪽 편집기에 Mermaid 코드를 붙여넣으세요. AI 어시스턴트에서 복사하거나 수동으로 작성할 수 있습니다.
- 2
다이어그램이 오른쪽 미리보기 창에 즉시 렌더링됩니다. 구문 오류가 있으면 해당 문제가 설명된 메시지가 표시됩니다.
- 3
'SVG 내보내기' 또는 'PNG 내보내기'를 클릭하여 문서, 슬라이드 또는 공유에 사용할 수 있는 파일 형식으로 다이어그램을 다운로드하세요.
자주 묻는 질문
stateDiagram와 stateDiagram-v2의 차이점은 무엇인가요?
`stateDiagram-v2`는 Mermaid v10+에서 현재 권장되는 구문입니다. 원래 `stateDiagram`에는 없었던 복합(중첩) 상태, 동시 영역, 선택 의사 상태, 포크 및 조인에 대한 지원을 추가합니다. v1 구문은 하위 호환성을 위해 계속 작동하지만, 전체 기능 세트에 액세스하려면 모든 새 다이어그램은 `stateDiagram-v2`를 사용해야 합니다.
Mermaid에서 중첩(복합) 상태를 어떻게 표시하나요?
중괄호를 사용하여 `state` 블록을 사용합니다: `state Processing { [*] --> Validating \n Validating --> Charging \n Charging --> [*] }`. 외부 상태 'Processing'에는 자체 내부 상태 머신이 포함됩니다. 복합 상태는 'Processing' 상태일 때 여러 하위 단계를 거치는 주문과 같이 고수준 상태에 내부 하위 프로세스가 있는 복잡한 워크플로를 모델링합니다.
상태 전환에 레이블을 어떻게 추가하나요?
전환 화살표 뒤에 콜론을 추가합니다: `Idle --> Loading : 사용자 양식 제출`. 레이블은 전환을 트리거하는 이벤트 또는 조건을 문서화합니다. 잘 레이블이 지정된 전환은 상태 다이어그램을 실행 가능한 사양으로 바꿉니다. 개발자는 각 레이블을 구현의 함수 호출, 이벤트 핸들러 또는 API 응답에 직접 매핑할 수 있습니다.
동시 상태란 무엇이며 언제 사용해야 하나요?
동시 상태(복합 상태 내에서 `--` 구분 기호 사용)는 병렬로 실행되는 시스템 부분을 모델링합니다. 예를 들어, 음악 플레이어는 재생(재생 중/일시 중지) 및 표시(전체 화면/일반)에 대한 동시 상태를 가질 수 있습니다. 두 개의 독립적인 동작이 공존하고 각 동작에 자체 상태 머신이 필요한 경우, 모든 조합을 별도의 최상위 상태로 모델링하는 대신 동시 상태를 사용합니다.