Templates / sequenceDiagram

WebSocket connection lifecycle

Upgrade handshake, heartbeat loop, and clean shutdown — a template for documenting realtime connections.

Open in studio

Preview

Mermaid 11 renderer

Rendering preview...

Mermaid source

sequenceDiagram

sequenceDiagram
    participant Client
    participant Server

    Client->>Server: HTTP upgrade request
    Server-->>Client: 101 Switching Protocols
    loop Heartbeat every 30s
        Client->>Server: ping
        Server-->>Client: pong
    end
    Client->>Server: Close frame
    Server-->>Client: Close acknowledged

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.