Network Connections Card (interactive force-directed graph) for Home Assistant plus custom sensor command line netstat

Network Connections Card for Home Assistant

Introduction

Monitoring network activity of a host (or maybe a router that outputs the same data) provides valuable insights into device connectivity, active connections, and traffic flow. The ha_network-connections-card is a custom Lovelace card for Home Assistant that displays real-time network connection data in a structured format.


Yes this is my network…

Why Use a Network Connections Card?

Tracking network connections helps users identify active devices, detect unusual traffic, and monitor bandwidth usage. This card provides:

  • Real-time visualization of network connections
  • Tracking of active and historical connections
  • Filtering by source, destination, and port

Warning

This card was built and tested on a Fedora Linux host. The behavior of network monitoring tools may vary on different operating systems. Users should verify their configurations and adapt the implementation accordingly.

Features of ha_network-connections-card

This custom card provides:

  • Dynamic visualization of network connections
  • Integration with Home Assistant’s monitoring sensors
  • Support for filtering by IP address and port
  • Customizable update intervals
  • Flexible UI configuration
  • Graphical representation using an interactive force-directed graph

Special Graphical Interface

The network connections card represents network activity using an interactive force-directed graph. This visualization style allows:

  • Dynamic representation of active network connections
  • Nodes representing devices and edges showing active connections
  • Live updates as new connections are established or closed
  • Clear distinction between internal and external connections

Unlike static tables or lists, this graphical approach makes it easier to identify network traffic patterns and outliers at a glance. The interactive nature enables users to hover over nodes and connections to view detailed information about network activity.

For a table view (auto loaded on the same sensor) see: Netstat Overview Card for Home Assistant plus custom sensor command line netstat

How to Install

To set up this custom card in Home Assistant:

ha_network-connections-card GitHub repository

  1. Download the Card Clone or download the repository from GitHub:
git clone https://github.com/RoyOltmans/ha_network-connections-card
  1. Add the Card to Home Assistant Copy the ha_network-connections-card folder into the www/community/ directory within your Home Assistant configuration.

  2. Include the Resource in Lovelace Add the following to ui-lovelace.yaml:

resources:
  - url: /local/community/ha_network-connections-card/ha_network-connections-card.js
    type: module
  1. Sensor Configuration To provide data for the card, set up a sensor that captures network connections. Here’s an example using Home Assistant’s command_line sensor:

Here’s the expected format and sensor.network_connections (Viewable in Developer Tools → States):

command_line:
  - sensor:
        name: Network Connections
        command: "netstat -ntu | awk '{if (NR>2) print $4, $5}' | awk -F'[: ]+' '{print $(NF-3), $(NF-2), $(NF-1), $(NF)}' | grep -E '^[0-9]+\\.[0-9]+\\.[0-9]+\\.[0-9]+ [0-9]+ [0-9]+\\.[0-9]+\\.[0-9]+\\.[0-9]+ [0-9]+$' | jq -c -R '[inputs | capture(\"(?<source>[0-9.]+) (?<sport>[0-9]+) (?<target>[0-9.]+) (?<port>[0-9]+)\") | {source, sport: ( .sport | tonumber ), target, port: ( .port | tonumber )}] | {connections: .}'"
        value_template: "{{ value_json.connections | length }}"
        json_attributes:
            - connections
        scan_interval: 60
  1. Card Configuration To add the card to your dashboard, place this in an single card panel and use the following Lovelace configuration:
type: custom:network-connections-card
entity: sensor.my_network_connections

Considerations

This card requires a properly configured network monitoring sensor. Users should confirm their operating system compatibility and ensure the necessary tools (such as netstat) are installed and functional.

For more information or contributions, visit the project repository: ha_network-connections-card.

4 Likes

Looks fascinating. Can you make installation of the card capable of being installed via HACS?

1 Like

I’m a little confused by the terminology. I was looking at the js file to see what the line colours represented. Answer: inbound and outbound links.

But aren’t Ethernet links bidirectional?

1 Like

Hi Nickrout,

I do not have a setup to test it right now. I am not sure when I do be able to set it up and test if it works. If somebody would be able to do this please any help would be nice :slight_smile:

Hi Tom

Yes, Ethernet is bidirectional, this is based on OSI layer 4.

The source (netstat) is OSI layer level 5 combined with 4 this overview is the basis of the type of connections on IP level with connection. The lines have to do with the coupling from IP to port.

1 Like
1 Like

I’ve transformed the entire dataset into a 3D structure, and it’s working quite well! It still leans a bit towards my personal implementation, but overall, I’m happy with the progress.

When I am ready I will publish that solution also.

preview

Interaction and all, zooming, vector data turning the sphere labels in real text vectors etc :slight_smile:

1 Like

Not sure what I have done wrong:

I did clone directly into the community folder rather than copying from elsewhere. Could that be the issue?

EDIT:

The resource url should be:

  - url: /local/community/ha_network-connections-card/network-connections-card.js

not

  - url: /local/community/ha_network-connections-card/ha_network-connections-card.js

Screenshot 2025-02-14 at 14-35-16 Administration – Home Assistant

2 Likes

Thanks Tom, Happy to see your enjoying the card, and thanks for the feedback I will fix it in the manual!

1 Like

I have forked your repo and made it HACS compatible. About to go out, but there was a naming change needed that I’ll post about when I am home again.

Ok, more time now.

My fork is here https://github.com/nickrout/network-connections-card

I understand from this page Plugin (Dashboard) - HACS, that the name of the repository has to be the same as the name of the card. Your repository is ha-network-connections-card, but your card is called network-connections-card. When I forked I therefore called the repository network-connections-card. Alternatively you could rename the card ha-network-connections-card. This is a matter for you to decide.

After that it was trivial to add the HACS necessary stuff. I have installed it on my system from HACS (pointed to my fork).

I haven’t yet changed your README.md for to add instructions. I thought I’d wait to see what your want to do about the renaming. Edit: done that now.

Cheers.

PS thanks to @tom_l for the pointer to the HACS documentation.

3 Likes

Hi Nickout,

I added/merged your features into the code, I did not change the folder/repo name but the file for others so everything comes together.

Thank you for adding HACS support I can’t test these features. Not sure if you saw it Thursday/ Friday I added lazy loading and so less animation stalls.

I will follow-up this card with a 3d sphere instead of the 2d view.

Ps I am not at home, doing this behind my phone :selfie:. Apologies for any typos.

1 Like

Good morning,
my device is using a dark theme, which makes the text unreadable.
Is it possible to fix this issue using card_mod?
If yes, could someone kindly explain how to do it?
Thank you very much!

1 Like

Hi

Could you test something for me, update line 45 of network-connections-card.js into this:

fill: var(--primary-text-color, black);

It should adhere to your theme, if it works I will update the code.

I tested this evening with the dark theme and it now adheres to the font colors of the theme of ha. So it should be fixed with the above change :slight_smile:

Please could it be verified (use developer mode f12 and disable cache in the network tab) if it works for others?

Hi Captain_Harlock,

I changed the code in the repo, so the themo text color will be supported (I personally verified if it works, maybe I missed something…).

Second I think card_mod can work if you want to customize further, this is the part of the HTML that you want to influence:

<text class="label" dx="15" dy="4" x="X.X" y="X.X">X.X.X.X</text>

This is the selector:
#zoom-group > text

Code I fixed was:

Cheers

Hi All,

Just posted the 3d version I talked about:

For a direct dive go to the github:

1 Like