The ultimate interactive tool to learn, practice, and ace System Design Interviews.
System design interviews are notoriously difficult. Most candidates fail because they don't understand the trade-offs or can't visualize the architecture under different constraints (DAU, latency, read/write ratios).
System Design Visualizer solves this by providing an interactive learning environment where you can dynamically build, test, and justify your architectural decisions.
- 🏗️ Scenario Builder: Generate intelligent architectures based on user-defined constraints (DAU, consistency, workloads).
- 🧠 Interview Mode Simulator: A 4-phase mock interview (Requirements, High-Level Design, Deep Dive, Trade-offs) complete with an auto-grading Report Card.
- 📚 14 Core Concepts & Case Studies: Learn the fundamentals (Caching, Load Balancing) and explore real-world architectures (Netflix, Spotify, Dropbox).
- 🌍 Community Gallery: Browse, upvote, and remix architectures submitted by other engineers.
- 📸 Export & Share: Export your architectures to High-Res PNG/SVG or share them via a unique URL.
- ⚡ Lightning Fast: Built on Vite, React, React Flow, and Zustand. No backend required!
To get a local copy up and running follow these simple example steps.
- Node.js (v18 or higher)
- npm or yarn
- Clone the repo ```sh git clone https://github.com/your-username/system-design-visualizer.git ```
- Install NPM packages ```sh cd system-design-visualizer npm install ```
- Start the development server ```sh npm run dev ```
- Open your browser and navigate to `http://localhost:5173\`
- Frontend Framework: React 18
- Build Tool: Vite
- Language: TypeScript
- Styling: Tailwind CSS
- Diagramming: React Flow
- Icons: Lucide React
- SEO & Routing: React Router v6, React Helmet Async
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
Please see the CONTRIBUTING.md for details on how to add new concepts, case studies, or features.
Distributed under the MIT License. See `LICENSE` for more information.
If you found this tool helpful in your interview prep, please give it a ⭐️ on GitHub! It helps others discover the project.