SystemGrid - System design flow simulator

SystemGrid is a canvas for sketching system designs: drag in blocks (gateways, databases, caches, and the usual suspects), wire them up, and run a basic traffic simulation to see load move through the graph.

You can tune request rate, watch edges and nodes update, and open interview scenarios that drop in a starter diagram with notes on how the setup is meant to be read.

SystemGrid system design flow simulator

Features

  • React Flow canvas with predefined infra blocks and custom labels
  • Load simulation with adjustable client request rate and logs
  • Interview scenarios with example topologies
  • Dark and light theme

Tech Stack

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • React Flow
  • Zustand