This project was created entirely with the assistance of AI tools.
This project was initiated and maintained by:
Email: leonidostrovski@gmail.com
Country: Israel
All source code, architecture, optimization, and documentation were generated with the assistance of AI tools.
Human work was applied for integration, testing, debugging, and verification.
A Home Assistant Lovelace Card for Visualizing Groups and Hierarchies
groups-visualizer is an interactive Lovelace custom card that displays Home Assistant groups, switches, lights, fans, sensors, wrappers, and hierarchical relationships as clean area-aware graph diagrams.
The card automatically reads:
- Entity relationships
- Areas
- Entity registry
- Label registry
- Wrapper pairs (light -> switch mappings)
- Voice labels and aliases
and converts them into a zoomable, multi-layer DAG graph.
- Open Home Assistant.
- Go to: HACS > Frontend > Custom Repositories.
- Add this repository as a Custom Repository with category: "Lovelace".
- Install Groups Visualizer from HACS.
- Restart Home Assistant if required.
To use the Groups Visualizer, create a new dashboard view:
- Go to: Settings > Dashboards.
- Select the dashboard where the card should appear.
- Click the three-dots menu (top right) > Edit Dashboard.
- Click + Add View.
- In "View Type", select: Panel (single card).
- Name the view, for example:
Groups Visualizer. - Save the view.
Add the card:
- Click Add Card.
- Choose Manual.
- Paste:
type: custom:groups-visualizer
show_domains: {}
show_voice_labels: true- Download the latest ZIP release from GitHub.
- Extract the
dist/folder. - Copy it into:
/config/www/community/groups-visualizer/
- Add this resource in Home Assistant:
Settings > Dashboards > (three dots) > Resources > Add Resource
Resource URL:
/local/community/groups-visualizer/groups-visualizer.js
Type must be: JavaScript Module
- Add the card manually to any dashboard:
type: custom:groups-visualizer
show_domains: {}
show_voice_labels: true- Auto-generated graphs for groups and nested groups
- Wrapper-pair detection (light wrapping switch)
- Cross-area routing with corridor separation
- Smooth edges and arrowheads
- Clickable ON/OFF badges
- Nodes grouped visually by Home Assistant Areas
- Styled area boxes (labels, stripes, glow)
- Automatic foreignObject height measurement
- Dagre hierarchical layout
- Tabs by domain (Lights, Switches, Groups, etc.)
- Sub-tabs for each root group
- Rebuild / Full Rebuild buttons
- Automatic state refresh (no rebuild)
- Toggle entities directly from the graph
- Click-to-copy:
- Entity ID
- Friendly name
- Voice label
- Aliases
- Built using Vite
- Produces:
- groups-visualizer.js (stable)
- groups-visualizer..js (content-hashed)
- groups-visualizer..js (versioned)
- Adds auto timestamp banner
groups-visualizer/
+-- dist/ # Build output
¦ +-- groups-visualizer.js
¦ +-- groups-visualizer.<hash>.js
¦ +-- groups-visualizer.<version>.js
+-- src/
¦ +-- index.js # Main Lovelace card (UI, tabs, rebuild)
¦ +-- card-styles.js # All card styles
¦ +-- card-data.js # Loads states, registries, builds tab structure
¦ +-- card-actions.js # Rendering and state refresh
¦ +-- ha-api.js # Entity utilities and helpers
¦ +-- ha-node-table.js # Node HTML generator
¦ +-- graph.js # Graph orchestrator and canvas
¦ +-- graph-layout.js # Dagre layout generator
¦ +-- graph-render.js # SVG rendering engine
¦ +-- graph-measure.js # DOM height measurement engine
¦ +-- constants.js # Shared constants
+-- hacs.json # HACS metadata
+-- LICENSE # MIT License
+-- package.json # Project metadata
+-- README.md # Documentation
This project is licensed under the MIT License.
See the included LICENSE file for full details.
This project — including code, structure, and documentation — was generated with the assistance of AI tools.