Real-time Flow Diagram — WebSocket Notification Example

Diagram source. Edit it live in the browser

title Real-time Notification Flow

type actor User

User -> Web App: connect via WebSocket
Web App -> Notification Server: subscribe to channel
Backend Service -> Message Queue: publish event
Message Queue -> Notification Server: event received
Notification Server -> Web App: push notification
Web App -> User: show live update

What this diagram shows

There are two halves here and they don't know about each other. The connection half: a browser connects and subscribes to a channel. The event half: some backend service publishes something, and it fans out to whoever's listening. Missed-notification bugs are almost always about working out which half dropped it.

The same picture covers chat, live dashboards, and order tracking. Only the labels change.

Step-by-step flow breakdown

Client connectsThe user's browser opens a WebSocket connection to the web app.

Subscribe to a channelThe web app registers the connection with the notification server for a specific channel or room.

An event happens elsewhereA separate backend service publishes an event. It has no idea who's connected right now, and doesn't need to.

Queue delivers the eventThe message queue routes the event to the notification server.

Push to the clientThe notification server pushes the update down the open WebSocket connection.

Live update shownThe web app renders the update without the user refreshing the page.

When to use this flow diagram

Choosing a real-time approach before committing to a library.
Tracing missed notifications: published, queued, or never delivered?
Scale planning. This is where you'd point at Redis or Kafka for multi-server fan-out.
Showing how the async event path differs from a normal request.

Common variations

Multiple subscribers

Add more clients: Notification Server -> Web App 2: push notification makes the fan-out visible.

Presence tracking

Add a heartbeat arrow: Web App -> Notification Server: heartbeat.

Fallback to polling

Add Web App -> API Gateway: poll for updates for clients that can't hold a socket open.

Related flow diagram examples

Frequently asked questions

What does this diagram show?

How an event raised in one service reaches a browser that's just sitting there listening. Connection setup on one side, publish-and-push on the other.

Does this only work for chat apps?

No. Anything shaped like 'something changed, tell everyone watching' fits: dashboards, order tracking, collaborative cursors.

Can I use this template for free?

Yes. Rename the services to your stack and export. No sign up.

Real-time Notification Flow (WebSocket)