# Datacenter Modeler

Datacenter Modeler is a React-based web application for designing datacenter rack and cabinet layouts with drag-and-drop equipment placement. Users can build rack diagrams, edit component metadata, export reports, and save/load layouts as JSON.

# Written by Matthew Puckett
# https://www.theblindengineer.com

## Features

- Drag racks and cabinets onto the workspace
- Limit each diagram to 10 racks/cabinets
- Choose rack/cabinet height from 2U to 42U
- Drag equipment into racks with U-position snapping
- Prevent overlapping equipment placements
- Edit rack/cabinet properties:
  - Name
  - Type
  - Rack units
  - Manufacturer
  - Model
  - Location
  - Notes
- Edit equipment properties:
  - Name
  - Size in rack units
  - Start U position
  - Manufacturer
  - Model
  - Serial number
  - Asset tag
  - Power watts
  - Notes
- Edit patch panel-specific properties:
  - Copper or fiber optic medium
  - Number of ports
  - Dynamic port map with Port ID and Cable ID fields
- Edit component port-map properties for Switch, Firewall, Storage Switch, Router, Server, Blade Chassis, Storage Array, and KVM:
  - Dynamic port map with Port ID, Cable ID, and VLAN fields
  - VLAN defaults to 1 for new component ports
- Edit PDU-specific properties:
  - Horizontal rack mount or vertical side mount
  - Horizontal size from 1U to 12U
  - Vertical width from 1U to 3U
  - Left or right side placement for vertical PDUs
  - Input voltage
  - Dynamic output ports with per-port voltage and amperage
  - Managed PDU status
  - IP address/hostname, URL, and user for managed PDUs
- Save diagrams as JSON
- Load previously saved JSON diagrams
- Browser autosave with `localStorage`
- Export rack layouts as PNG or JPG
- Export a PDF report with the diagram and rack inventory
- Dark/light theme selector
- Material UI-based interface
- Welcome dialog with an optional Cash App donation link

## Component Library

The left-side palette includes:

- Rack
- Cabinet
- Switch
- Router
- Firewall
- Server (Rack)
- Blade Chassis
- Storage Array
- Storage Switch
- Patch Panel
- PDU
- Cable Management
- KVM
- KVM (Console)

## Tech Stack

- Node.js
- React
- TypeScript
- Vite
- Material UI
- html2canvas
- jsPDF

## Getting Started

Install dependencies:

```bash
npm install
```

Start the development server:

```bash
npm run dev
```

Vite will print the local URL, usually:

```text
http://localhost:5173/
```

If that port is already in use, run:

```bash
npm run dev -- --port 5174
```

## Build

Create a production build:

```bash
npm run build
```

Preview the production build:

```bash
npm run preview
```

## Usage

1. Drag a Rack or Cabinet from the component library into the workspace.
2. Choose the rack/cabinet size in the dialog.
3. Drag equipment from the library into a rack/cabinet.
4. Select racks or equipment to edit properties in the right panel.
5. Use Save JSON to download the diagram data.
6. Use Load JSON to continue editing a previously saved diagram.
7. Use Export to generate a PDF report, PNG, or JPG.

## Data Model

Diagram data is stored as JSON with this top-level shape:

```json
{
  "appName": "Datacenter Modeler",
  "schemaVersion": 1,
  "name": "Untitled Datacenter Layout",
  "createdAt": "2026-05-14T00:00:00.000Z",
  "updatedAt": "2026-05-14T00:00:00.000Z",
  "racks": []
}
```

Each rack/cabinet contains its own metadata and an array of installed equipment. Equipment records include type, name, size, U position, manufacturer/model details, asset information, power, notes, and display color. Patch panel and network-capable component records also include structured port map metadata. PDU records include mounting orientation, side placement for vertical PDUs, input voltage, output port definitions, and managed-device connection metadata.

## Project Structure

```text
.
├── index.html
├── package.json
├── src
│   ├── App.tsx
│   ├── data
│   │   └── componentLibrary.ts
│   ├── main.tsx
│   ├── styles.css
│   ├── types.ts
│   └── utils
│       └── model.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
```

## Notes

- Layouts are automatically persisted in the browser using `localStorage`.
- JSON export is the portable save format for moving diagrams between browsers or computers.
- PDF and image exports are generated from the rendered workspace.
- The current implementation is client-side only; no backend server or database is required.
- Donations are optional and use the Cash App link for `$MatthewPuckett`.