StateShow the states of a system and the transitions between them.Copy MarkdownView MarkdownEdgesTwo-way transitions — Every edge still meets the middle of a side.Open in PlaygroundstartstoppauseresumestopIdleRunningPausedComposite stateOpen in PlaygroundActivepausekeysaveeditSavedTypingWaitingWide fanOpen in PlaygroundMenuOpenSaveExportPrintShareSettingsHelpDoneDocumentation examples1. stateDiagram-v2 · [*] --> StillOpen in PlaygroundSimple sampleStillMovingCrash2. stateDiagram · [*] --> StillOpen in PlaygroundStillMovingCrash3. stateDiagram-v2 · [*] --> DraftOpen in PlaygroundReviewsubmitapprovedrejectedDraftSubmittedPublishedScreeningDecision4. stateDiagram-v2 · [*] --> DraftOpen in PlaygroundReviewsubmitapprovedrejectedDraftSubmittedPublishedScreeningDecision5. stateDiagram-v2 · stateIdOpen in PlaygroundstateId6. stateDiagram-v2 · state "This is a state description" as s2Open in PlaygroundThis is a state description7. stateDiagram-v2 · s2 : This is a state descriptionOpen in PlaygroundThis is a state description8. stateDiagram-v2 · s1 --> s2Open in Playgrounds1s29. stateDiagram-v2 · s1 --> s2: A transitionOpen in PlaygroundA transitions1s210. stateDiagram-v2 · [*] --> s1Open in Playgrounds111. stateDiagram-v2 · [*] --> FirstOpen in PlaygroundFirstAnother CompositesecondAnother simple12. stateDiagram-v2 · [*] --> FirstOpen in PlaygroundFirstSecondThirdsecondthird13. stateDiagram-v2 · [*] --> FirstOpen in PlaygroundFirstSecondThirdfirsecthi14. stateDiagram-v2 · state if_state <<choice>>Open in Playgroundif n < 0if n >= 0IsPositiveFalseTrue15. stateDiagram-v2 · state fork_state <<fork>>Open in PlaygroundState2State3State416. stateDiagram-v2 · State1: The state with a noteOpen in PlaygroundThe state with a noteState2Important information! You can writenotes.This is the note to the left.17. stateDiagram-v2 · [*] --> ActiveOpen in PlaygroundActiveEvNumLockPressedEvNumLockPressedEvCapsLockPressedEvCapsLockPressedEvScrollLockPressedEvScrollLockPressedNumLockOffNumLockOnCapsLockOffCapsLockOnScrollLockOffScrollLockOn18. stateDiagram · direction LROpen in PlaygroundBACDabBACDab19. stateDiagram-v2 · [*] --> StillOpen in PlaygroundStillMovingCrash20. stateDiagram · direction TBOpen in PlaygroundThis is the accessible titleThis is an accessible descriptionStillMovingCrash21. stateDiagram · direction TBOpen in PlaygroundThis is the accessible titleThis is an accessible descriptionStillMovingCrash22. stateDiagram · classDef yourState font-style:italic,font-weight:bold,fill:whiteOpen in PlaygroundYour state with spaces initSomeOtherStateYetAnotherState