Templates / sequenceDiagram

Payment checkout sequence

An order confirmation flow through a payment provider, with authorized and declined branches driven by webhooks.

Open in studio

Preview

Mermaid 11 renderer

Rendering preview...

Mermaid source

sequenceDiagram

sequenceDiagram
    autonumber
    actor Shopper
    participant Shop as Storefront
    participant Pay as Payment provider
    participant Bank

    Shopper->>Shop: Confirm order
    Shop->>Pay: Create payment intent
    Pay-->>Shop: Client secret
    Shopper->>Pay: Submit card details
    Pay->>Bank: Authorize charge
    alt Authorized
        Bank-->>Pay: Approved
        Pay-->>Shop: Webhook payment_succeeded
        Shop-->>Shopper: Order confirmed
    else Declined
        Bank-->>Pay: Declined
        Pay-->>Shop: Webhook payment_failed
        Shop-->>Shopper: Ask for another method
    end

More templates

flowchartArchitecture

Microservices architecture

A service map with an API gateway, core services, and shared infrastructure. A solid starting point for README architecture sections.

sequenceDiagramProcess

User login sequence

A login flow with token issuance and a failure branch. Useful for documenting auth endpoints and session behavior.

stateDiagram-v2Process

Order state machine

Lifecycle states for an e-commerce order, from creation to fulfillment, with cancellation and refund paths.