> ## Documentation Index
> Fetch the complete documentation index at: https://docs.codivise.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Architecture Simulator - Visual System Design Playground

> Codivise Architecture Simulator lets you build and simulate system designs in an interactive canvas. Drag components, connect data flows, run live simulations with QPS and latency metrics, test chaos scenarios, and create custom named diagrams. The only platform with a visual system design simulator built for interview prep.

# Architecture Simulator

The **Architecture Simulator** is Codivise's visual system design playground. Build architectures by dragging components, connect them with data flows, run live simulations with real-time metrics, and test chaos scenarios. Create custom named diagrams and save them for later—all in one place. No more switching between Excalidraw and separate tools.

## See It in Action

<video controls className="w-full aspect-video rounded-xl" src="https://codivise.com/system-design-simulator-demo.mp4" poster="https://codivise.com/coding-coach.png">
  Your browser does not support the video tag. Watch the demo at <a href="https://codivise.com">codivise.com</a>.
</video>

## Why the Architecture Simulator

* **Interview-ready** — Practice system design the way it's asked: draw, explain, iterate
* **Live metrics** — See QPS, latency, error rate, cache hit rate, and cost as you simulate
* **Chaos testing** — Toggle traffic spikes, cache misses, and node failures to test resilience
* **Custom diagrams** — Create and name unlimited diagrams. Save and reload anytime
* **Task-linked** — Pick a system design problem (e.g., URL shortener) and build your solution

## Getting Started

1. Go to **Coding Coach** → **System Design Simulator** (route: `/system-design-simulator`)
2. Select a task (e.g., "Design a URL shortener") or **Freeform**
3. Drag components from the right palette onto the canvas
4. Connect components by dragging from output handles (right) to input handles (left)

## Components

| Component     | Description                         |
| ------------- | ----------------------------------- |
| Load Balancer | Distributes traffic across nodes    |
| Cache         | Redis/Memcached-style caching layer |
| Database      | Primary data store                  |
| Queue         | Message queue for async processing  |
| API Server    | Stateless service layer             |
| CDN           | Content delivery at edge            |
| Text          | Label or annotation                 |

## Running a Simulation

1. Build your architecture
2. Click **Run Simulation** in the controls panel
3. Observe metrics: **QPS**, **Latency p95**, **Error rate**, **Cache hit rate**, **Cost**
4. Toggle chaos: **Traffic spike**, **Cache miss**, **Node crash**

## Custom Diagrams

1. Click **New diagram**
2. Enter a name (e.g., "My API architecture")
3. Build and save with **Save** or `Cmd+S` / `Ctrl+S`
4. Load from **Saved diagrams** or the task dropdown (📐 icon)

## Keyboard Shortcuts

* `Cmd+S` / `Ctrl+S` — Save diagram

## Related

* [Coding Coach](/coding-coach) — Algorithms, system design, Mock Coder
* [Platform Overview](/platform-overview) — How Codivise fits together