Network Flow Card

benm7 · September 7, 2026, 12:07pm

NOTE: PLEASE UPDATE TO V3.0.1+ IF YOU ARE ON AN OLDER VERSION. REMOVED DEPENDANCY ON UNPKG AND MADE LOCAL

Inspired by the awesome Power Flow Plus card, I wanted to build a card to visualise all my network elements and their status, everything from Internet through to individual devices which I want to monitor whether they are online or not.

So, here is Network Flow Card, a card which allows you to build out your network (hopefully) and visualise in a single card.

Install by adding my custom repository to HACS. Note this is my first time developing and making a card available, so welcome any feedback. I “think” I have covered most scenarios, but if there are any other feature requests people can think of, would love to hear them!

Will post some screenshots of the various configurations I hope this will cover in the coming days.

A custom Lovelace card that visualizes your home network as a live flow diagram — Internet → Router → Access Points → Devices — in the same visual style as power-flow-card-plus, but for your network instead of your energy dashboard.

Key Features

Full network topology Internet, Router, LAN, and any number of Access Points, all connected with animated download/upload flow lines. Router is optional — hide it and Internet connects straight to your APs.

Primary Access Point Designate one AP as “primary” and choose how it’s displayed:

Tiered — promoted into the main trunk, sitting above the other APs like a mini-router
Flat — stays inline with the rest, marked with a small customizable badge (icon, colors, and size all configurable)

Live status at a glance

Ping, jitter, and billing-cycle progress ring on the Internet node
Per-node offline detection with pulsing warning icons and dimmed, color-coded states
Configurable download/upload/ping summary badges (top/bottom/left/right), each hiding automatically if you haven’t set up that entity

Access Points, your way

Any number of APs, freely reorderable
Per-AP Backhaul Type support — shows a wired or wireless icon on the connector line automatically
Connected Devices count per AP, hanging off its own branch

Individual Devices tracker A dashed-bordered box at the bottom of the card tracking any entities you want — presence sensors, specific devices, anything — with the same online/offline styling as the rest of the card.

Make it match your theme Every color defaults to your Home Assistant theme’s variables (works great in dark mode out of the box) and is fully overridable per-element if you want something custom.

One place for sizing Circle and icon sizes for every node type (Internet, Router, LAN, APs, Connected Devices, Individual Devices) are set once under Advanced settings — no need to size each item individually.

Full GUI editor Every option above is configurable through the visual editor — no YAML required (though YAML works too, if that’s your style).

Compatible with card_mod for any additional styling tweaks you want to layer on top.

https://github.com/benmac7/network-flow-card

benm7 · September 8, 2026, 12:44am

[1.2.0]

Added

VPN badge: shows automatically on the Router and Primary AP nodes
when a configured VPN-active entity reports “on”. Customizable icon
(defaults to mdi:vpn), background/icon/outline colors, and size -
all under Advanced → VPN Badge. Configure the VPN entity itself on
the Router page, or on an Access Point’s page once it’s marked
Primary.

Changed

The Primary AP badge (Flat/Tiered layouts) now sits on the left
side of the circle, making room for the new VPN badge on the right.

Fixed

Offline detection now recognizes not_home. Entities like
device_trackers (commonly used by network-device integrations such
as UniFi for APs/switches) report home/not_home rather than
on/off, and were previously never detected as offline by the
card - only entities that became Home-Assistant-level unavailable
were caught.

SteveM1 · September 8, 2026, 11:45am

This looks interesting. I have a TPlLink Deco mesh network and have added my mesh nodes in - each has a series of connected clients which can change dynamically - it would be very useful to be able to just show a series of connected devices against each access point. Not sure whether that would be easy, or even feasible, but if it were then it would certainly be useful. It’s a nice start and thank you for producing it.

Steve.

benm7 · September 9, 2026, 12:00am

There seems to be an attribute for each device tracker the Deco integration creates that is “meant to” show which AP it is connected to, however all of mine are showing as being connected to the Main AP and not the satellite one it is actually connected to. So not sure this will work based on what I can see so far

benm7 · September 9, 2026, 12:00am

[1.3.0]

Added

Complete editor GUI overhaul: every page reorganized into clear
sub-sections with two-column color layouts - Internet
(Internet/Billing/Metrics), Router (Router/LAN Connected Devices), a
new dedicated VPN page, Access Point (Access Point/Backhaul/Connected
Devices), and Advanced (Layout/Animation/Sizes).
VPN badge: shows on either the Router or the Primary Access Point
- pick one VPN entity and an “Applies To” target, and the badge
  appears wherever you’ve pointed it. Always visible once configured,
  switching between active and offline color sets based on the
  entity’s state.
VPN “Animate when Offline” toggle - the badge flashes when
disconnected, so it’s harder to miss.
VPN “Show in Summary” toggle - replaces the Ping/Jitter summary
badge with a VPN status readout (“VPN” / “Online” or “Offline”),
matching the VPN badge’s color scheme.
New “Connection Lines Color” field per Access Point, used as the
fallback color for single-line rendering when no download/upload
entities are configured (previously silently reused the download
color).
Menu and list icons now use the theme’s primary color throughout.

Changed

LAN Connections is no longer a top-level menu item - it’s now a
“LAN Connected Devices” sub-section within the Router page.
Primary AP badge: combined the separate “Show in Tiered/Flat
Layout” toggles into a single “Show Primary AP Badge” switch, with
colors now set per-AP instead of globally.
Color picker layout: every color selector across all pages now
shows its label on its own row, with the swatch and hex input on the
row below - much less cramped than the previous side-by-side layout,
especially inside two-column sections.
Badge and node sizing remain global settings, consolidated at the
bottom of Advanced under “Sizes”.

Removed

Router Status Entity picker from the editor (unused).

benm7 · September 9, 2026, 3:49am

[1.4.1]

Added

Switch Circle Size / Icon Size sliders, and Switch Connected
Devices Circle Size / Icon Size sliders (the side-branch previously
had a fixed, non-configurable size) - all under Advanced → Sizes.

Changed

Unified badge sizing: the separate “Primary Badge Size”/“VPN
Badge Size” slider pairs are now a single “Badge Size” / “Badge Icon
Size” pair that controls all badge types together (Primary AP, VPN,
and Firewall), since there was no real reason for them to size
independently.

[1.4.0]

Added

