Realtime Chat System Design Pattern
A chat platform where web and mobile clients connect through an API and websocket layer, messages are stored durably, presence is cached, and notifications handle offline users.
“Create a system design diagram for a realtime chat application with web and mobile clients, API gateway, auth service, websocket gateway, chat service, message store, Redis presence cache, Kafka for fan-out events, notification worker, and push notification provider. Separate realtime delivery from offline notification flow.”
Free — no credit card required
Scenario summary
A chat platform where web and mobile clients connect through an API and websocket layer, messages are stored durably, presence is cached, and notifications handle offline users.
Why this architecture matters
- 1
Chat systems have both low-latency realtime paths and durable storage paths, so a diagram helps teams avoid mixing them together.
- 2
It shows where presence, fan-out, unread counts, and offline delivery actually happen.
- 3
It gives engineers a shared reference for design review, onboarding, and interview-style system design discussions.
Refine it with follow-up prompts
After generating the base diagram, use these prompts to iterate and add detail — the same way a real architect would refine a whiteboard sketch.
- 1
“Add unread count service and show how messages are delivered when a user reconnects.”
Try this follow-up - 2
“Show multi-region routing and where message ordering guarantees matter.”
Try this follow-up - 3
“Add media upload path and indicate which components are stateful versus stateless.”
Try this follow-up
What to emphasize in the diagram
- •Separate websocket delivery from durable message storage and push notification paths.
- •Show where presence and unread state live so the design is easier to reason about.
- •Annotate async fan-out and offline delivery instead of leaving them implied.
How AIDrawIO generates this diagram
- 1.You paste the prompt above into the chat input.
- 2.AIDrawIO sends it to your chosen AI model (GPT-5, Claude, or Gemini).
- 3.The model returns draw.io-compatible XML — rendered instantly in the canvas.
- 4.Export as SVG, PNG, or XML. Edit any element manually or with follow-up prompts.
Related tools
Frequently asked questions
What should a realtime chat system diagram include?
It should include clients, websocket or realtime gateway, message storage, presence or cache layer, fan-out infrastructure, and offline notification handling.
Why separate realtime and offline delivery in the diagram?
Because they have different latency, storage, and failure behavior. Splitting them makes the system easier to review and explain.