🗺️ Draw components, connect them, pick real tech per box
System design diagram builder
Drag out the boxes every system design interview ends up drawing — client, load balancer, app server, cache, database, queue, CDN and more — connect them with arrows, and pick a real technology for each from a curated shortlist. Load a starter example to see a shape you recognize, then reshape it into your own answer. Pairs with the QPS & capacity calculator once you need to defend the numbers behind the boxes.
Add a component
Client & Edge
Compute
Data
Messaging
Cross-cutting
Click a component to rename it and pick its tech, or click a connecting line to label or delete it. Turn on "Connect components" to draw arrows between boxes.
💡 Drag the canvas’s bottom-right corner to resize it, use the zoom controls (or Ctrl/⌘ + scroll) to fit more, and scroll to pan around.
Every box, and what you’d actually build it with
A whiteboard diagram is really a set of decisions: what role does this box play, and what would you run in production to fill it? The palette below covers the boxes that come up in almost every system design interview — client-facing edge components, compute, data stores, messaging, and the cross-cutting concerns (auth, rate limiting, observability) that get bolted on once a system has more than one service.
Client & Edge
| Component | Role | Common tech choices |
|---|---|---|
| 🖥️ Client (Web / Mobile) | Where the user (or another system) initiates requests. | React / Next.js, iOS (Swift), Android (Kotlin), React Native / Flutter |
| 🌐 CDN | Caches static assets at edge locations close to users. | Cloudflare, Amazon CloudFront, Fastly, Akamai |
| ⚖️ Load Balancer | Spreads incoming traffic across multiple server instances. | AWS ALB / NLB, Nginx, HAProxy, Envoy |
| 🚪 API Gateway | Single entry point: auth, rate limiting, routing to services. | AWS API Gateway, Kong, Apigee, Traefik |
Compute
| Component | Role | Common tech choices |
|---|---|---|
| 🧩 App Server / Microservice | Stateless service that holds business logic and handles requests. | Node.js (Express/Fastify), Spring Boot (Java), Go (Gin/Fiber), Django / FastAPI (Python) |
| ⚡ Serverless Function | Event-triggered compute that scales to zero between calls. | AWS Lambda, Google Cloud Functions, Azure Functions, Cloudflare Workers |
| 🛠️ Background Worker | Consumes queued jobs off the main request path (emails, exports, encoding…). | Celery (Python), Sidekiq (Ruby), BullMQ (Node.js), Temporal |
Data
| Component | Role | Common tech choices |
|---|---|---|
| 🧠 Cache | In-memory layer that absorbs reads and cuts database load. | Redis, Memcached, DAX (DynamoDB Accelerator), Hazelcast |
| 🗄️ SQL Database | Relational store for structured, transactional data. | PostgreSQL, MySQL, Amazon Aurora, CockroachDB |
| 📦 NoSQL Database | Flexible-schema store for high-scale key-value/document data. | DynamoDB, MongoDB, Cassandra, Couchbase |
| 🪣 Object / Blob Storage | Durable storage for files, images, backups at scale. | Amazon S3, Google Cloud Storage, Azure Blob Storage, MinIO |
| 🔍 Search Index | Full-text / faceted search over your data. | Elasticsearch, OpenSearch, Algolia, Typesense |
| 📊 Data Warehouse / Analytics | Stores large historical data for BI/analytics queries, separate from the OLTP path. | Snowflake, Google BigQuery, Amazon Redshift, ClickHouse |
Messaging
| Component | Role | Common tech choices |
|---|---|---|
| 📨 Message Queue | Decouples producers from consumers and buffers async work. | Apache Kafka, RabbitMQ, Amazon SQS, Google Pub/Sub |
Cross-cutting
| Component | Role | Common tech choices |
|---|---|---|
| 🔐 Auth Service | Centralizes login, tokens and permissions instead of every service rolling its own. | Auth0, AWS Cognito, Okta, Keycloak |
| 🔔 Notification Service | Sends push/email/SMS notifications asynchronously. | Firebase Cloud Messaging, Amazon SNS, Twilio, SendGrid |
| 🚦 Rate Limiter | Throttles requests to protect backends from abuse or overload. | Redis token bucket, Kong rate-limiting plugin, Envoy rate limit service, Cloudflare rate limiting |
| 📈 Monitoring & Logging | Tracks metrics, logs and traces so you can see what the system is actually doing. | Prometheus + Grafana, Datadog, New Relic, ELK / OpenSearch stack |
Common questions
- What is this tool for?
- Sketching a system’s architecture the way you would on a whiteboard in a system design interview — boxes for each component (load balancer, cache, database, queue…), arrows for how data flows between them, and a real technology choice attached to each box so the diagram doubles as a decision record.
- How do I connect two components?
- Click “Connect components” to turn on connect mode, then click a source box followed by a target box — an arrow appears between them. Click the box you just connected to again to keep chaining a path (A → B → C) without re-toggling the mode.
- Can I export the diagram?
- Yes — “Export PNG” downloads an image of the canvas, and “Copy as Mermaid” copies Mermaid flowchart syntax you can paste directly into GitHub markdown, Notion, Confluence or any tool that renders Mermaid diagrams.
- Does it save my diagram?
- Yes, automatically, to your browser’s local storage — nothing is sent to a server. It’ll still be there next time you open this page on the same device and browser, but it won’t follow you to another device.
- How were the technology options chosen?
- Each component type ships with 3-4 real, commonly-used technologies for that role — e.g. a Cache box offers Redis, Memcached, DAX and Hazelcast — with a short note on when you’d reach for each. They’re meant as a memory-jog and a starting shortlist, not an exhaustive or opinionated “best choice.”