Switch node - an optional node between Router and your Access
Points, for setups with a managed switch distributing connectivity
(e.g. a PoE switch feeding multiple APs). Only appears once an entity
is configured (same pattern as Router). Supports its own icon,
colors, offline state, and an optional Connected Devices count shown
as a side branch (matching how LAN’s Connected Devices renders off
Router). Works correctly whether or not Router itself is configured,
and correctly positions itself above a Tiered-layout Primary AP or
directly above the Access Point row if there’s no Primary AP.
Firewall badge - mirrors the VPN badge exactly: single entity,
“Applies To” target (Router or Primary AP), Animate when Offline, and
full active/offline color and icon customization. Defaults to
mdi:wall-fire with an orange background, positioned at the
bottom-right of the circle (VPN stays top-right) so both can show
simultaneously without overlapping.
Fully configurable summary: choose any 3 items, in any order,
from Download, Upload, Latency and Jitter, VPN Status, or Firewall
Status (Advanced → Layout → Summary Item 1/2/3). Defaults to
Download/Upload/Latency and Jitter, matching previous behavior. Each
item only appears if its underlying entity is actually configured.

Changed

The VPN menu is now Security, housing both the VPN and
Firewall sections together.

SteveM1 · September 9, 2026, 3:06pm

Thanks for the reply Ben. My devices show the satellite in the entity name, e.g. device_tracker.dining_room_deco_esp32_bluetooth_proxy_a12cdc - I can understand that doing something specific for different types of router/access point is probably not what you’d want to do, but a big plus of something like this would at least be for new devices to appear automatically when added to the network, rather than have to be specifically identified and added to the card individually.

I had thought of building a template sensor for each access point which would have the connected devices as a series of attributes but that doesn’t sit well with the structure of your card. I might be better off just building something myself, will give it some thought.

benm7 · September 10, 2026, 12:20pm

v2 out tomorrow hopefully!

benm7 · September 11, 2026, 12:51am

v2.0.0 released with lots of changes! Biggest change is now supporting distribution/access switches and tiered topologies.

[2.0.0]

A major release consolidating everything since 1.4.1 into one stable
version. The headline change is Nodes: Access Points are no longer
the only thing that can hang off the bus - a Node can now be a plain
AP, a standalone Switch, or a Switch feeding one or more of its own
Access Points.

Added

Nodes: the Access Points menu is now Nodes. Each entry in
the list can be:
- A plain Access Point, exactly as before.
- A standalone Switch, with its own icon, colors, offline
  detection, and an optional Connected Devices count.
- A Switch feeding one or more Access Points, connected via its
  own small secondary bus-line - each AP underneath still gets full,
  independent configuration (bandwidth, backhaul, Connected Devices,
  colors).
- Existing configs migrate automatically on load - every existing
  Access Point becomes its own Node with no visible change.
- An AP can be flagged Primary regardless of which kind of Node
  it lives in, for the star badge and VPN/Firewall targeting. Tiered
  (promoted-above-the-bus) layout is only available when the Primary
  AP’s Node is AP-only; if it’s inside a Switch’s group, the card
  silently renders as Flat instead of breaking the group apart.
- The Node containing the Primary AP stands out in the Nodes list -
  icon shown in var(--accent-color), with “(Primary)” appended to
  its title.
Security page: the VPN menu is now Security, and sits
alongside a new Firewall badge - its own entity, an “Applies To”
target (Router or Primary AP), an Animate-when-Offline toggle, and
full active/offline color and icon customization. Firewall’s badge
sits at the bottom-right of its host circle (VPN stays top-right), so
both can be shown on the same node without overlapping.
Fully configurable Summary: choose any 3 items, in any order,
from Download, Upload, Latency and Jitter, VPN Status, or Firewall
Status (Advanced → Layout → Summary Item 1/2/3). Replaces the old
fixed Download/Upload/Ping arrangement and separate per-badge
“Show in Summary” toggles.
Global Flow Line Color (Advanced page): one color now controls
every connection line and flow-dot animation on the card - Router,
Switch (top-level and Node-level), LAN, Access Points, Individual
Devices, and every Connected Devices connector - except the Internet
connection, which remains independently configurable on the Internet
page. The many separate per-node line-color pickers this replaced
have been removed from the editor.
AP Column Gap slider (Advanced → Sizes) - controls the horizontal
spacing between Node columns, so a large number of them can be
packed tighter to fit on screen instead of stretching off it.
Backhaul Icon Size slider, and an Individual Devices Box
Border Radius setting (any CSS length or theme variable; defaults
to var(--ha-card-border-radius, 12px)).
Uniform column widths: every Node column is now at least as wide
as the largest AP, Switch, or Connected Devices circle actually used
in that specific diagram, so a column with only a thin connector
line never looks visibly narrower than its neighbors.

Changed

Unified badge sizing: Primary AP, VPN, and Firewall badges now
share a single “Badge Size” / “Badge Icon Size” pair (Advanced →
Sizes) instead of separate controls for each.
Unified Switch sizing: a Switch’s own Connected Devices circle -
whether the top-level Switch above the bus, or a Switch-only Node -
now uses the same global AP Connected Devices size, rather than a
separate, easy-to-miss setting.
Consistent solid lines out of every Switch: any connection
coming out of a Switch - to its own Connected Devices circle, to a
fed Access Point, or straight through to the Individual Devices box
- always renders solid and un-animated, since it represents a wired
  connection rather than a live, animated metric.
Consistent AP lines: a plain Access Point’s connecting line -
including any pass-through segments where it has to bridge past an
unrelated Switch elsewhere on the bus - shows dual download/upload
strands or a single line based on that specific AP’s own bandwidth
configuration, and renders dashed when its backhaul is wireless, the
whole way from the bus down to its own circle.
Primary AP’s Individual Devices connector now follows the
Primary’s actual position in the Nodes list (e.g. 3rd node → 3rd
column from the left) instead of a fixed position, so it can never
land awkwardly next to - or inside - an unrelated multi-AP Switch
group.

benm7 · September 11, 2026, 10:54am

[2.1.0]

NOTE: I have tried to build POE and Guest wifi in for Unify devices, but would welcome testers as I cannot test this myself!

Adds Power over Ethernet (PoE) monitoring for Switches (including a
PoE Total Summary item), and a guest network indicator for Individual
Devices.

Added

