View Source

The demo shown below was taken from the official Mermaid documentation.

stateDiagram-v2
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

Textual representation

stateDiagram-v2
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

^{The code above is rendered by "}^{Prism Syntax Highlighter for Confluence}^{" which supports highlighting Mermaid syntax.}

👉 Check out the official Mermaid documentation here https://mermaid.js.org/syntax/stateDiagram.html.