docs(topology): update network topology docs with new features and screenshots (#450)

Document dagre auto-layout, enriched container nodes, click-to-logs,
and system network toggle. Refresh screenshots to show current UI.
This commit is contained in:
Anso
2026-04-08 21:42:40 -04:00
committed by GitHub
parent 5d6c87f3b0
commit cc23732727
3 changed files with 12 additions and 3 deletions
+12 -3
View File
@@ -105,18 +105,27 @@ Click the eye icon on any network row to open a detail panel showing:
#### Network topology <span style={{fontSize: '0.75em', color: 'var(--brand)'}}>Skipper</span>
Switch to the **Topology** view to see an interactive graph of your Docker networks and the containers connected to them. System networks (`bridge`, `host`, `none`) are excluded for clarity.
Switch to the **Topology** view to see an interactive graph of your Docker networks and the containers connected to them. The graph uses automatic hierarchical layout (networks on top, containers below) that scales cleanly regardless of how many networks and containers you have.
<Frame>
<img src="/images/networks/network-topology.png" alt="Network topology visualization showing containers connected to networks" />
</Frame>
- **Network nodes** - Dashed border cards showing network name and driver, color-coded by status (managed, external, system)
- **Container nodes** - Cards showing container name with IP addresses per network
- **Edges** - Animated connections between networks and their containers
- **Container nodes** - Cards showing container name, state indicator, stack badge, image name, and IP addresses per network
- **Edges** - Animated color-coded connections between networks and their containers
- **Click-to-logs** - Click any running container node to open its log viewer directly
- Pan, zoom, and drag nodes to explore the topology
- A mini map in the bottom-right provides an overview
##### Show system networks
By default, system networks (`bridge`, `host`, `none`) are hidden. Toggle **Show system networks** to include them in the graph, which is useful for debugging containers attached to the default bridge network.
<Frame>
<img src="/images/networks/network-topology-toggle.png" alt="Network topology with system networks visible" />
</Frame>
<Note>
Network Topology requires a Skipper or Admiral license. Community users see an upgrade prompt.
</Note>
Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 120 KiB

After

Width:  |  Height:  |  Size: 38 KiB