PoE badge on Switches (both the top-level Switch and any
Node-level Switch): a small top-right badge showing summed PoE
wattage, no icon - just the value and unit. Two ways to source the
total:
- Auto - sums every entity on the switch’s own device that
  reports watts and looks PoE-related (covers per-port sensors from
  integrations like UniFi Insights without listing every port by
  hand).
- Manual - sum exactly the entities you list. Works even if the
  Switch itself has no status entity configured - PoE only needs the
  listed sensors, not the switch’s own entity.
- The badge hides itself entirely when there’s nothing to show,
  rather than displaying “0 W” for a switch with no PoE sensors
  enabled.
PoE badge coloring: a single fixed color, or threshold
colors - up to three tiers (e.g. green up to 15W, orange up to
30W, red above that), each independently colorable. Text color is
set separately from the badge background in both modes.
PoE “Animate when above top threshold” toggle (only shown in
Threshold color mode) - the badge flashes using the same animation
as the VPN/Firewall badges once the total exceeds every configured
threshold.
PoE Badge Size and PoE Badge Font Size sliders (Advanced →
Sizes) - independent controls, so the pill’s size and its text size
can be tuned separately.
PoE Total Summary item: a new option for the Summary rows
(mdi:lightning-bolt, “PoE” / summed wattage) that adds up every
PoE badge actually shown across the whole diagram - the top-level
Switch and every Node-level Switch. Supports the same single-color-
or-threshold coloring as the per-switch badges (Advanced → Layout,
shown once PoE Total is selected as a Summary Item); its icon color
is fixed to match the other Summary badges, and it never flashes,
regardless of threshold settings.
Guest network badge on Individual Devices: a small icon shown
top-right on any Individual Device currently connected to a guest
network, only while the device is online. Detected automatically
from the device’s own entity attributes - no per-device setup
required:
- TP-Link Deco - interface attribute equal to "guest".
- UniFi integration - is_guest attribute equal to true.
Guest badge icon, icon color, and badge background color
(Individual Devices page - background defaults to transparent), plus
independent Guest Badge Size and Guest Badge Icon Size
sliders (Advanced → Sizes). All global settings applying uniformly
to every Individual Device.

Fixed

A Switch with no Connected Devices circle showed a dashed
pass-through line where it should be solid. The line segment
filling that gap wasn’t distinguishing a Switch-fed column from an
Access-Point-fed one the way the segment above it already did, so it
always rendered the AP’s dashed style regardless of source.

benm7 · September 14, 2026, 2:00am

v2.2.1 released, with more customisation of POE data.
Would love some Unify testers to give this a go and provide feedback. I think I have pretty much hit the end of my imagination, apart from trying to get per port POE details in a seamless way. Also keen to know if the automatic POE values for Unify devices actually works or not

[2.2.0]

Extends PoE to the Router and every Access Point, adds nested
(“fed”) Switches under a Switch’s Access Point group, and makes badge
positioning fully configurable per device.

Added

PoE on the Router, in addition to Switches and Access Points -
same Auto/Manual sourcing, single-or-threshold coloring, and
optional flash-on-threshold. Included in the PoE Total Summary item
alongside every other PoE-capable device.
PoE on Access Points: the same PoE capability Switches already
had, now available on any Access Point (Primary or not), also
included in the PoE Total Summary.
Fed Switches: a Switch feeding Access Points can now also feed
additional Switches, in the same row as its Access Points - each a
leaf with its own icon, colors, Connected Devices, and full PoE
support, connected with solid, unanimated lines the whole way down
to Individual Devices (matching how any Switch’s own output
behaves). Managed from a new “Fed Switches” list under each Switch
node, alongside its existing Access Points list.
Configurable badge position, per device: Primary AP, VPN,
Firewall, and PoE badges can each be placed in any of the four
corners (top-left, top-right, bottom-left, bottom-right):
- PoE location is set per device, inside that device’s own PoE
  section (Router, Switch, Access Point) - not a single global
  setting, since different devices often want their badge in
  different corners depending on what else is showing there.
- Primary AP badge location is set per Access Point, right under
  its “Show Primary AP Badge” toggle (only shown while that toggle
  is on) - not a global setting either, for the same reason.
- VPN and Firewall badge location remain global settings
  (Security page), since each only ever targets one place (Router or
  Primary AP) at a time.
- When two or more badges land in the same corner on the same
  circle, they now fan out slightly along that corner’s edge so both
  stay visible instead of one hiding behind the other.
Unique default identity colors per device type: Internet,
Router, LAN, Switch, Access Point, and Individual Device each now
default to their own distinct Home-Assistant theme color (green,
indigo, teal, amber, cyan, and pink respectively) instead of every
type defaulting to the same var(--primary-color). Fully overridable
per item as before; functional colors (download/upload/offline/
Connected Devices) are unchanged, since those already carry a
consistent meaning across every device type.

apsmith12 · September 14, 2026, 7:35pm

So, great idea, few questions on the card.
1-For any device (router, switch) thats not in HA, do you just use a helper entity?
2-Assuming you can follow any of what I drew, how would you set this up? Essentially my router has 5 vlans and most devices run through pihole/unbound for dns which sits on the same server that runs HA/Unraid.

benm7 · September 15, 2026, 2:44am

Thanks for the diagram, super helpful! I hadn’t factored in a server to control VPN and pi-hole etc, but definitely looks like something I should include.
Where are your access points? Is the router itself performing the wifi functionality for all VLANs/SSIDs?

benm7 · September 15, 2026, 5:47am

Download 2.3.1 and have a play around. I “think” the below models most of what you have, with the main caveat being I haven’t added the ability to identify which network individual devices are connected to apart from a guest network. Let me have a think about that, but if you can send me any details on what router you use and if/how HA can tell you which network each device is connected to.

Full yaml for my mock up in next message below so you can copy and paste in to your card and then change the entity details as needed.

benm7 · September 15, 2026, 5:56am

Use this code, have treated the router as an AP

type: custom:network-flow-card
title: ''
summary_position: top
summary_items:
  - download
  - upload
  - ping
summary_poe_color_mode: single
summary_poe_color: var(--orange-color)
summary_poe_thresholds:
  - up_to: 15
    color: var(--green-color)
  - up_to: 30
    color: var(--orange-color)
  - color: var(--red-color)
