Nerd Cave
Overview
NetGlu is a self-hosted, browser-based network diagramming and documentation tool built entirely from scratch in PHP, HTML, CSS, and vanilla JavaScript. It's designed for network technicians who need to quickly map, document, and print network topologies without depending on cloud services or expensive software.
Canvas & Diagramming
The core of the app is an infinite-scroll canvas with ruler guides, zoom controls, and a dot-grid background. Devices are rendered as draggable cards, each with a typed icon, configurable ports, and live wire connections drawn as SVG paths between ports. Connections support both local (device-to-device) and free-label wiring.
The canvas supports:
- Multi-page diagrams — tabbed pages for separating floors, buildings, or network segments
- Zoom — step-based zoom with a numeric input, reset, and home button
- Rulers — horizontal and vertical rulers with live cursor crosshairs
- Labels — free-floating text annotations placeable anywhere on the canvas
- Full undo/redo — 50-level deep-clone stack covering all mutating operations
- Clipboard — cut, copy, and paste with stacked-offset repeat paste; internal connections between copied devices are preserved and re-wired to new IDs automatically
Device Types
NetGlu ships with a full set of typed network devices, each with its own color scheme applied dynamically via PHP-generated CSS:
- Switch, Router, Firewall, Access Point
- Server / NAS, Workstation, Printer, Camera
- Patch Panel, Generic Device
Each device card shows the device name, type icon, IP address, and its list of named ports with connection state indicators.
Scan Import
A standout feature: NetGlu can ingest real scan output and convert discovered hosts directly into diagram devices. Three formats are supported:
- Angry IP Scanner —
.txtexport - Advanced IP Scanner —
.htmlexport - Nmap —
.txtoutput (any scan type)
Imported hosts appear in a staging panel where you can filter by alive/all, inspect open ports and services, and selectively promote hosts to canvas devices — skipping the tedious manual entry of every device on the network.
Field Entry
A clipboard-style notepad panel for capturing device details on-site before committing them to the diagram — useful when doing a physical walk-through of a network before building the map.
Save, Export & Print
Topologies are saved as JSON files on the server. The print system generates a clean SVG map or a structured device list, with options for portrait/landscape orientation and three scale settings (fit, 75%, 50%). Export is also available for sharing or archiving diagrams outside the app.
Architecture
The application is structured as a modular vanilla JS codebase — 14 focused JS modules covering core state, rendering, devices, connections, pages, labels, geometry, UI, import, print, files, and rulers. PHP handles server-side file I/O, device type configuration, and dynamic CSS generation. No frameworks, no build step, no dependencies beyond Tabler Icons and the JetBrains Mono and Inter fonts.
