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:

npm install

Start the development server:

npm run dev

Vite will print the local URL, usually:

http://localhost:5173/

If that port is already in use, run:

npm run dev -- --port 5174

Build

Create a production build:

npm run build

Preview the production build:

npm run preview

Usage

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

Data Model

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

{
  "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

.
├── 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.

4.5 KiB Raw Blame History