primary_ap_layout: tiered
primary_badge_icon: mdi:star
badge_size: 18
badge_icon_size: 12
poe_badge_size: 16
poe_badge_font_size: 9
vpn_entity: switch.tp_link_router_vpn_client
vpn_target: homelab
vpn_animate_offline: false
vpn_badge_icon: mdi:vpn
vpn_badge_location: top-right
vpn_badge_color: var(--blue-color)
vpn_badge_icon_color: var(--card-background-color)
vpn_badge_border_color: transparent
vpn_badge_offline_color: 'var(--disabled-text-color, #bdbdbd)'
vpn_badge_offline_icon_color: var(--card-background-color)
vpn_badge_offline_border_color: transparent
vpn_peers_entity: ''
firewall_entity: ''
firewall_target: router
firewall_animate_offline: false
firewall_badge_icon: mdi:wall-fire
firewall_badge_location: bottom-left
firewall_badge_color: var(--orange-color)
firewall_badge_icon_color: var(--card-background-color)
firewall_badge_border_color: transparent
firewall_badge_offline_color: 'var(--disabled-text-color, #bdbdbd)'
firewall_badge_offline_icon_color: var(--card-background-color)
firewall_badge_offline_border_color: transparent
dns_entity: switch.tp_link_router_vpn_client
dns_target: homelab
dns_unit: ''
dns_badge_icon: mdi:pi-hole
dns_badge_location: top-right
dns_color_mode: single
dns_badge_color: red
dns_badge_offline_color: 'var(--disabled-text-color, #bdbdbd)'
dns_text_color: var(--card-background-color)
dns_thresholds:
  - up_to: 50
    color: red
  - up_to: 100
    color: red
  - color: red
dns_animate_over_threshold: false
reverse_proxy_entity: switch.tp_link_router_vpn_client
reverse_proxy_target: homelab
reverse_proxy_animate_offline: false
reverse_proxy_badge_icon: phu:nginx
reverse_proxy_badge_location: top-right
reverse_proxy_badge_color: var(--green-color)
reverse_proxy_badge_icon_color: var(--card-background-color)
reverse_proxy_badge_border_color: transparent
reverse_proxy_badge_offline_color: 'var(--disabled-text-color, #bdbdbd)'
reverse_proxy_badge_offline_icon_color: var(--card-background-color)
reverse_proxy_badge_offline_border_color: transparent
ap_circle_size: 64
ap_icon_size: 24
ap_devices_circle_size: 56
ap_devices_icon_size: 20
ap_column_gap: 32
flow_line_color: 'var(--divider-color, #ccc)'
backhaul_icon_size: 13
individual_device_circle_size: 42
individual_device_icon_size: 20
individual_device_guest_icon: mdi:account-question
individual_device_guest_icon_color: var(--secondary-text-color)
individual_device_guest_icon_bg: transparent
individual_device_guest_icon_size: 16
individual_device_guest_badge_size: 24
internet:
  name: ''
  entity: ''
  icon: mdi:web
  circle_size: 72
  icon_size: 24
  download_icon: mdi:download
  upload_icon: mdi:upload
  ping_icon: mdi:speedometer
  entities:
    ping: ''
    jitter: ''
    download: ''
    upload: ''
    total_download: ''
    total_upload: ''
    billing_total: ''
    billing_remaining: ''
  colors:
    icon: var(--green-color)
    billing_remaining: var(--divider-color)
    billing_progress: var(--green-color)
    download: var(--blue-color)
    upload: var(--orange-color)
    circle: var(--green-color)
    download_badge: var(--green-color)
    download_badge_icon: var(--text-primary-color)
    upload_badge: var(--pink-color)
    upload_badge_icon: var(--text-primary-color)
    ping_badge: var(--cyan-color)
    ping_badge_icon: var(--text-primary-color)
    offline_circle: var(--error-color)
    offline_icon: var(--error-color)
router:
  entity: ''
  name: Router
  icon: mdi:router-wireless
  circle_size: 72
  icon_size: 24
  entities:
    status: ''
  colors:
    icon: var(--indigo-color)
    circle: var(--indigo-color)
    bus_line: 'var(--divider-color, #ccc)'
    offline_circle: var(--error-color)
    offline_icon: var(--error-color)
  poe:
    mode: 'off'
    manual_entities: []
    unit: W
    location: top-left
    color_mode: single
    color: var(--orange-color)
    text_color: var(--card-background-color)
    thresholds:
      - up_to: 15
        color: var(--green-color)
      - up_to: 30
        color: var(--orange-color)
      - color: var(--red-color)
    animate_over_threshold: false
lan:
  entity: ''
  icon: mdi:lan
  circle_size: 56
  icon_size: 20
  colors:
    icon: var(--teal-color)
    circle: var(--teal-color)
    line: var(--primary-text-color)
    offline_circle: var(--error-color)
    offline_icon: var(--error-color)
switch:
  entity: ''
  name: ''
  icon: mdi:switch
  circle_size: 60
  icon_size: 22
  devices_icon: mdi:devices
  entities:
    connected_devices: ''
  colors:
    icon: var(--amber-color)
    circle: var(--amber-color)
    bus_line: 'var(--divider-color, #ccc)'
    offline_circle: var(--error-color)
    offline_icon: var(--error-color)
    devices_circle: var(--purple-color)
    devices_icon: var(--primary-color)
    devices_offline_circle: var(--error-color)
    devices_offline_icon: var(--error-color)
  poe:
    mode: auto
    manual_entities: []
    unit: W
    location: top-left
    color_mode: single
    color: var(--orange-color)
    text_color: var(--card-background-color)
    thresholds:
      - up_to: 15
        color: var(--green-color)
      - up_to: 30
        color: var(--orange-color)
      - color: var(--red-color)
    animate_over_threshold: false
