Preswald | Blog

Tracking network devices and their connections was becoming difficult and time-consuming. Our IT team needed a simple way to visualize network topology without manually drawing diagrams.

We used Preswald to build an automated network topology visualizer that:

✅ Reads device connections from a CSV file
✅ Generates a real-time interactive network map
✅ Makes troubleshooting and optimization easier

The Problem: Manual Network Mapping Wasn't Scalable

Before Preswald, we manually tracked network topology using spreadsheets and static diagrams. This caused issues like:

❌ Difficult troubleshooting – Finding device connections took too long.
❌ Outdated network maps – Changes weren’t reflected in real-time.
❌ No automation – Every update required redrawing the topology manually.

We needed a real-time, interactive, and automated way to visualize our network.

Why We Chose Preswald

Preswald helped us build and deploy an interactive network topology map in minutes:

✅ Reads network data directly from a CSV – No need for manual updates.
✅ Generates a fully interactive network diagram – Clickable nodes and connections.
✅ Quickly deployable – Shareable with the IT team instantly.

The Implementation: Building a Live Network Topology Map

Step 1: Installing Preswald

First, we installed Preswald:

pip install preswald

Step 2: Loading and Displaying Device Data

We stored network device connections in a CSV file, where each row represents a device and the device it’s connected to:

Device Name	Connected To
Router 1	Switch 1
Switch 1	Server 1
Server 1	Workstation 1

We loaded this data using Preswald and displayed it in a table:

import pandas as pd
from preswald import table, text

# Dashboard Title
text("# Network Topology Visualizer")
text("Visualize the topology of a network.")

# Load device connections from CSV
df = pd.read_csv("data.csv")

# Display raw network data
table(df)

✅ Automatically loads device connections – No manual entry needed.

Step 3: Generating a Network Layout

We needed to position devices automatically based on their connections:

# Generate device positions
devices = df["Device Name"].unique()
device_positions = {}
x_offset, y_offset = 0, 1.25  # Initial placement
layer_spacing = 2  # Distance between layers

for i, device in enumerate(devices):
    device_positions[device] = (x_offset, y_offset)
    y_offset -= layer_spacing  # Move devices down
    if i % 3 == 2:  # Create new column every 3 devices
        x_offset += 2
        y_offset = 1  # Reset y for the new column

✅ Devices are automatically positioned – No manual adjustments needed.

Step 4: Drawing the Network Graph

We mapped devices (nodes) and their connections (edges) into an interactive graph:

import plotly.graph_objects as go
from preswald import plotly

# Extract node positions and labels
node_x = [device_positions[device][0] for device in devices]
node_y = [device_positions[device][1] for device in devices]
node_labels = devices

# Create edges (connections)
edges = []
for _, row in df.iterrows():
    from_device, to_device = row["Device Name"], row["Connected To"]
    if to_device in device_positions:
        edges.append((device_positions[from_device], device_positions[to_device]))

# Generate edge coordinates
edge_x, edge_y = [], []
for (x0, y0), (x1, y1) in edges:
    edge_x.extend([x0, x1, None])  # None for breaks
    edge_y.extend([y0, y1, None])

# Create network visualization
fig = go.Figure()

# Add connections (edges)
fig.add_trace(go.Scatter(
    x=edge_x, y=edge_y, line={"width": 1, "color": "gray"},
    mode="lines", hoverinfo="none"
))

# Add devices (nodes)
fig.add_trace(go.Scatter(
    x=node_x, y=node_y, text=node_labels,
    mode="markers+text",
    marker={"size": 18, "color": "#00cccc", "line": {"width": 1, "color": "#006a6a"}},
    textposition="bottom center"
))

# Adjust layout
fig.update_layout(
    title="Network Topology",
    showlegend=False,
    xaxis={"showgrid": False, "zeroline": False},
    yaxis={"showgrid": False, "zeroline": False},
    plot_bgcolor="white",
)

plotly(fig)

✅ Automatically maps device relationships – No manual diagramming.

Step 5: Deploying the Network Visualizer

Once ready, we deployed our topology dashboard for team-wide access:

preswald deploy --target network_team

Now accessible at:

🌐 https://network-visualizer.preswald.app

✅ Live network map available to all IT team members.

The Results: Instant, Automated Network Insights

🚀 No more manual network diagrams – Visualizations update instantly.
🚀 Faster troubleshooting – IT teams can see all connections at a glance.
🚀 Scalable for large networks – Handles hundreds of devices dynamically.

Final Thoughts: Why Preswald is Perfect for Network Visualization

If your IT team is manually tracking network topology, Preswald can help:

✅ Automate device connection mapping
✅ Generate real-time, interactive network diagrams
✅ Easily deploy and share with your team

🔗 Start visualizing your network with Preswald today!

https://github.com/StructuredLabs/preswald

Preswald for visualizing network topology