System Design Playground

A powerful, interactive, and beautifully designed canvas for visualizing system architectures. Built with React and Vite, this tool allows you to drag, drop, and connect components to create professional-grade system diagrams directly in your browser.

✨ Features

• Interactive Canvas: Infinite pan and zoom capabilities for complex diagrams.
• Extensive Component Library: Includes 100+ pre-built icons for:
  • Cloud Infrastructure (AWS, Azure, GCP icons)
  • Databases & Storage (SQL, NoSQL, File Storage)
  • Networking (Load Balancers, CDNs, Firewalls)
  • DevOps & Tools (Docker, K8s, Git)
• Custom Components: Create your own reusable components with a visual icon selector.
• Smart Connections: Smooth, bezier curve connections that automatically snap to node edges.
• Modern UI: Sleek, dark-themed interface with card-based property panels and a clean aesthetic.
• Properties Editor: detailed sidebar for editing node and connection metadata.

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/yourusername/system-design-playground.git
   cd system-design-playground

2. Install dependencies

   npm install
   # or
   yarn install

3. Run the development server

   npm run dev
   # or
   yarn dev

4. Open your browser and navigate to http://localhost:5173.

🛠️ Built With

• React 19: The library for web and native user interfaces.
• Vite: Next Generation Frontend Tooling.
• Lucide React: Beautiful & consistent icons.
• CSS Variables: For a consistent, customizable theme system.

🎨 Controls

• Drag & Drop: Drag components from the sidebar onto the canvas.
• Connect: Click on a node's handle (dot) and drag to another node to create a connection.
• Select: Click on a node or connection to view its properties.
• Delete: Select an item and press Delete or Backspace.
• Pan: Click and drag on an empty area of the canvas.
• Zoom: Use the scroll wheel to zoom in and out.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is open source and available under the MIT License.