nodes:
  - name: ''
    switch: null
    homelab:
      entity: sensor.pve1_status
      name: Tower
      icon: mdi:server
      devices_icon: mdi:devices
      entities:
        connected_devices: ''
      colors:
        icon: var(--deep-purple-color)
        circle: var(--deep-purple-color)
        bus_line: 'var(--divider-color, #ccc)'
        offline_circle: var(--error-color)
        offline_icon: var(--error-color)
        devices_circle: var(--purple-color)
        devices_icon: var(--primary-color)
        devices_line: 'var(--divider-color, #ccc)'
        devices_offline_circle: var(--error-color)
        devices_offline_icon: var(--error-color)
      poe:
        mode: 'off'
        manual_entities: []
        unit: W
        location: top-right
        color_mode: single
        color: var(--orange-color)
        text_color: var(--card-background-color)
        thresholds:
          - up_to: 15
            color: var(--green-color)
          - up_to: 30
            color: var(--orange-color)
          - color: var(--red-color)
        animate_over_threshold: false
      show_devices_line: false
      containers:
        - entity: binary_sensor.pve1_homeassistant
          name: ''
          icon: mdi:home-assistant
          location: bottom-right
          color: var(--blue-color)
          icon_color: var(--card-background-color)
          border_color: transparent
          offline_color: 'var(--disabled-text-color, #bdbdbd)'
          offline_icon_color: var(--card-background-color)
          offline_border_color: transparent
          animate_offline: false
    access_points: []
    fed_switches: []
  - name: ''
    switch:
      entity: binary_sensor.garage_deco_deco_online
      name: Switch
      icon: mdi:switch
      devices_icon: mdi:devices
      entities:
        connected_devices: ''
      colors:
        icon: var(--amber-color)
        circle: var(--amber-color)
        bus_line: 'var(--divider-color, #ccc)'
        offline_circle: var(--error-color)
        offline_icon: var(--error-color)
        devices_circle: var(--purple-color)
        devices_icon: var(--primary-color)
        devices_line: 'var(--divider-color, #ccc)'
        devices_offline_circle: var(--error-color)
        devices_offline_icon: var(--error-color)
      poe:
        mode: 'off'
        manual_entities: []
        unit: W
        location: top-right
        color_mode: single
        color: var(--orange-color)
        text_color: var(--card-background-color)
        thresholds:
          - up_to: 15
            color: var(--green-color)
          - up_to: 30
            color: var(--orange-color)
          - color: var(--red-color)
        animate_over_threshold: false
    homelab: null
    access_points: []
    fed_switches: []
  - name: ''
    switch:
      entity: ''
      name: ''
      icon: mdi:switch
      devices_icon: mdi:devices
      entities:
        connected_devices: ''
      colors:
        icon: var(--amber-color)
        circle: var(--amber-color)
        bus_line: 'var(--divider-color, #ccc)'
        offline_circle: var(--error-color)
        offline_icon: var(--error-color)
        devices_circle: var(--purple-color)
        devices_icon: var(--primary-color)
        devices_line: 'var(--divider-color, #ccc)'
        devices_offline_circle: var(--error-color)
        devices_offline_icon: var(--error-color)
      poe:
        mode: 'off'
        manual_entities: []
        unit: W
        location: top-right
        color_mode: single
        color: var(--orange-color)
        text_color: var(--card-background-color)
        thresholds:
          - up_to: 15
            color: var(--green-color)
          - up_to: 30
            color: var(--orange-color)
          - color: var(--red-color)
        animate_over_threshold: false
    homelab: null
    access_points: []
    fed_switches: []
  - name: Router
    switch: null
    homelab: null
    access_points:
      - entity: sensor.tp_link_router_connection_type
        name: Router
        icon: mdi:router-wireless
        devices_icon: mdi:devices
        is_primary: true
        primary_badge_location: top-left
        show_backhaul_icon: true
        show_primary_badge: false
        connects_to_switch: false
        entities:
          connected_devices: ''
          download: ''
          upload: ''
          backhaul_type: ''
          backhaul_speed: ''
        colors:
          icon: var(--cyan-color)
          circle: var(--cyan-color)
          download: var(--blue-color)
          upload: var(--orange-color)
          line: var(--primary-text-color)
          devices_circle: var(--purple-color)
          devices_icon: var(--primary-color)
          devices_line: var(--purple-color)
          backhaul_icon: var(--secondary-text-color)
          offline_circle: var(--error-color)
          offline_icon: var(--error-color)
          devices_offline_circle: var(--error-color)
          devices_offline_icon: var(--error-color)
          primary_badge: var(--orange-color)
          primary_badge_icon: var(--card-background-color)
          primary_badge_border: transparent
        poe:
          mode: 'off'
          manual_entities: []
          unit: W
          location: top-right
          color_mode: single
          color: var(--orange-color)
          text_color: var(--card-background-color)
          thresholds:
            - up_to: 15
              color: var(--green-color)
            - up_to: 30
              color: var(--orange-color)
            - color: var(--red-color)
          animate_over_threshold: false
    fed_switches: []
individual_devices:
  - entity: ''
    icon: phu:hubitat
    colors:
      circle: var(--pink-color)
      icon: var(--pink-color)
      offline_circle: var(--error-color)
      offline_icon: var(--error-color)
  - entity: media_player.xbox
    icon: mdi:microsoft-xbox
    colors:
      circle: var(--pink-color)
      icon: var(--pink-color)
      offline_circle: var(--error-color)
      offline_icon: var(--error-color)
  - entity: ''
    icon: phu:appletv-sim
    colors:
      circle: var(--pink-color)
      icon: var(--pink-color)
      offline_circle: var(--error-color)
      offline_icon: var(--error-color)
  - entity: ''
    icon: phu:huawei-solar-inverter
    colors:
      circle: var(--pink-color)
      icon: var(--pink-color)
      offline_circle: var(--error-color)
      offline_icon: var(--error-color)
  - entity: ''
    icon: mdi:television
    colors:
      circle: var(--pink-color)
      icon: var(--pink-color)
      offline_circle: var(--error-color)
      offline_icon: var(--error-color)
  - entity: ''
    icon: mdi:printer
    colors:
      circle: var(--pink-color)
      icon: var(--pink-color)
      offline_circle: var(--error-color)
      offline_icon: var(--error-color)
  - entity: ''
    icon: phu:bambu-lab-alt
    colors:
      circle: var(--pink-color)
      icon: var(--pink-color)
      offline_circle: var(--error-color)
      offline_icon: var(--error-color)
  - entity: ''
    icon: phu:ecowitt
    colors:
      circle: var(--pink-color)
      icon: var(--pink-color)
      offline_circle: var(--error-color)
      offline_icon: var(--error-color)
individual_devices_box_color: var(--divider-color)
individual_devices_box_radius: var(--ha-card-border-radius, 12px)
show_summary: true
animation: false
min_flow_duration: 0.6
max_flow_duration: 6

apsmith12 · September 15, 2026, 4:33pm

Yes, the router controls the Wifi/Vlans (I do have a repeater down the line i forgot to show but thats minor)

apsmith12 · September 15, 2026, 4:47pm

