tb-energy-flow-card – Visual Solar Energy Flow Card for Home Assistant

🧭 tb-energy-flow-card

"Visually display solar energy power flow in Home Assistant. Supports inverter, grid, battery, micro, load..."

🔧 Main features

• "SVG energy diagram with a fixed, visually appealing layout."
• "Displays 5 components: Solar, Grid, Battery, Micro Inverter, Load."
• "Current flow animation follows the actual direction; can reverse direction for Grid and Battery."
• "Lines and highlights can have their colors customized."
• "Supports Dark mode."
• "Allows renaming, changing icons, images, font sizes, and positions of each component."
• "Supports a central inverter image and custom inverter image size."

⚙️ Installation

"Go to the HACS section of your Home Assistant, click the 3-dot button on the right, and select Add custom repository."

"Paste this link into the repository URL field with the category set to Dashboard. Then click Add"

https://github.com/tongtbgl/tb-energy-flow-card

"After adding, search for tb energy flow card and it will appear for you to download."

Sample code

type: custom:tb-energy-flow-card
show_micro: true
show_solar2: true
solar: sensor.esp_inverter_pv1_power
solar2: sensor.esp_inverter_pv2_power
grid: sensor.esp_inverter_grid_ct_power
battery: sensor.esp_inverter_battery_power
entity_micro: sensor.esp_inverter_aux_power
load: sensor.esp_inverter_load_power
soc: sensor.soc_giao_tiep
grid_status: binary_sensor.esp_inverter_grid_connected_status
grid_status_x: 520
grid_status_y: 180
name_solar: String 1
name_solar2: String 2
name_grid: EVN Grid
name_battery: Battery
name_micro: Deye OnGrid
name_load: Usage
image_solar: >-
  https://png.pngtree.com/png-vector/20240720/ourmid/pngtree-sustainable-solar-water-pump-on-transparent-background-png-image_12963933.png
image_solar2: >-
  https://png.pngtree.com/png-vector/20240720/ourmid/pngtree-sustainable-solar-water-pump-on-transparent-background-png-image_12963933.png
image_grid: >-
  https://png.pngtree.com/png-vector/20250105/ourmid/pngtree-d-model-of-a-steel-transmission-tower-with-power-lines-on-png-image_15054625.png
image_battery: https://bachtran.net/ha/img/battery.png
image_micro: https://tpenergy.com.vn/wp-content/uploads/2023/10/3-1-1.png
image_load: https://bachtran.net/ha/img/home.png
inverter_image: https://bachtran.net/wp-content/uploads/2025/07/deye1.png
line_color: "#ededed"
line_width: 3
dot_color: "#34eb49"
invert_grid: true
invert_battery: true
decimal_precision: false
dot_size: 8
animation_duration: auto
image_y_offset_top: -50
image_y_offset_bottom: -95
image_size_top: 100
image_size_bottom: 150
inverter_image_width: 800
inverter_image_height: 200
label_y_offset_top: -50
value_y_offset_top: -75
label_y_offset_bottom: 90
value_y_offset_bottom: 65
font_size_label: 18
font_size_value: 25
font_weight_value: 1000
temp:
  ac: sensor.esp_inverter_radiator_temperature
  dc: sensor.esp_inverter_dc_transformer_temperature
temp_position:
  ac:
    x: 380
    "y": 330
  dc:
    x: 220
    "y": 330
temp_font:
  size: 12
  weight: normal

Other display styles

With 2 PV strings

"To do this, change the image URL and entity of the micro inverter to the image of the PV string with the PV2 entity."

Without micro inverter

"To do this, change show_micro: true to show_micro: false."

Customization

"You can customize the following parameters"

Support me to have more motivation to continue development:

"https://bachtran.net/donate/ Thank you all"