Evening all,
I’m sure some of you have done something similar and I have to admit I received inspiration from the Aqara “Spatial Tree” graph. I’ve been building out a pretty involved smart home around Aqara hardware and wanted a better way to see how everything is actually connected — not just a flat list of entities in HA, but a real map of what controls what, what triggers what, and what’s physically connected to which hub. The HA UI doesn’t give you that. So I built one.
Here’s what it looks like in action:
Please note that the below content is AI generated but all development was personally completed by me. It’s just easier to point the agent to my code and summarize then it is for me to type it all out.
What it is
It’s a force-directed graph — nodes are devices and entities, edges are relationships. You can switch between 2D and 3D. In 3D mode you get orbit/spin navigation with labeled floating spheres. In 2D it’s a flat draggable canvas with zoom and pan.
Every node is live. Colors update in real time as states change. When a light turns on, the node brightens. When something goes unavailable, it dims out. Click any node and you get a side panel showing the current state, attributes (brightness, temperature, preset mode, etc.), and direct controls — toggle a switch, activate a scene, change a thermostat preset, trigger an automation.
The graph I’m showing here is just the Living Room, which is heavily Aqara-loaded:
- Aqara FP2 presence sensor (shows binary occupancy + light level as separate entity nodes)
- Aqara W200 thermostat (climate entity + temp sensor + humidity sensor + occupancy all hanging off the same device hub node)
- Aqara Zigbee lights — two ceiling fixtures and two sconces, all Matter-paired through my M3 hub
- Aqara P100 door entry sensor (state + battery)
- Aqara 2-gang switch (controls ceiling fan and patio light as separate event entities)
Beyond the Aqara gear there’s a Samsung TV, a couple Zigbee plug switches, an Amazon Echo, and then all the HA logic on top — automations, scenes, and scripts — shown as their own node types with edges pointing to what they control or trigger.
How the data works
Live state is pulled entirely over the HA WebSocket API (ws://ha-ip:8123/api/websocket). This matters because the page is served from my NAS and the REST API is blocked by CORS — the WebSocket doesn’t have that restriction. On connect it authenticates with a Long-Lived Access Token, sends a get_states request to load everything at once, then subscribes to state_changed events for live updates. No polling, no page refreshes. When HA fires a state change, the graph updates within a second.
Controls also go through the same WebSocket using call_service. Click “On” on a light node and it sends light/turn_on directly to HA over the existing connection. Same for scene activation, thermostat preset changes, automation triggers — all live.
How it’s hosted
Static HTML file, no backend, no dependencies to install. Three.js and 3d-force-graph load from CDN. The file lives on my ASUS NAS (http://nas-ip/ha-graph/) and I hit it from any browser on the local network. That’s it — one file, served by the NAS web server, talks directly to HA over WebSocket.
What’s next
Right now it’s just the living room. The plan is to expand this room by room — Scuba Shop is next since it has a lot of varied Aqara gear and its own alarm zone — and eventually build a whole-home view where each room is a node that expands when you click it.
I also have my home blueprints with room dimensions that I am thinking of overlaying for a device placement map. This would be a separate tab, not part of the 2D or 3D graph. Wondering if there is a way to automatically map out device location based on zigbee or wifi signal strength and direction to the mesh nodes. If anyone has any ideas here, would love to hear them.