Its getting closer, there is a width constraint it seems, even setting the gap to low I cannot get more to show. Ideally the wifi would be from the router and somehow showing vlans, but this is a good step.

type: custom:network-flow-card
title: ''
summary_position: top
summary_items:
  - download
  - upload
  - ping
summary_poe_color_mode: single
summary_poe_color: var(--orange-color)
summary_poe_thresholds:
  - up_to: 15
    color: var(--green-color)
  - up_to: 30
    color: var(--orange-color)
  - color: var(--red-color)
primary_ap_layout: tiered
primary_badge_icon: mdi:star
badge_size: 18
badge_icon_size: 12
poe_badge_size: 16
poe_badge_font_size: 9
vpn_entity: switch.tp_link_router_vpn_client
vpn_target: homelab
vpn_animate_offline: false
vpn_badge_icon: mdi:vpn
vpn_badge_location: top-right
vpn_badge_color: var(--blue-color)
vpn_badge_icon_color: var(--card-background-color)
vpn_badge_border_color: transparent
vpn_badge_offline_color: 'var(--disabled-text-color, #bdbdbd)'
vpn_badge_offline_icon_color: var(--card-background-color)
vpn_badge_offline_border_color: transparent
vpn_peers_entity: ''
firewall_entity: ''
firewall_target: router
firewall_animate_offline: false
firewall_badge_icon: mdi:wall-fire
firewall_badge_location: bottom-left
firewall_badge_color: var(--orange-color)
firewall_badge_icon_color: var(--card-background-color)
firewall_badge_border_color: transparent
firewall_badge_offline_color: 'var(--disabled-text-color, #bdbdbd)'
firewall_badge_offline_icon_color: var(--card-background-color)
firewall_badge_offline_border_color: transparent
dns_entity: switch.tp_link_router_vpn_client
dns_target: homelab
dns_unit: ''
dns_badge_icon: mdi:pi-hole
dns_badge_location: top-right
dns_color_mode: single
dns_badge_color: red
dns_badge_offline_color: 'var(--disabled-text-color, #bdbdbd)'
dns_text_color: var(--card-background-color)
dns_thresholds:
  - up_to: 50
    color: red
  - up_to: 100
    color: red
  - color: red
dns_animate_over_threshold: false
reverse_proxy_entity: switch.tp_link_router_vpn_client
reverse_proxy_target: homelab
reverse_proxy_animate_offline: false
reverse_proxy_badge_icon: phu:nginx
reverse_proxy_badge_location: top-right
reverse_proxy_badge_color: var(--green-color)
reverse_proxy_badge_icon_color: var(--card-background-color)
reverse_proxy_badge_border_color: transparent
reverse_proxy_badge_offline_color: 'var(--disabled-text-color, #bdbdbd)'
reverse_proxy_badge_offline_icon_color: var(--card-background-color)
reverse_proxy_badge_offline_border_color: transparent
ap_circle_size: 64
ap_icon_size: 24
ap_devices_circle_size: 56
ap_devices_icon_size: 20
ap_column_gap: '8'
homelab_circle_size: 60
homelab_icon_size: 22
flow_line_color: 'var(--divider-color, #ccc)'
backhaul_icon_size: 13
individual_device_circle_size: 42
individual_device_icon_size: 20
individual_device_guest_icon: mdi:account-question
individual_device_guest_icon_color: var(--secondary-text-color)
individual_device_guest_icon_bg: transparent
individual_device_guest_icon_size: 16
individual_device_guest_badge_size: 24
internet:
  name: ''
  entity: sensor.cable_modem_status
  icon: mdi:web
  circle_size: 72
  icon_size: 24
  download_icon: mdi:download
  upload_icon: mdi:upload
  ping_icon: mdi:speedometer
  entities:
    ping: sensor.speedtest_ping
    jitter: ''
    download: sensor.speedtest_download
    upload: sensor.speedtest_upload
    total_download: ''
    total_upload: ''
    billing_total: ''
    billing_remaining: ''
  colors:
    icon: var(--green-color)
    billing_remaining: var(--divider-color)
    billing_progress: var(--green-color)
    download: var(--blue-color)
    upload: var(--orange-color)
    circle: var(--green-color)
    download_badge: var(--green-color)
    download_badge_icon: var(--text-primary-color)
    upload_badge: var(--pink-color)
    upload_badge_icon: var(--text-primary-color)
    ping_badge: var(--cyan-color)
    ping_badge_icon: var(--text-primary-color)
    offline_circle: var(--error-color)
    offline_icon: var(--error-color)
router:
  entity: ''
  name: Router
  icon: mdi:router-wireless
  circle_size: 72
  icon_size: 24
  entities:
    status: ''
  colors:
    icon: var(--indigo-color)
    circle: var(--indigo-color)
    bus_line: 'var(--divider-color, #ccc)'
    offline_circle: var(--error-color)
    offline_icon: var(--error-color)
  poe:
    mode: 'off'
    manual_entities: []
    unit: W
    icon: mdi:lightning-bolt
    location: top-left
    color_mode: single
    color: var(--orange-color)
    text_color: var(--card-background-color)
    thresholds:
      - up_to: 15
        color: var(--green-color)
      - up_to: 30
        color: var(--orange-color)
      - color: var(--red-color)
    animate_over_threshold: false
lan:
  entity: ''
  icon: mdi:lan
  circle_size: 56
  icon_size: 20
  colors:
    icon: var(--teal-color)
    circle: var(--teal-color)
    line: var(--primary-text-color)
    offline_circle: var(--error-color)
    offline_icon: var(--error-color)
switch:
  entity: ''
  name: ''
  icon: mdi:switch
  circle_size: 60
  icon_size: 22
  devices_icon: mdi:devices
  entities:
    connected_devices: ''
  colors:
    icon: var(--amber-color)
    circle: var(--amber-color)
    bus_line: 'var(--divider-color, #ccc)'
    offline_circle: var(--error-color)
    offline_icon: var(--error-color)
    devices_circle: var(--purple-color)
    devices_icon: var(--primary-color)
    devices_offline_circle: var(--error-color)
    devices_offline_icon: var(--error-color)
  poe:
    mode: auto
    manual_entities: []
    unit: W
    icon: mdi:lightning-bolt
    location: top-left
    color_mode: single
    color: var(--orange-color)
    text_color: var(--card-background-color)
    thresholds:
      - up_to: 15
        color: var(--green-color)
      - up_to: 30
        color: var(--orange-color)
      - color: var(--red-color)
    animate_over_threshold: false
