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
• Edit patch panel-specific properties:
  • Copper or fiber optic medium
  • Number of ports
  • Port identification
• 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

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:

{
  "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 records also include medium, port count, and port identification 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.