전체 다이어그램으로 돌아가기

상태 다이어그램

시스템이나 애플리케이션의 상태 전이를 표현합니다. 라이프사이클 상태와 워크플로 모델링에 적합합니다.

상태 다이어그램이란?

상태 다이어그램(상태 머신 다이어그램이라고도 함)은 객체 또는 시스템이 있을 수 있는 다양한 상태와 이벤트에 대응하여 상태 간에 어떻게 전환하는지를 시각화합니다. 라이프사이클 동작, 워크플로, 복잡한 조건부 로직을 모델링하는 데 필수적입니다. 각 상태는 안정적인 조건을 나타내고, 전환은 상태 변경을 유발하는 트리거를 보여줍니다.

편집 및 미리보기

Mermaid 문법으로 상태 다이어그램을(를) 작성하고 변경 사항을 즉시 확인하세요.

에디터
100%

일반적인 사용 사례

애플리케이션 상태 관리

UI 상태, 폼 유효성 검사 흐름, 애플리케이션 모드를 모델링합니다. React나 Vue와 같은 프론트엔드 프레임워크에서 상태 머신을 설계하는 데 필수적입니다.

워크플로 모델링

승인 워크플로, 주문 처리 상태, 티켓 라이프사이클 관리를 설계합니다. 비즈니스 프로세스의 상태 전환과 가드 조건을 매핑합니다.

프로토콜 설계

네트워크 프로토콜 상태, 연결 라이프사이클, 통신 상태 머신을 시각화합니다. 임베디드 시스템과 IoT 장치 프로그래밍에 중요합니다.

게임 개발

캐릭터 상태, 게임 모드, 레벨 진행을 모델링합니다. AI 동작과 게임 메커니즘을 위한 유한 상태 머신을 설계합니다.

주요 기능

상태 유형

단순 상태, 복합 상태, 초기, 최종, 선택 의사 상태와 같은 특수 상태를 지원합니다.

전환 가드

가드 조건과 상태 변경 중 실행되는 액션이 있는 조건부 전환을 정의합니다.

중첩 상태

복잡한 동작을 모델링하기 위해 부모 및 자식 상태가 있는 계층적 상태 머신을 만듭니다.

동시 상태

동시 동작이 있는 시스템을 위해 병렬 상태 머신과 직교 영역을 모델링합니다.

모범 사례

간단하게 시작

높은 수준의 상태로 시작하여 점진적으로 세분화합니다. 필요할 때까지 복잡성을 숨기기 위해 복합 상태를 사용합니다.

상태를 조건으로 명명

동사보다 형용사나 과거 분사(예: 'Active', 'Suspended', 'Completed')를 사용합니다.

전환 문서화

모든 전환에 이벤트, 가드 조건, 액션을 레이블로 지정합니다. 모든 화살표는 명확한 스토리를 전달해야 합니다.

상태 폭발 방지

상태가 너무 많으면 결합할 패턴을 찾거나 대신 상태 변수를 사용합니다.