# Mermaid state diagrams as text

Pass `stateDiagram` or `stateDiagram-v2` source to `renderGlyphDiagram`.

## Order lifecycle



```mermaid
stateDiagram-v2
 direction LR
 [*] --> Draft
 Draft --> Pending: submit
 Pending --> Paid: pay
 Pending --> Cancelled: cancel
 Paid --> Shipped: dispatch
 Paid --> Refunded: refund
 Shipped --> [*]
```

```text
                                                            dispatch  ╭─────────╮           
                                                           ┌──────────▶ Shipped │──▶◉       
                                          pay    ╭──────╮  │          ╰─────────╯           
                                      ┌──────────▶ Paid ├──┤                                
         ╭───────╮ submit ╭─────────╮ │          ╰──────╯  │ refund  ╭──────────╮           
      ●──▶ Draft │────────▶ Pending ├─┤                    └─────────▶ Refunded │           
         ╰───────╯        ╰─────────╯ │       ╭───────────╮          ╰──────────╯           
                                      └───────▶ Cancelled │                                 
                                       cancel ╰───────────╯                                 
```



## Composite state



```mermaid
stateDiagram-v2
 direction LR
 [*] --> Checkout
 state Checkout {
 [*] --> Review
 Review --> Payment
 Payment --> [*]
 }
 Checkout --> Complete
 Complete --> [*]
```

```text
       ················Checkout·················                        
       ·                                       ·                        
       ·       ╭────────╮    ╭─────────╮       ·    ╭──────────╮        
  ●──────▶●────▶ Review │────▶ Payment │────▶◉──────▶ Complete │────▶◉  
       ·       ╰────────╯    ╰─────────╯       ·    ╰──────────╯        
       ·                                       ·                        
       ·········································                        
```



## Syntax and limits

- `[*]` becomes a point marker scoped to its region; transitions use `-->` with an optional `: caption`.
- `state Choice <<choice>>` draws a diamond. Fork/join declarations use rounded nodes and report the adaptation.
- `state Name { ... }` encloses a composite. `--` separates concurrent regions; empty regions are omitted and reported.
- Notes become text rows. Invalid notes and concurrency separators have named errors in [troubleshooting](/diagrams/troubleshooting/).
- Composite transitions attach to the group's start/first or end/last child. Self-transitions on composites are adapted and reported.
- Reused state identities across scopes may need copies; inspect `state-shared`. Styling and nested directives do not execute.