nodes:
  - name: ''
    switch: null
    homelab:
      entity: sensor.tower_system_status
      name: Tower
      icon: mdi:server
      devices_icon: mdi:devices
      entities:
        connected_devices: ''
      colors:
        icon: var(--deep-purple-color)
        circle: var(--deep-purple-color)
        bus_line: 'var(--divider-color, #ccc)'
        offline_circle: var(--error-color)
        offline_icon: var(--error-color)
        devices_circle: var(--purple-color)
        devices_icon: var(--primary-color)
        devices_line: 'var(--divider-color, #ccc)'
        devices_offline_circle: var(--error-color)
        devices_offline_icon: var(--error-color)
      poe:
        mode: 'off'
        manual_entities: []
        unit: W
        icon: mdi:lightning-bolt
        location: top-right
        color_mode: single
        color: var(--orange-color)
        text_color: var(--card-background-color)
        thresholds:
          - up_to: 15
            color: var(--green-color)
          - up_to: 30
            color: var(--orange-color)
          - color: var(--red-color)
        animate_over_threshold: false
      show_devices_line: true
      containers:
        - entity: switch.tower_vm_homeassistant
          name: ''
          icon: mdi:home-assistant
          location: bottom-right
          color: var(--blue-color)
          icon_color: var(--card-background-color)
          border_color: transparent
          offline_color: 'var(--disabled-text-color, #bdbdbd)'
          offline_icon_color: var(--card-background-color)
          offline_border_color: transparent
          animate_offline: false
        - entity: binary_sensor.pi_hole_status
          name: ''
          icon: mdi:docker
          location: top-right
          color: var(--green-color)
          icon_color: var(--card-background-color)
          border_color: transparent
          offline_color: 'var(--disabled-text-color, #bdbdbd)'
          offline_icon_color: var(--card-background-color)
          offline_border_color: transparent
          animate_offline: false
    access_points: []
    fed_switches: []
  - name: ''
    switch:
      entity: ''
      name: Switch
      icon: mdi:switch
      devices_icon: mdi:devices
      entities:
        connected_devices: ''
      colors:
        icon: var(--amber-color)
        circle: var(--amber-color)
        bus_line: 'var(--divider-color, #ccc)'
        offline_circle: var(--error-color)
        offline_icon: var(--error-color)
        devices_circle: var(--purple-color)
        devices_icon: var(--primary-color)
        devices_line: 'var(--divider-color, #ccc)'
        devices_offline_circle: var(--error-color)
        devices_offline_icon: var(--error-color)
      poe:
        mode: 'off'
        manual_entities: []
        unit: W
        icon: mdi:lightning-bolt
        location: top-right
        color_mode: single
        color: var(--orange-color)
        text_color: var(--card-background-color)
        thresholds:
          - up_to: 15
            color: var(--green-color)
          - up_to: 30
            color: var(--orange-color)
          - color: var(--red-color)
        animate_over_threshold: false
    homelab: null
    access_points: []
    fed_switches: []
  - name: ''
    switch:
      entity: ''
      name: ''
      icon: mdi:switch
      devices_icon: mdi:devices
      entities:
        connected_devices: ''
      colors:
        icon: var(--amber-color)
        circle: var(--amber-color)
        bus_line: 'var(--divider-color, #ccc)'
        offline_circle: var(--error-color)
        offline_icon: var(--error-color)
        devices_circle: var(--purple-color)
        devices_icon: var(--primary-color)
        devices_line: 'var(--divider-color, #ccc)'
        devices_offline_circle: var(--error-color)
        devices_offline_icon: var(--error-color)
      poe:
        mode: 'off'
        manual_entities: []
        unit: W
        icon: mdi:lightning-bolt
        location: top-right
        color_mode: single
        color: var(--orange-color)
        text_color: var(--card-background-color)
        thresholds:
          - up_to: 15
            color: var(--green-color)
          - up_to: 30
            color: var(--orange-color)
          - color: var(--red-color)
        animate_over_threshold: false
    homelab: null
    access_points: []
    fed_switches: []
  - name: Router
    switch: null
    homelab: null
    access_points:
      - entity: input_boolean.router_status
        name: Router
        icon: mdi:router-wireless
        devices_icon: mdi:devices
        is_primary: true
        primary_badge_location: top-left
        show_backhaul_icon: true
        show_primary_badge: false
        connects_to_switch: false
        entities:
          connected_devices: ''
          download: ''
          upload: ''
          backhaul_type: ''
          backhaul_speed: ''
        colors:
          icon: var(--cyan-color)
          circle: var(--cyan-color)
          download: var(--blue-color)
          upload: var(--orange-color)
          line: var(--primary-text-color)
          devices_circle: var(--purple-color)
          devices_icon: var(--primary-color)
          devices_line: var(--purple-color)
          backhaul_icon: var(--secondary-text-color)
          offline_circle: var(--error-color)
          offline_icon: var(--error-color)
          devices_offline_circle: var(--error-color)
          devices_offline_icon: var(--error-color)
          primary_badge: var(--orange-color)
          primary_badge_icon: var(--card-background-color)
          primary_badge_border: transparent
        poe:
          mode: 'off'
          manual_entities: []
          unit: W
          icon: mdi:lightning-bolt
          location: top-right
          color_mode: single
          color: var(--orange-color)
          text_color: var(--card-background-color)
          thresholds:
            - up_to: 15
              color: var(--green-color)
            - up_to: 30
              color: var(--orange-color)
            - color: var(--red-color)
          animate_over_threshold: false
    fed_switches: []
  - name: ''
    switch: null
    homelab: null
    access_points:
      - entity: ''
        name: ''
        icon: mdi:wifi
        devices_icon: mdi:devices
        is_primary: false
        primary_badge_location: top-left
        show_backhaul_icon: true
        show_primary_badge: true
        connects_to_switch: false
        entities:
          connected_devices: ''
          download: ''
          upload: ''
          backhaul_type: ''
          backhaul_speed: ''
        colors:
          icon: var(--cyan-color)
          circle: var(--cyan-color)
          download: var(--blue-color)
          upload: var(--orange-color)
          line: var(--primary-text-color)
          devices_circle: var(--purple-color)
          devices_icon: var(--primary-color)
          devices_line: var(--purple-color)
          backhaul_icon: var(--secondary-text-color)
          offline_circle: var(--error-color)
          offline_icon: var(--error-color)
          devices_offline_circle: var(--error-color)
          devices_offline_icon: var(--error-color)
          primary_badge: var(--orange-color)
          primary_badge_icon: var(--card-background-color)
          primary_badge_border: transparent
        poe:
          mode: 'off'
          manual_entities: []
          unit: W
          icon: mdi:lightning-bolt
          location: bottom-right
          color_mode: single
          color: var(--orange-color)
          text_color: var(--card-background-color)
          thresholds:
            - up_to: 15
              color: var(--green-color)
            - up_to: 30
              color: var(--orange-color)
            - color: var(--red-color)
          animate_over_threshold: false
    fed_switches: []
  - name: ''
    switch: null
    homelab: null
    access_points:
      - entity: ''
        name: ''
        icon: mdi:wifi
        devices_icon: mdi:devices
        is_primary: false
        primary_badge_location: top-left
        show_backhaul_icon: true
        show_primary_badge: true
        connects_to_switch: false
        entities:
          connected_devices: ''
          download: ''
          upload: ''
          backhaul_type: ''
          backhaul_speed: ''
        colors:
          icon: var(--cyan-color)
          circle: var(--cyan-color)
          download: var(--blue-color)
          upload: var(--orange-color)
          line: var(--primary-text-color)
          devices_circle: var(--purple-color)
          devices_icon: var(--primary-color)
          devices_line: var(--purple-color)
          backhaul_icon: var(--secondary-text-color)
          offline_circle: var(--error-color)
          offline_icon: var(--error-color)
          devices_offline_circle: var(--error-color)
          devices_offline_icon: var(--error-color)
          primary_badge: var(--orange-color)
          primary_badge_icon: var(--card-background-color)
          primary_badge_border: transparent
        poe:
          mode: 'off'
          manual_entities: []
          unit: W
          icon: mdi:lightning-bolt
          location: bottom-right
          color_mode: single
          color: var(--orange-color)
          text_color: var(--card-background-color)
          thresholds:
            - up_to: 15
              color: var(--green-color)
            - up_to: 30
              color: var(--orange-color)
            - color: var(--red-color)
          animate_over_threshold: false
    fed_switches: []
  - name: ''
    switch: null
    homelab: null
    access_points:
      - entity: ''
        name: ''
        icon: mdi:wifi
        devices_icon: mdi:devices
        is_primary: false
        primary_badge_location: top-left
        show_backhaul_icon: true
        show_primary_badge: true
        connects_to_switch: false
        entities:
          connected_devices: ''
          download: ''
          upload: ''
          backhaul_type: ''
          backhaul_speed: ''
        colors:
          icon: var(--cyan-color)
          circle: var(--cyan-color)
          download: var(--blue-color)
          upload: var(--orange-color)
          line: var(--primary-text-color)
          devices_circle: var(--purple-color)
          devices_icon: var(--primary-color)
          devices_line: var(--purple-color)
          backhaul_icon: var(--secondary-text-color)
          offline_circle: var(--error-color)
          offline_icon: var(--error-color)
          devices_offline_circle: var(--error-color)
          devices_offline_icon: var(--error-color)
          primary_badge: var(--orange-color)
          primary_badge_icon: var(--card-background-color)
          primary_badge_border: transparent
        poe:
          mode: 'off'
          manual_entities: []
          unit: W
          icon: mdi:lightning-bolt
          location: bottom-right
          color_mode: single
          color: var(--orange-color)
          text_color: var(--card-background-color)
          thresholds:
            - up_to: 15
              color: var(--green-color)
            - up_to: 30
              color: var(--orange-color)
            - color: var(--red-color)
          animate_over_threshold: false
    fed_switches: []
