docs:diagram:state

Table of Contents

About

The state-diagram component is a diagram component that permits to create state diagram.

Example

The markup

<state-diagram>
stateDiagram-v2
    direction LR
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
</state-diagram>

The output:

stateDiagram-v2 direction LR [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]

Syntax

The syntax is based on the State Diagram Mermaid Definition

<state-diagram>
   ... Mermaid State Diagram definition ...
</state-diagram>

Mermaid offers a live editor that you can use to validate and develop your diagrams.

This component is based on the mermaid component.