Live network diagram ( InfluxDB + Grafana + Mermaid )

Share your Projects!
1

Hi I made live network diagram and wanted to share

1
11897×933 63.1 KB

For this used InfluxDB + Grafana + Mermaid plugin

  1. In Home Assistant make ping binary sensor for every device

  1. In Grafana Addon setting add “jdbranham-diagram-panel” to plugins like this:

       "plugins": [
     "jdbranham-diagram-panel"
   ],

  2. In Grafana add “Diagram” panel

  3. In panel settings>metrics add your ping binary sensors like this:

867×623 73.7 KB

  1. In panel settings>diagram write code for your diagram, here is example of mine:

     graph TD
 linkStyle default interpolate basis
 wan1[<center>DSL 100/10 Mb<br><br><a href='http://10.100.102.1' target='_blank'>10.100.102.1</a></center>]---router{<center>EdgeRouter-X<br><br><a href='https://10.20.30.1' target='_blank'>10.20.30.1</a></center>}
 ip((<center><br>IP<br><br></center>))-.-router
 dns((<center><br>DNS<br><br></center>))-.-router
 wan2[<center>LTE 50/20 Mb<br><br><a href='http://192.168.1.1' target='_blank'>192.168.1.1</a></center>]---router
 router---|100Mb|ap[<center>RT-AC1200<br><br><a href='http://10.20.30.3' target='_blank'>10.20.30.3</a></center>]
 router---|1Gb|pc(<center>PC<br><br>10.20.30.190</center>)
 router---|1Gb|switch[<center>TL-SG105E<br><br><a href='http://10.20.30.2' target='_blank'>10.20.30.2</a></center>]
 subgraph 
 ap-.-cam1(<center>Camera<br><br><a href='http://10.20.30.171' target='_blank'>10.20.30.171</a></center>)
 ap-.-cam2(<center>Camera<br><br><a href='http://10.20.30.172/cgi-bin/status' target='_blank'>10.20.30.172</a></center>)
 ap-.-phone(<center>Phone<br><br>10.20.30.191</center>)
 ap-.-ir(<center>IR<br><br>10.20.30.180</center>)
 end
 subgraph 
 switch---|100Mb|pi1(<center>RPi 3B<br><br><a href='https://10.20.30.150:8123' target='_blank'>10.20.30.150</a></center>)
 switch---|1Gb|pi2(<center>RPi 3B+<br><br><a href='http://10.20.30.151' target='_blank'>10.20.30.151</a></center>)
 switch---|100Mb|nvr(<center>NVR<br><br><a href='http://10.20.30.170' target='_blank'>10.20.30.170</a></center>)
 switch---|1Gb|laptop(<center>Laptop<br><br>10.20.30.192</center>)
 end

Diagram live editor and documentation:

https://mermaidjs.github.io/mermaid-live-editor

UPDATE:

  • Added IP as clickable links
  • Rounded lines, hide indicator, plugin link
11 Likes
2

You are amazing

1 Like
3

@LbDab How does this actually live update? Mine seem to be online even when binary_sensor.ping returns false. In this case the RasPlex host is offline in HA.

graph TD

linkStyle default interpolate basis

router{<center>Telenet Modem<br><br><a href='https://10.20.30.1' target='_blank'>10.20.30.1</a></center>}

subgraph Raspberry Pi's
panorama(<center>Panorama<br><br>192.168.1.142</center>)
rasplex(<center>RasPlex<br><br>192.168.1.160</center>)
end

image
image840×109 13.6 KB

image

4

When color is light green meaning it is not reading state

seems I forgot to mention this part setting threshold options:

Capture

5

Still not seeing anything with that config:
Do the graph elements need the same name as the entity_id?

image
image2521×1085 138 KB

6

Yes, I see yours called “panorama_host” try this:

panorama_host(<center>Panorama<br><br>192.168.1.142</center>)

7

Now it’s working!
I had to use the exact same name in the alias field:

image

1 Like
8

Hi,

Since few month, i’m writing a plugin to draw complexe diagram instead mermaid
Do you know Flowcharting plugin ?

Best regards
Arnaud

1 Like
9

Thanks it looks great, will try it later

10

This is very cool. I don’t have experience with any of those plugins but I’ll have to try them out.

Do you think it’d be possible to add Z-wave or other device status to the diagram?

11

It is possible to add anything to diagram but to see its status there should be sensor for that

It can also be a template sensor if there is no ready one

12

This is awesome, thank you! Couple questions, how did you hide the indicator? I’d like to remove the “1” when a device is up and just use the color threshold.

Also the hyperlinks no longer work, I believe it was a security change in Mermaid. It looks like you can disable it, but I’m not sure where to add this config change?

mermaidAPI.initialize({
securityLevel: ‘loose’
});