individual_devices:
  - entity: ''
    icon: phu:hubitat
    colors:
      circle: var(--pink-color)
      icon: var(--pink-color)
      offline_circle: var(--error-color)
      offline_icon: var(--error-color)
  - entity: media_player.xbox
    icon: mdi:microsoft-xbox
    colors:
      circle: var(--pink-color)
      icon: var(--pink-color)
      offline_circle: var(--error-color)
      offline_icon: var(--error-color)
  - entity: ''
    icon: phu:appletv-sim
    colors:
      circle: var(--pink-color)
      icon: var(--pink-color)
      offline_circle: var(--error-color)
      offline_icon: var(--error-color)
  - entity: ''
    icon: phu:huawei-solar-inverter
    colors:
      circle: var(--pink-color)
      icon: var(--pink-color)
      offline_circle: var(--error-color)
      offline_icon: var(--error-color)
  - entity: ''
    icon: mdi:television
    colors:
      circle: var(--pink-color)
      icon: var(--pink-color)
      offline_circle: var(--error-color)
      offline_icon: var(--error-color)
  - entity: ''
    icon: mdi:printer
    colors:
      circle: var(--pink-color)
      icon: var(--pink-color)
      offline_circle: var(--error-color)
      offline_icon: var(--error-color)
  - entity: ''
    icon: phu:bambu-lab-alt
    colors:
      circle: var(--pink-color)
      icon: var(--pink-color)
      offline_circle: var(--error-color)
      offline_icon: var(--error-color)
  - entity: ''
    icon: phu:ecowitt
    colors:
      circle: var(--pink-color)
      icon: var(--pink-color)
      offline_circle: var(--error-color)
      offline_icon: var(--error-color)
individual_devices_box_color: var(--divider-color)
individual_devices_box_radius: var(--ha-card-border-radius, 12px)
show_summary: true
animation: true
min_flow_duration: 0.6
max_flow_duration: 6

benm7 · September 16, 2026, 4:51am

v2.4.1 allows you to group Individual devices by SSID/VLAN or AP. For Deco devices is automatically does it based on attributes, I “hope” it will also work for Unify but again testers welcome

steerage250 · September 16, 2026, 9:35am

I have a really basic question:

someone asked previously about what you do for devices that are not in HA already, and asked about helper entities. Could you give an example please?

SteveM1 · September 16, 2026, 6:03pm

Interested that you can automate the display of Deco devices - exactly what I was hoping for. How would you go about setting that up, given that the nodes don’t have a dedicated device to themselves, just things like online, count, speed etc.? Presume that the node name would need to be set in order to pick up connected devices.

Also, if a new node were to be added, would the card pick that up automatically or would it need to be added manually, guessing the latter? This could become really useful, thanks for your efforts!