상태 다이어그램 생성기
상태 머신을 텍스트로 모델링하고 렌더링되는 것을 보세요. Mermaid의 stateDiagram-v2를 사용하여 상태, 전환 및 이벤트를 정의합니다. 주문 수명 주기, 연결 상태, 승인 흐름, 모두 기기에서.
One step per line. Indent two spaces to branch beneath the line above.
상태, 전환 및 그 사이의 이벤트
상태 다이어그램은 "이 것이 무엇이 될 수 있고, 어떻게 상태 간에 이동하는가?"라고 답합니다. Mermaid의 stateDiagram-v2는 직접 매핑됩니다. "[*]"는 시작과 끝을 표시하고, 모든 "A --> B: event"는 레이블이 지정된 전환이며, 합성 "state Name { … }"는 더 풍부한 동작을 위해 부분 상태를 중첩합니다. 주문 수명 주기, 연결 프로토콜 또는 문서의 승인 경로를 정확히 파악하는 가장 명확한 방법입니다.
텍스트로 작성하면 모델이 정직하게 유지됩니다. 상태를 추가하고, 이에 도달하는 이벤트의 이름을 지정하고, 다시 렌더링하세요. 레이아웃이 자동으로 리플로우되고 다이어그램은 문서화하는 규칙에서 드리프트하지 않습니다.
상태 enum에서 그림으로
코드에 이미 상태 필드가 있는 경우(보류, 지급, 배송, 취소됨), 상태 다이어그램은 해당 enum을 전체 팀이 추론할 수 있는 것으로 변환합니다. 코드가 허용하는 전환과 금지하는 전환을 포함합니다. 각 화살표에 트리거하는 이벤트 또는 메서드로 레이블을 지정하여 다이어그램이 사양처럼 읽혀집니다.
Mermaid 블록을 설계 문서 또는 풀 요청에 드롭하면 검토자가 누락된 전환이나 불가능한 경로를 버그가 되기 전에 발견할 수 있습니다.
자주 묻는 질문
텍스트에서 상태 다이어그램을 어떻게 만들나요?
"stateDiagram-v2"로 시작하고, "[*] --> First"로 시작을 표시한 후, "Pending --> Paid: payment confirmed"와 같은 전환을 추가하세요. 끝 상태는 "Last --> [*]"를 사용합니다. 실시간으로 렌더링되고 SVG 또는 PNG로 내보냅니다.
전환에 이벤트로 레이블을 어떻게 지정하나요?
화살표에 콜론 뒤에 트리거를 넣습니다. 예: "Draft --> Submitted: submit". 레이블은 상태 변경을 유발하는 이벤트, 메서드 또는 조건을 표시합니다.
상태를 중첩할 수(합성 상태) 있나요?
네, "state Name { … }"로 부분 상태를 래핑하고 자신의 "[*] --> …" 시작을 포함합니다. 치트시트 위는 구문을 보여주고, 미디어 플레이어 예시는 합성 Playing 상태를 시연합니다.
상태 다이어그램과 플로우차트의 차이점은 무엇인가요?
플로우차트는 프로세스를 보여줍니다. 한 번 실행되는 단계 및 결정입니다. 상태 다이어그램은 개체가 수명 동안 차지할 수 있는 상태와 상태 간에 이동하는 이벤트를 보여주므로 이전 상태로의 루프가 정상입니다.
내 상태 다이어그램이 어디든지 업로드되나요?
아니요. Mermaid로 브라우저에서 렌더링되므로 상태, 이벤트 및 내부 논리가 기기를 떠나지 않습니다.