Line or Connection Element to create interactive flowchart like diagrams within a Picture Element?

Share your Projects! Dashboards & Frontend
1

I was wondering if anyone has managed to create a line element maybe a custom card, that could be used to act as representation of a network connection between two devices.
I can use state-badges to represent different devices that are online(using ping).

I would like to then show their connection to other devices on the network such as servers, firewalls, waps, routers(also showing their states in a diagram using ping).

network_diagram
network_diagram803Ă—552 23.3 KB

My goal is to represent my overall network in a visual diagram and its current state.
So far I have manages to do that using state-badges and changing their color from green (online) to red (offline). I would prefer not to have to create image elements representing “lines” to show the various inter-connections since that would mean creating an entire library of lines at of different lengths and orientations.

Hoping some of you clever HA gurus out their have figured out a clever way to do something like this.
Thanks for any help/suggestions!

2

I’m in progress of making my network map for the third time now

at first did it with grafana and diagram plugin but it is too simple and not customizable,
then did it with grafana and flowcharting plugin but its too slow and lagging,
now making it from floorplan card and svg image this seems working fastest than others but creating svg image and naming all ID’s takes me so long hopefully it will worth it

another option thought of is making it with custom button card cause you can embed anything inside it like svg line that changes colors

1 Like
3

Thanks, I think I will look at the custom button card option and see If I can make that work with lines :+1:

4

Hi

Did you get anywhere with the custom button card? as I was looking to do something similar.

Thanks