System design diagram
Sketch a system design as you would on a whiteboard: users, a CDN, a load balancer, app servers, a cache, a primary database with a read replica, and a queue with workers. It opens with that classic layout, to start from in an interview or a design review.
The usual building blocks
- Load balancer: spreads requests over identical app servers, so you can add more
- Cache: keeps frequently read data in memory, in front of the database
- CDN: serves static files and media from close to the user
- Primary database and read replicas: writes go to one, reads are spread over the others
- Queue and workers: slow jobs such as emails, video or reports run outside the request
- Object storage: files, uploads and backups
All of them are in the shape library, under Architecture and Databases & caches.
In an interview
Start with the simplest design that works (a client, one server, one database), then add a piece for each requirement: a load balancer for more traffic, a cache for slow reads, a queue for slow work, replicas for heavy reading. Duplicate the diagram before each step to keep the earlier versions to compare.
Write numbers on the diagram as you estimate them, such as requests per second or data per day, in notes or on the connectors.
Practise and share
Every design you practise stays in your browser under "All diagrams". Share a link to get feedback, or export an image for your notes.
Questions
Can I use it in a remote interview?
Yes, where the interview lets you use your own tool: it runs in any modern browser, with nothing to install and no account, and you can share your screen or send a link to the diagram.
Does it draw the design for me?
No. It is a drawing tool: you place and connect the pieces, starting from the example or from a blank canvas.
How is it different from an architecture diagram?
Mostly in purpose. A system design diagram is a sketch for working out how something could be built; an architecture diagram documents how a system is built. The architecture diagram page starts from a different example.
More tools
- Free Online Diagram Maker & Editor
- System Architecture Diagram Tool
- Microservices Architecture Diagram Tool
- Flowchart Maker – Free Online Flowchart Tool
- Network Diagram Maker – Draw LAN & WAN Diagrams
- ER Diagram Tool – Entity Relationship Diagrams
- Sequence Diagram Tool – Mermaid Syntax
- UML Class Diagram Tool – Draw Online
- Mind Map Maker – Free Online Mind Mapping
- Formatter & Converter for JSON, YAML, XML, SQL
- Crypto Tools: Passwords, Keys, Hashes & JWTs
- Timestamp, Cron, Regex & UUID Utilities