NetVis

Phase 41 complete; ready for Phase 41.1 (Performance & Scale Foundation)

← Back to Network Automation

Concept

Network visualization often fails at scale because layout algorithms treat all nodes and edges equally, producing cluttered “hairball” diagrams. The Network Visualization Engine treats topologies as hierarchical structures and uses domain-aware layout constraints—including isometric views and edge bundling—to reflect engineering intent.

Quick Facts

What This Is

A Rust-based network topology layout and visualization engine that transforms complex multi-layer networks into clear, information-dense renderings. Advanced layout algorithms minimize visual complexity while preserving structural clarity.

Key Features

• Advanced Layout Algorithms:
  • Force-directed layout with configurable parameters
  • Hierarchical layout for tree-like topologies
  • Geographic layout for physical infrastructure
  • Edge bundling to reduce visual clutter
• Multi-Layer Support: Visualize L2, L3, and logical layers simultaneously
• Static Output Formats: SVG, PDF, PNG (v1 focus)
• High-Quality Rendering: Anti-aliased, publication-ready graphics
• Topology Awareness: Uses petgraph for graph analysis

Example: Quick Start

Input topology (simple-network.yaml):

nodes:
  - name: r1
    type: router
  - name: r2
    type: router
  - name: s1
    type: switch
  - name: s2
    type: switch
  - name: h1
    type: host
  - name: h2
    type: host

edges:
  - src: r1
    dst: s1
  - src: r1
    dst: s2
  - src: r2
    dst: s1
  - src: r2
    dst: s2
  - src: s1
    dst: h1
  - src: s2
    dst: h2
  - src: s1
    dst: s2

Render with CLI:

$ netvis render simple-network.yaml \
    --layout force-directed \
    --output output.svg \
    --width 800 \
    --height 600

Loaded topology: 6 nodes, 7 edges
Applying force-directed layout...
Layout converged in 245 iterations
Rendering to SVG...
Written: output.svg (6.5 KB)

Integration with the Network Modeling & Configuration Library

Network Modeling & Configuration Library topologies export directly to the Network Visualization Engine format:

# NetVis
topo.export_for_netvis(
    "output.json",
    layout="hierarchical",
    node_metadata=True  # Include device types, roles for styling
)

The Network Visualization Engine reads the exported topology and applies advanced layout algorithms, producing publication-quality diagrams that reflect the logical structure captured in the Network Modeling & Configuration Library.

Example Gallery

Enterprise Campus Network

Multi-building campus with core/distribution/access layers, firewalls, ISP uplinks, data center spine-leaf, and management infrastructure. Edge bundling groups related connections; path analysis overlays highlight application, backup, and management traffic flows.

Data Center Spine-Leaf Fabric

Spine-leaf topology with 4 leaf switches, 2 spines, and 12 racks of hosts. Bandwidth annotations (10G, 25G, 100G) on each link. Force-directed layout separates rack groups while keeping the spine-leaf hierarchy visible.

ISP Backbone with Path Analysis

US-wide ISP backbone spanning 8 cities (LAX, SEA, DEN, DAL, CHI, NYC, BOS, WAS) with core routers, customer edge devices, and IX peering. Path analysis overlay shows primary east-west, backup, and regional paths with distinct colors and weights.

Radial Layout — Distributed Service Mesh

Zone-based service mesh with central controller, regional coordinators, edge nodes, and service endpoints arranged in a radial layout. Demonstrates the engine’s ability to handle hierarchical topologies with many leaf nodes.

Geographic Layout — European Backbone

Geographic layout rendering of a European backbone network. Nodes placed at real-world coordinates with great-circle edge routing. Demonstrates the geographic layout algorithm for infrastructure spanning physical locations.

Isometric Multi-Layer View

Three network layers (WAN, distribution, access) rendered as stacked isometric planes with inter-layer connections visible. Shows how logical structure maps across the network hierarchy.

Theme Showcase — Device-Aware Icons

Device-type-aware rendering with distinct icons for routers, switches, firewalls, servers, and cloud nodes. Bandwidth labels (1G, 10G) on links. Shows the visual fidelity available for smaller, detail-rich diagrams.

Milestones

v1.0 Core Engine (Shipped Jan 31, 2026) Layout algorithms, rendering pipeline, and multi-layer topology support.

• Force-directed, hierarchical, geographic, and radial layout algorithms
• SVG/PDF/PNG rendering with anti-aliased output
• Edge bundling and routing, isometric multi-layer stacking
• Device-aware icons and theming system

v1.0.0 Release Preparation (Shipped Jan 31, 2026) Documentation, CLI guides, and visual polish.

• CLI documentation and topology/config format references
• Device icons and theme improvements, label positioning

v1.1 Network Analysis & Operations (Shipped Feb 3, 2026) Interactive features, Python bindings, and WASM.

• Layout templates and presets, path highlighting and analysis
• Geographic layout algorithm, auto-clustering and community detection
• Python bindings and WASM module, interactive demo site

v1.2 Visual Polish & Production Hardening (Shipped Feb 9, 2026) Accessibility, contrast enforcement, and label quality.

• SVG filter infrastructure with signature-based deduplication
• WCAG 3:1 contrast enforcement and high-contrast theme (AAA 21:1)
• Label collision avoidance, export quality diagnostics

v1.3 Embed Readiness & API Stability (In Progress) Stable API, deterministic rendering, and spatial indexing.

• Deterministic output contracts with golden fixtures
• Spatial indexing foundation, curved edge collision detection
• Stable public API with versioned schemas, structured diagnostics

Roadmap:

• v1.4 Advanced Operations & Interaction — Visual topology diffing, live traffic flow simulation, interactive ARIA-enabled SVG, sub-graph layout composition, multi-page poster export

Tech Stack

Rust, petgraph, fjadra (d3-force port), SVG/PDF/PNG rendering, WASM-ready

← Back to Network Automation