How do I draw a message to self?

M->>M: text draws a small loop back to the same lifeline, handy for local processing steps.

Can participants be drawn as stick figures?

Change participant U as User to actor U as User and the box becomes a person icon.

The diagram is too tall

Height grows with the number of messages. Remove secondary fragments such as the retry loop, or split into "payment" and "webhook and reconciliation" diagrams; exports always contain the whole diagram and the PDF page size follows the diagram.

Online Payment Sequence Diagram Template

Payment sequence diagram with user, merchant system, payment provider and bank: create the payment, checkout page, charge, synchronous result, asynchronous webhook and retry on failure. For payment integration docs; free PNG, Word and PowerPoint export.

Previewed in the “Cinnabar” theme; you can switch themes in the editor

Open in the editorFree · No sign-up · No watermark

Edit the text, pick a theme, export Word / PowerPoint / PDF

When to use it

Payment provider integration docs, order system design and e-commerce project reports. Two lines are easy to forget and are drawn explicitly here: the asynchronous webhook from the provider to the merchant, and the retry loop when the webhook fails. The merchant's self-message (M->>M) is local work: verify the signature, update the order.

Making it yours

Replace "Payment provider" with the actual provider and use its endpoint names in the messages.
Add a "poll payment status" fallback before the webhook: M->>P: Query payment status.
Refunds fit in a separate diagram, or as opt Refund requested … end at the end.

Mermaid code

sequenceDiagram
    autonumber
    participant U as User
    participant M as Merchant system
    participant P as Payment provider
    participant B as Bank
    U->>M: Submit order
    M->>P: Create payment
    P-->>M: Return checkout URL
    M-->>U: Show checkout page
    U->>P: Confirm payment
    P->>B: Charge card
    B-->>P: Charge succeeded
    P-->>U: Show payment success
    P->>M: Webhook notification
    M->>M: Verify signature, update order
    M-->>P: 200 OK
    loop While the webhook fails
        P->>M: Retry with back-off
    end

Ask an AI for one with this structure

Send the prompt below to ChatGPT or Claude, then paste the whole reply into the editor; the code inside is detected automatically.

Draw an online payment sequence diagram in Mermaid sequenceDiagram syntax with participants User, Merchant system, Payment provider and Bank. The user submits an order, the merchant creates a payment with the provider and shows the checkout page, the user confirms, the provider charges the bank and shows success, then sends a webhook to the merchant, which verifies the signature, updates the order and returns 200; if the webhook fails the provider retries with back-off. Enable autonumber. Output only the mermaid code block.

FAQ

How do I draw a message to self?: M->>M: text draws a small loop back to the same lifeline, handy for local processing steps.
Can participants be drawn as stick figures?: Change participant U as User to actor U as User and the box becomes a person icon.
The diagram is too tall: Height grows with the number of messages. Remove secondary fragments such as the retry loop, or split into "payment" and "webhook and reconciliation" diagrams; exports always contain the whole diagram and the PDF page size follows the diagram.

More in this category

All templates

Updated 2026-09-05