A basic HLBuilder canvas starts with the router and switch path. Servers, NAS storage, and access points sit on reachable branches instead of floating as isolated notes. This embedded preview is rendered by the same ReactFlow HardwareNode, RackNode, and CustomEdge components used in HLBuilder's visual builder.

Start with the network path

The first useful diagram is a path diagram. It answers one question: how does each device reach the gateway? HLBuilder makes this concrete with router, switch, access point, server, NAS, mini PC, SBC, UPS, PDU, and rack nodes.

A diagram that starts with endpoints can look complete while hiding missing uplinks. Put the router in first, draw the switch connection, then place servers and storage on the ports they will use. The visual builder makes disconnected nodes easy to spot because they sit outside the connected path.

Use device roles in the drawing

Device roles matter because the IP plan and setup steps depend on them. A NAS is not the same as a compute server, and an access point is not the same as a switch. HLBuilder keeps those roles separate instead of treating the lab as one flat list.

For a small lab, the diagram can stay simple: router, switch, NAS, one compute node, and one access point. The value comes from seeing which devices are infrastructure and which devices run services.

Review the diagram before buying

A visual example is useful before a shopping list. It exposes missing switch ports, unclear storage placement, and servers that have no path to a gateway. It also gives a baseline for automatic IP assignment after the build is saved.

Use the first diagram as a sketch, then add real parts from the hardware catalog. That keeps the page grounded in devices that could exist in the actual lab.

Builder checks

Check

Every compute or storage node has a path back to the router.

Check

The switch has enough visible ports for the devices in the diagram.

Check

Wi-Fi equipment is separate from wired servers and storage.

Check

The diagram names the role of each node before model numbers are chosen.

Common questions

What is a good first homelab network diagram?

A good first diagram shows the router, the switch path, storage, compute nodes, and access points. It should make disconnected devices obvious.

Why use HLBuilder for network diagrams?

HLBuilder uses visual nodes and edges, then uses the saved topology for network calculations and setup planning.