# Mermaid sequence diagrams as text

Import `renderGlyphSequence` from `@glyphcss/diagrams/sequence`, then pass source and [shared render options](/diagrams/options/). The root graph renderer is not the sequence entry point.

## Request and response



```mermaid
sequenceDiagram
 participant Buyer
 participant API
 participant Stock
 participant Pay
 participant Mail
 Buyer->>API: Place order
 API->>Stock: Reserve items
 Stock-->>API: Items held
 API->>Pay: Charge card
 Pay-->>API: Approved
 API->>Mail: Send receipt
 Mail-->>API: Queued
 API-->>Buyer: Order confirmed
```

```text
   Buyer                       API                     Stock           Pay          Mail    
     │                          │                        │              │             │     
     │ Place order              │                        │              │             │     
     ├─────────────────────────▶│                        │              │             │     
     │                          │                        │              │             │     
     │                          │ Reserve items          │              │             │     
     │                          ├───────────────────────▶│              │             │     
     │                          │                        │              │             │     
     │                          │ Items held             │              │             │     
     │                          │◀╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌┤              │             │     
     │                          │                        │              │             │     
     │                          │ Charge card            │              │             │     
     │                          ├────────────────────────┼─────────────▶│             │     
     │                          │                        │              │             │     
     │                          │ Approved               │              │             │     
     │                          │◀╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌┼╌ ╌ ╌ ╌ ╌ ╌ ╌ ┤             │     
     │                          │                        │              │             │     
     │                          │ Send receipt           │              │             │     
     │                          ├────────────────────────┼──────────────┼────────────▶│     
     │                          │                        │              │             │     
     │                          │ Queued                 │              │             │     
     │                          │◀╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌┼╌ ╌ ╌ ╌ ╌ ╌ ╌ ┼ ╌ ╌ ╌ ╌ ╌ ╌ ┤     
     │                          │                        │              │             │     
     │ Order confirmed          │                        │              │             │     
     │◀╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌┤                        │              │             │     
     │                          │                        │              │             │     
```



## Alternative responses and notes



```mermaid
sequenceDiagram
 actor Buyer
 participant API
 Note right of API: Keep receipt
 Buyer->>API: Place order
 alt In stock
 API-->>Buyer: Confirmed
 else Sold out
 API-->>Buyer: Try later
 end
```

```text
      o                                                         
    Buyer                         API                           
      │                            │                            
      │                            │ ┌────────────────────┐     
      │                            │ │ note  Keep receipt │     
      │                            │ └────────────────────┘     
      │ Place order                │                            
      ├───────────────────────────▶│                            
      │                            │                            
    ┌─ alt In stock ───────────────┼─┐                          
    │ │ Confirmed                  │ │                          
    │ │◀╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌┤ │                          
    │ │                            │ │                          
    ├╌ else Sold out ╌╌╌╌╌╌╌╌╌╌╌╌╌╌│╌┤                          
    │ │ Try later                  │ │                          
    │ │◀╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌ ╌┤ │                          
    └─┼────────────────────────────┼─┘                          
      │                            │                            
```



## Syntax and limits

- Participant aliases use `participant API as Order service`; `actor` draws a stick figure.
- Message endpoints control direction; solid and dashed message styles remain distinct. Self-messages draw a loop.
- `loop`, `alt`/`else`, `opt`, `par`/`and`, `critical`/`option`, and `break` create frames with matched `end` statements.
- Notes can sit over participants or left/right of one participant. `autonumber` supports start and step.
- Activations, `rect`, and participant `box` styling are inert. Create/destroy syntax becomes full lifelines; half and central arrows become solid or dashed directed messages with notes in the report.
- Pagination follows time and repeats participant headers and continuing frames. `overflow: "expand"` grows the height; too many participants can still produce `sequence-layout-overflow`.
- See [sequence JSON](/diagrams/json/#sequence-json) for direct control over frames and note positions.