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.

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

Component Library

The left-side palette includes:

Rack
Cabinet
Switch
Router
Firewall
Server (Rack)
Blade Chassis
Storage Array
Storage Switch
Patch Panel
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.

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.

3.3 KiB Raw Blame History