# SystemDesignDraw - Full Technical Overview & Documentation

> SystemDesignDraw (https://systemdesigndraw.com) is an open-source, local-first system design whiteboard, architecture diagramming hub, and capacity estimation tool suite powered by Excalidraw, Astro, and Tailwind CSS.

## Architecture & Technology Stack

- Framework: Astro 7 (Static Output mode)
- Canvas Engine: @excalidraw/excalidraw (MIT License) with custom React 19 wrapper
- Styling: Tailwind CSS v4
- Hosting & Edge: Cloudflare Pages with domain-level headers & Cloudflare edge caching
- Privacy Model: Local-first (diagrams persist in client localStorage and memory; zero server-side telemetry or accounts)
- Internationalization: Multi-locale static routing (`/` for English, `/es/` for Spanish) with bidirectional hreflang tags

## Core Formula Matrix (Cheatsheet Reference)

### 1. Back-of-the-Envelope Capacity Estimations
- Requests per second (QPS) = Total Daily Requests / 86,400 (or ~100,000 for quick mental math)
- Peak QPS = Average QPS * Peak Factor (typically 2x to 5x)
- Daily Ingress / Egress = QPS * Average Payload Size * 86,400
- Network Bandwidth = QPS * Average Payload Size * 8 bits/byte

### 2. High Availability (SLA Nines & Annual Downtime)
- 99.0% (Two Nines): 3.65 days/year (8.77 hours/month)
- 99.9% (Three Nines): 8.77 hours/year (43.83 minutes/month)
- 99.95%: 4.38 hours/year (21.92 minutes/month)
- 99.99% (Four Nines): 52.6 minutes/year (4.38 minutes/month)
- 99.999% (Five Nines): 5.26 minutes/year (26.3 seconds/month)

### 3. Redis In-Memory Cache Sizing (80/20 Rule)
- 20% of the total daily active data generates 80% of read traffic.
- Required RAM = Daily Read Volume * 0.20 * Payload Size * (1 + Memory Overhead Factor, typically 1.25x - 1.5x).

### 4. Distributed Systems & Database Trade-Offs (PACELC Theorem)
- If Partition (P): Trade-off between Availability (A) and Consistency (C).
- Else (E): Trade-off between Latency (L) and Consistency (C).
- Quorum Consistency: R + W > N (where N = replica count, R = read quorum, W = write quorum). Strong consistency requires R + W > N.

## Production Blueprints Catalog

1. URL Shortener (https://systemdesigndraw.com/blueprints/url-shortener)
   - Scale: 100M URLs created/day (1,160 write QPS), 10:1 read-to-write ratio (11,600 read QPS).
   - Core components: API Gateway, Key Generation Service (pre-generates unique 7-char Base62 tokens), Redis Cache (LRU eviction), Relational DB with UUID sharding.

2. API Rate Limiter (https://systemdesigndraw.com/blueprints/rate-limiter)
   - Scale: 50,000 requests/sec, < 5ms evaluation overhead.
   - Algorithms: Token Bucket (burst-tolerant), Sliding Window Counter (sub-second precision using Redis Sorted Sets with ZREMRANGEBYSCORE and ZADD in atomic Lua scripts).

3. Video Streaming (https://systemdesigndraw.com/blueprints/netflix-streaming)
   - Scale: 200M concurrent streams, multi-terabit edge bandwidth.
   - Core components: S3 source bucket, Distributed Transcoder worker pool (DASH / HLS chunking), Edge CDN Points of Presence (POPs), Metadata DB (Cassandra for fast catalog reads).

4. Real-Time Geospatial Dispatch (https://systemdesigndraw.com/blueprints/uber-dispatch)
   - Scale: 1M active drivers sending GPS coordinates every 4 seconds (250,000 ingestion QPS).
   - Core components: WebSocket Connection Gateways, Uber H3 Hexagonal Spatial Index (Resolution 8 ~460m radius), Location Ingestion Kafka Topic, In-memory Redis Ring Buffer, Geospatial Dispatch & ETA Matching Engine.

5. Financial Ledger & Payments (https://systemdesigndraw.com/blueprints/stripe-payments)
   - Scale: Strict ACID compliance, zero tolerance for double-charge or lost debit.
   - Core components: Idempotency Key Validator, Distributed Lock Manager (Redis Redlock), Stripe/Banking Gateway Adapters, Double-Entry Accounting Ledger (Immutable debit/credit pairs with running balance constraint), Asynchronous Webhook Dispatcher.

6. Real-Time Collaborative Canvas (https://systemdesigndraw.com/blueprints/collaborative-canvas)
   - Scale: 50 simultaneous active cursors per canvas, sub-50ms sync latency.
   - Core components: WebSocket Edge Terminating Gateways, Conflict-Free Replicated Data Types (CRDT / Yjs) state model, Redis Pub/Sub room bus, S3 Snapshot & Vector persistence engine.

7. Social Feed & Timeline (https://systemdesigndraw.com/blueprints/twitter-feed)
   - Scale: 500M daily active users, 50,000 tweets/second peak, 300,000 timeline reads/sec.
   - Core components: Hybrid Fanout Engine (Fanout-on-write for standard users with < 25k followers; Fanout-on-read for celebrity accounts > 100k followers to avoid 100M write spikes), Redis Timeline In-memory Cache, User Graph Store (FlockDB/Neo4j).

8. Distributed File Sync (https://systemdesigndraw.com/blueprints/dropbox-sync)
   - Scale: 1B registered accounts, exabyte storage footprint.
   - Core components: Client File Watcher & Chunk Engine (4MB chunking with Rabin fingerprinting / SHA-256 Content-Addressable Storage CAS), Metadata Sync Server, Block Storage Engine (AWS S3 / Cloudflare R2), Long-polling / WebSocket Notification Service.

9. Root Cause Analysis Flowchart (https://systemdesigndraw.com/blueprints/root-cause-analysis)
   - Framework: 7-step RCA incident postmortem workflow (Identify Problem -> Gather Data -> Analyze Data -> Identify Root Cause -> Develop Solutions -> Implement Solutions -> Monitor Result).
   - Methodologies: Toyota 5 Whys, Ishikawa Fishbone analysis, Blameless Postmortem culture, MTTR/MTTD metrics.

## Spanish Visual Diagramming & Templates

- Cuadro Comparativo: https://systemdesigndraw.com/es/cuadro-comparativo
- Diagrama de Flujo: https://systemdesigndraw.com/es/diagrama-de-flujo
- Diagrama de Venn: https://systemdesigndraw.com/es/diagrama-de-venn
- Matriz FODA: https://systemdesigndraw.com/es/matriz-foda
- Mapas Mentales: https://systemdesigndraw.com/es/mapas-mentales
- Catálogo de Ejemplos: https://systemdesigndraw.com/es/ejemplos
- Guía Rápida: https://systemdesigndraw.com/es/cheatsheet