A sequence diagram shows how different participants — people, systems, or services — communicate with each other over time. Messages flow left to right between vertical lifelines, with time advancing downwards. Solid arrows represent requests; dashed arrows represent replies.

Sequence diagrams are ideal for illustrating the back-and-forth of any multi-step interaction: placing an online order, logging in to a website, booking a table at a restaurant.

sequenceDiagram
    participant S as Shopper
    participant W as Bookshop Website
    participant P as Payment Service
    participant WH as Warehouse

    S->>W: Search for a book
    W-->>S: Show search results
    S->>W: Add to basket
    S->>W: Proceed to checkout
    W->>P: Process payment
    P-->>W: Payment confirmed
    W-->>S: Order confirmation email
    W->>WH: Dispatch order
    WH-->>S: Shipping notification

The diagram makes it easy to spot bottlenecks and understand which system is responsible for each step — without reading a single line of code or process documentation.

```mermaid
sequenceDiagram
    participant S as Shopper
    participant W as Bookshop Website
    participant P as Payment Service
    participant WH as Warehouse

    S->>W: Search for a book
    W-->>S: Show search results
    S->>W: Add to basket
    S->>W: Proceed to checkout
    W->>P: Process payment
    P-->>W: Payment confirmed
    W-->>S: Order confirmation email
    W->>WH: Dispatch order
    WH-->>S: Shipping notification
```

For more sequence diagram syntax see the sequence diagram documentation at mermaid.js.org