A pure-frontend, zero-backend web application for visualizing network topology, auditing VLANs, mapping ARP tables, and analyzing routes — all from pasted device logs, directly in the browser.
- Overview
- Features
- Technology Stack
- Project Structure
- Installation & Deployment
- Usage Guide
- Configuration
- Architecture
- Data Flow
- Export Options
- License
Network Admin Suite — Topo LLDP Viewer is a client-side-only network engineering toolset that requires no backend, no package installation, and no external API keys. Simply open the HTML in a browser, paste your device outputs, and instantly get interactive topology maps, VLAN audits, ARP-to-MAC-to-IP mappings, and route trace visualizations.
All parsing, visualization, and export logic runs entirely in the browser. Data is persisted transiently via localStorage with an 8-hour expiry to support workflow continuity without a server.
- Multi-vendor LLDP/OSPF parsing — supports Juniper, Cisco, Fortinet output formats
- Device auto-categorization — identifies firewalls, switches, servers, Windows hosts, and endpoints via configurable regex rules
- SVG-based device icons — distinct visual icons per device category
- Interactive force-directed & hierarchical layouts — ForceAtlas2, hierarchical (BFS), and static/manual drag modes
- Persistent node positions — layout saved to
localStorage, restored on reload - Port style mapping — OOB, L4, AGGREGATE, VLAN, HIGHSPEED, DEFAULT port styles with distinct edge visuals
- Layer slider — BFS-based layer selection for scoped topology views
- Export selected nodes/edges — copy compact JSON to clipboard
- Double-click recursive selection — select and copy entire sub-topologies
- Paste and parse switch config, VLAN table, MAC address table, ARP table, and topology data
- Real-time analysis result with node count and status badge
- OUI vendor detection — MAC prefix lookup via bundled
silverwind.oui-data.json(cached 24 hours) - Excel, CSV, and JSON export — auto column width, UTF-8 BOM for Excel compatibility
- LocalStorage-based data persistence with 8-hour expiry
- CIDR parsing and longest prefix match (LPM)
- Recursive path tracing with ECMP (Equal-Cost Multi-Path) support
- Gateway and connected-route detection
- Visual highlight of traced paths on the vis.js topology
- Persistent route cache
- Parse nested ARP JSON from multiple devices
- Maps MAC → IP → Vendor (via OUI)
- Integrated with VLAN Auditor for enriched reporting
| Category | Technology |
|---|---|
| Core Language | JavaScript ES6+ (Vanilla, no framework) |
| Styling | Tailwind CSS v3.4.17, DaisyUI |
| Network Visualization | vis-network v10.0.2 (vis.js) |
| Excel Export | SheetJS / xlsx v0.18.5 |
| Icons | FontAwesome 6.4.0, Material Symbols |
| Data Persistence | Browser localStorage |
| Build Tool | Tailwind CSS CLI (for output.css) |
| Deployment | Static files — no server required |
.
├── index.html # Landing page / tool selector
├── topo-lldp.html # LLDP Topology Viewer
├── vlan.html # VLAN Auditor
├── arp.html # ARP Mapper
├── route-analyzer.html # Route Analyzer
├── label.html # Label utility page
├── table.html # Table utility page
├── coll.html # Collapsed view
├── testReport.html # Test report page
├── favicon.svg # Site favicon
├── package.json # Build scripts (Tailwind)
├── tailwind.config.js # Tailwind theme configuration
│
├── js/
│ ├── topo-lldp.js # Core topology viewer logic
│ ├── vlan.js # VLAN auditor logic (VlanAuditor class)
│ ├── route-analyzer.js # Route analyzer (NetworkAnalyzer class)
│ ├── Edge.js # Custom vis.js edge label rendering
│ ├── sample.json # Sample node/edge data
│ ├── sample2.json # Additional sample data
│ ├── sample_Extended.json # Extended sample data
│ ├── silverwind.oui-data.json# MAC OUI vendor database
│ ├── vis-network.min.js # vis.js network library (bundled)
│ ├── vis.js / vis.min.js # vis.js full library
│ ├── tailwindcss.3.4.17.js # Tailwind CSS runtime
│ └── font-awesome.6.4.0.all.min.js
│
├── css/
│ ├── input.css # Tailwind source CSS
│ ├── output.css # Compiled Tailwind CSS
│ ├── vis-network.min.css # vis.js network styles
│ ├── vis.css / vis.min.css # vis.js full styles
│
├── docs/
│ ├── readme.md # Internal documentation
│ ├── topo-lldp.md # Topology viewer design notes
│ ├── vlan.md # VLAN auditor design notes
│ ├── route-analyzer.md # Route analyzer design notes
│ ├── REQUIREMENTS.md # Feature requirements
│ └── cicd-requirements.md # CI/CD pipeline specification
│
└── .opencode/
└── skills/
├── frontend-design/SKILL.md # Frontend design guidelines
└── replicate/SKILL.md # AI model integration docs
This project requires no build step and no package manager for regular use.
# Clone the repository
git clone https://github.com/<your-org>/sinnoken-topo-lldp.git
cd sinnoken-topo-lldp
# Simply open in a browser
open index.html # macOS
start index.html # Windows
xdg-open index.html # LinuxDeploy the entire project directory to any static file host:
| Platform | Command / Method |
|---|---|
| GitHub Pages | Push to gh-pages branch or configure Pages in repo settings |
| AWS S3 | aws s3 sync . s3://your-bucket --acl public-read |
| Vercel | vercel deploy |
| Nginx/Apache | Copy files to web root (/var/www/html/) |
Only needed if you modify css/input.css or tailwind.config.js:
npm install
npm run build # Compiles Tailwind → css/output.css- Open
topo-lldp.html - Paste your LLDP neighbor output or topology JSON into the Data Editor panel
- Optionally paste additional enrichment data (VLANs, labels) into the Additional Data panel
- The network topology will auto-render with device icons, port styles, and edge labels
- Use the layout toggle to switch between Static, Hierarchical, and Physics modes
- Drag nodes to position manually; positions are auto-saved
- Use the Layer Slider to isolate network layers (BFS depth)
- Double-click a node to recursively select it and its neighbors
- Click Copy Selected to export the selection as compact JSON
- Open
vlan.html - Paste the following into their respective editors:
- Switch running config
- VLAN table output
- MAC address table
- ARP table (JSON or text)
- Topology data
- The tool auto-parses all inputs and generates a unified result
- Export results via Excel, CSV, or JSON buttons
- Open
route-analyzer.html - Provide node/edge data representing your routed topology
- Select a source and destination node
- The analyzer performs LPM + ECMP path tracing and highlights the path graph
- View per-hop route tables and log cards
Devices are identified via CONFIG.GROUP_RULES — a list of regex patterns mapped to device groups:
CONFIG.GROUP_RULES = [
{ pattern: /firewall|fortigate|palo|asa/i, group: 'firewall' },
{ pattern: /switch|sw|catalyst/i, group: 'switch' },
{ pattern: /windows|win|desktop/i, group: 'windows' },
// Add custom rules here
];CONFIG.PORT_STYLES = {
OOB: { color: '#888', dashes: true },
L4: { color: '#4ade80' },
AGGREGATE: { color: '#facc15', width: 3 },
VLAN: { color: '#60a5fa' },
HIGHSPEED: { color: '#f97316', width: 3 },
DEFAULT: { color: '#94a3b8' }
};| Variable | Default | Description |
|---|---|---|
IS_DEBUG |
false |
Enable test mode with sample data |
TEST_DATA_URL |
'' |
Path to external test data JS file |
| Key | Expiry | Purpose |
|---|---|---|
networkNodesPosition |
8 hours | Saved node positions |
networkTopologyData |
8 hours | Cached topology JSON |
networkArpMap |
8 hours | ARP MAC→IP mapping |
storageExpiry |
8 hours | Expiry timestamp |
vlan_auditor_oui_cache |
24 hours | OUI vendor database cache |
┌──────────────────────────────────────────────────────────┐
│ Browser (Client) │
│ │
│ ┌────────────┐ ┌────────────┐ ┌────────────────────┐ │
│ │ topo-lldp │ │ vlan.js │ │ route-analyzer.js │ │
│ │ .js │ │(VlanAudit- │ │(NetworkAnalyzer │ │
│ │ │ │ or class) │ │ class) │ │
│ └─────┬──────┘ └─────┬──────┘ └──────────┬─────────┘ │
│ │ │ │ │
│ └───────────────┼─────────────────────┘ │
│ │ │
│ ┌─────────▼──────────┐ │
│ │ vis-network.js │ ← Force / Hierarchical│
│ │ (Network Graph) │ / Static layouts │
│ └─────────┬──────────┘ │
│ │ │
│ ┌─────────▼──────────┐ │
│ │ localStorage │ ← Positions, Cache │
│ └────────────────────┘ │
│ │
│ ┌────────────────────┐ │
│ │ SheetJS (xlsx) │ ← Excel/CSV Export │
│ └────────────────────┘ │
└──────────────────────────────────────────────────────────┘
| Module / Class | File | Responsibility |
|---|---|---|
initApp() |
topo-lldp.js |
Bootstrap topology viewer, bind events |
convertLldpToJson() |
topo-lldp.js |
Parse raw LLDP/OSPF text → JSON |
applyDataUpdate() |
topo-lldp.js |
Merge new nodes/edges into vis.js datasets |
identifyDeviceCategory() |
topo-lldp.js |
Regex-based device classification |
VlanAuditor |
vlan.js |
ARP parsing, OUI lookup, vendor mapping |
NetworkAnalyzer |
route-analyzer.js |
Route tracing, LPM, ECMP, path highlight |
Edge.js |
Edge.js |
Override vis.js edge label rendering |
User Pastes Device Output
│
▼
Regex / JSON Parsing
(convertLldpToJson / VlanAuditor.parseArpData)
│
▼
Normalization & Deduplication
(node/edge ID dedup, MAC cleaning, port matching)
│
▼
OUI Lookup (MAC → Vendor via silverwind.oui-data.json)
│
▼
vis.js DataSet (nodes + edges)
│
▼
vis-network Rendering (force / hierarchical / static)
│
▼
User Interaction (drag, zoom, search, select)
│
▼
Export (PNG / CSV / XLSX / JSON clipboard)
| Format | Tool(s) | Notes |
|---|---|---|
| PNG | Topology Viewer | Exports current canvas view |
| JSON | Topology Viewer, VLAN | Compact format, clipboard or download |
| CSV | VLAN Auditor | UTF-8 BOM for Excel compatibility |
| Excel | VLAN Auditor | Auto column width, requires SheetJS CDN load |
© 2026 Network Admin Suite. Open Source — MIT License.
This project is provided as-is for network engineers and NOC operators. Contributions, bug reports, and feature requests are welcome via GitHub Issues and Pull Requests.