Click a rack to edit · click two racks to wire a cable · drag nodes to reposition
core
cust→rack
⚠sat
Three quick options: start with a pre-built topology, drop in your first rack, or read the help first.
This is a companion app for the Steam game Data Center. Plan your servers, switches, racks, cables and tenants here before building them in-game.
Everything you'd want global access to lives along the top:
| Button | What it does |
|---|---|
autosaved pill | Status indicator — flashes green every time your work is silently saved. |
| ↶ Undo / ↷ Redo | Reverses any state change. Disabled when there's nothing to undo. Shortcut: Ctrl+Z / Ctrl+Shift+Z. |
| ? Help | Opens this help. Also bound to ?. |
| ▭ Templates | Drop a pre-built topology onto the canvas. Replaces the current plan after a confirm. |
| ↻ Share | Encodes the whole plan into a URL and copies it to your clipboard. Send the link to a friend — they'll be prompted to load it. |
| ↓ Save | Download the plan as a JSON file. Shortcut: Ctrl+S. |
| ↑ Load | Pick a saved JSON file to restore. Shortcut: Ctrl+O. |
The center area is a single SVG canvas showing your entire topology. Everything on it is draggable.
throughput / uplink in Gbps.CORE badge in the top-right.⚠ appears next to the link count.The right panel shows context for whatever is selected, plus persistent sections beneath.
Both side panels are collapsible — click the ◀ / ▶ in the panel header. Sections are individually collapsible too — click the section header.
The left panel hosts the tools you reach for while building:
Mark a rack as core via the checkbox in the rack editor. The first time you mark any rack as core, the app stops using CORE_UPLINK_GBPS as a hard-coded ceiling and instead computes it dynamically:
If no racks are marked core, the constant from the Constants section is used as a fallback. This means you can either:
Each rack has an optional uplink override input (in the rack editor). Leave it blank to inherit the global Rack Uplink constant. Set a number to give that one rack its own ceiling — useful when most racks have the same uplink but a few are special (e.g., a 100G hot rack in a 40G field).
The Network Summary shows throughput / effective uplink per rack and flags saturation. Topology nodes turn red and show ⚠ when this is exceeded.
Three ways to add cables:
Bandwidth = min(fromPorts, toPorts) × min(fromSpeed, toSpeed). Switch A's 10G RJ45 ports are fixed; SFP / QSFP ports take whatever module you assign in the switch's port grid (click any port square in the rack editor).
Customers represent tenants. Each has:
Click + Add Customer in the left panel to reuse an empty customer or create a new one. Click any customer in the list to open their editor in the right panel and a draggable pill node on the canvas.
All formulas use the constants in the right panel. Defaults match the Steam game's baseline:
| Quantity | Formula |
|---|---|
| Servers | CEILING(IOPS / SERVER_IOPS_CAP) |
| Racks | CEILING(servers / RACK_DENSITY) |
| Switches | racks × 2 (1 access + 1 distribution per rack) |
| Theoretical throughput | servers × SERVER_THROUGHPUT_GBPS |
| Effective throughput | MIN(theoretical, core capacity) |
| Rack saturation (per rack) | actual throughput > effective uplink |
The What Breaks First chart finds the IOPS level where rack or core uplinks saturate — whichever comes first.
| Key | Action |
|---|---|
| ? | Toggle this help |
| Esc | Close modal / cancel cable-connect / deselect |
| Del | Delete the selected rack or customer |
| Ctrl+Z | Undo |
| Ctrl+Shift+Z | Redo (also Ctrl+Y) |
| Ctrl+S | Save plan as JSON |
| Ctrl+O | Open Load file picker |
| Item | Spec |
|---|---|
| Rack | 19" 47U, 800×800mm |
| Server — 7U | 12,000 IOPS, 0.3 Gbps, 2× 1G RJ45 |
| Server — 3U | 5,000 IOPS, 0.3 Gbps, 2× 1G RJ45 |
| Switch A (1U) | 16× 10G RJ45, fixed |
| Switch B (1U) | 4× SFP+/SFP28 |
| Switch C (1U) | 32× QSFP+ |
| Switch D (1U) | 4× QSFP+ & 16× SFP+/SFP28 |
| PP RJ45 (2U) | 18× RJ45 |
| PP Combo (2U) | 10× RJ45 + 8× Fiber |
| PP Fiber (2U) | 18× Fiber (≤ 100 Gbps) |
| SFP modules | SFP+ RJ45 (10G), SFP+ Fiber (10G), SFP28 (25G) |
| QSFP+ modules | 40G, 100G, 200G, 400G, 800G, 1.6T, 3.2T, 6.4T |
Save writes a JSON file containing constants, the current IOPS target, all racks (items + port configs + isCore + uplink), all cables, both sets of node positions, and your customers.
Load reads that JSON back — everything is sanitized: unknown item types are rejected, IDs must match [a-z0-9-], colors must be hex, positions are clamped to 0–9999. Loading an older save without customerPositions or isCore/uplink still works; defaults fill in.
version field isn't 1.Every change is silently autosaved to your browser's local storage. Refreshing the page restores the plan automatically. The pill in the top-left of the header flashes green each time autosave runs.
Undo / Redo — the ↶ and ↷ buttons (or Ctrl+Z / Ctrl+Shift+Z) reverse any state-mutating action: adding/removing racks, items, cables, customers, renames, color changes, even drag-to-move. History holds the last 50 actions.
The ↻ Share button encodes your entire plan into the URL and copies it to your clipboard. Anyone you give that URL to will be prompted to load your plan when they open it.
Share URLs are base64-encoded JSON in the #hash portion of the URL. Nothing is sent to a server — everything stays in the link itself.
The Validation section in the right panel automatically scans your build for common mistakes and lists them by severity:
Each row has a go button that selects the rack or customer the issue refers to.