System Design Simulator

An interactive, browser-based system design simulator. Drag components onto a canvas, wire them together, and run a live simulation driven by real queueing theory (M/M/c, Erlang-C, Little's Law). Inject traffic spikes and crash components to find the bottleneck and the single points of failure — a hands-on way to practise for system design interviews and capacity planning.

• ~85 components — load balancers, API gateways (incl. Apigee), servers, containers, caches, SQL/NoSQL, object & block storage, Kafka-style streams, pub/sub, CDNs, DNS, firewalls/WAFs, VPC / subnet / availability-zone containers, text-note annotations, plus AWS / GCP / Azure equivalents.
• Beginner-friendly — a first-run guided tour, plain-English explanations on every component and setting, a Learn tab of concept explainers, and a Template gallery from a simple 3-tier app up to production-grade ride-sharing, collaborative-docs and battle-royale backends.
• No backend, no framework, no dependencies. Static HTML/CSS/JS. Designs are saved in your browser (localStorage autosave + JSON export/import).
• Mobile — installable as a PWA today; Capacitor-ready for Android / iOS (see MOBILE.md).

Run it

The app uses native ES modules, so serve the folder (opening index.html via file:// won't work):

python3 -m http.server 8080      # or: npx serve .
# then open http://localhost:8080

Build & test

No build step is needed for local dev or static hosting. To produce a bundled, deployable dist/ (also what Capacitor wraps):

npm install        # only for the Capacitor tooling
npm run build      # -> dist/  (bundled JS + CSS + PWA files)
npm run serve      # serve dist/
npm test           # queueing-math + engine tests

Deploy

It's a static site — drop the folder (or dist/) on GitHub Pages, Netlify, Vercel or Cloudflare Pages. No build command required.

Project structure

index.html / styles.css              Page shell + styling
manifest.webmanifest / sw.js / icons/  PWA (install + offline)
capacitor.config.json / MOBILE.md      Android / iOS wrapper
src/
  componentDefs.js   Every draggable component (role, defaults, blurb/why, field hints)
  badge.js           Original inline-SVG component icons
  queueMath.js       Pure queueing-theory functions (Erlang C, M/M/c, token bucket)
  engine.js          Topological graph walk + per-tick simulation
  state.js           Tiny observable store
  canvas.js          Node/edge editor: drag, connect, pan/zoom, particles, zones, notes
  palette.js         Left component palette
  inspector.js       Right panel: configure the selected component
  learn.js           "Learn" tab concept explainers
  metrics.js         "Metrics" tab: global stats + sparklines + per-node table
  templates.js       Template-gallery modal
  onboarding.js      First-run welcome + guided tour
  toolbar.js         Run / spike / reset / import / export / clear
  persistence.js     localStorage autosave + JSON import/export
  scenarios.js       Ready-made architectures
  main.js            Wires it together + the simulation loop
test/
  queueMath.test.mjs / engine.test.mjs   Run with `npm test`

How the simulation works

Every tick (5×/second), the engine topologically sorts the graph and propagates the request rate through each component using role-specific math:

• resource (servers, functions, databases, storage, search): an M/M/c queue — utilization and p50/p95/p99 latency come from Erlang-C, not guesswork.
• splitter (load balancers): splits traffic evenly across live targets; crash one backend and the survivors absorb 100%.
• gateway / ratelimiter / firewall: token-bucket limiting (+ a filtered fraction for firewalls).
• cache: hit-rate split — misses fall through downstream.
• queue (Kafka/SQS/PubSub/…): producer/consumer backlog that grows under sustained overload, capped at a max backlog.
• cdn: offloads a configurable fraction at the edge.
• passive (DNS, NAT, gateways): pass-through + fixed latency, still crashable.
• zone / note: pure diagram decoration, excluded from all metrics.

It's a quasi-steady-state approximation recomputed continuously, so ⚡ Spike and the ⏻ crash toggle flow through the same math — an overloaded node genuinely shows rising latency, and a crashed load balancer genuinely cuts off everything behind it.

Extending it

• Components → src/componentDefs.js: pick a role (source, splitter, gateway, ratelimiter, resource, cache, queue, cdn, passive, firewall, zone, note), add blurb / why / field hints. New source files must be added to ORDER in build-bundle.cjs.
• Concept explainers → src/learn.js. Templates → src/scenarios.js (they appear in the gallery automatically).
• Icons are original inline SVG, not cloud-provider logos, so the project stays freely shareable.