Topology Builder

Shapes

Circle

Oval

Rectangle

Square

Line

Arrow

Text

L2 Switch

L3 Switch

Access Point

Firewall

Router

Workstation

Printer

Server

Cloud

100%

Quick Start

Click a shape button in the left sidebar
Click on the canvas to place the shape
Use the interaction circle to edit or connect shapes
Save your work with File → Export JSON

Key Features

Shapes

Basic shapes (circle, rectangle, ellipse)
Cisco network devices
Drag to reposition
Resize with corner handles
Customizable labels & colors

Connections

Visual connections between shapes
Source & target labels
Draggable labels
Line styles (solid, dashed, dotted)
Auto-update when shapes move

Canvas

Infinite canvas with grid
Zoom (25% to 400%)
Pan by dragging empty space
Grid snapping
Auto-save to browser

File Operations

Export as JSON
Export as PNG image
Import from JSON
Create new topology
State persistence

Keyboard Shortcuts

Action	Shortcut
Delete selected shape	`Delete` or `Backspace`
Close modal	`Escape`
Submit form	`Enter`
Deselect shape	`Escape`

Usage Tips

Click on a shape, then click the edit icon (left half of interaction circle). Customize text, position, size, and color. Labels automatically move with shapes.

Click the connect icon (right half of interaction circle) on the source shape, then click the target shape. Edit connection labels by clicking on the connection line.

Use File → Export PNG to save your topology as a high-resolution image. The export automatically crops to fit all content with proper padding.

Your topology is automatically saved to your browser. For backup, use File → Export JSON to download a file you can import later.

About

Topology Builder is a modern, interactive web-based network topology diagram builder with an intuitive drag-and-drop interface.

Built with vanilla JavaScript, SASS, and FastAPI. View on GitHub