# mariofritzer/warmwasser-schema-card architecture

> Architecture diagram of the GitHub repository mariofritzer/warmwasser-schema-card, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mariofritzer/warmwasser-schema-card
- Repository: https://github.com/mariofritzer/warmwasser-schema-card

## Overview

Warmwasser Schema Card is a single-file Home Assistant dashboard card for configuring and displaying a live, animated hydraulic-system diagram. The workflow is dashboard configuration, reading configured Home Assistant entities, rendering the system and its status in the browser, and dispatching supported clicks as Home Assistant service calls. README capabilities are represented as diagram branches; the sampled source is partial, so internal wiring beyond the visible render, patch, and click behavior is not inferred.

Main entry points: [`warmwasser-schema-card.js`](https://github.com/mariofritzer/warmwasser-schema-card/blob/main/warmwasser-schema-card.js) (Animated diagram)

## Diagram (Mermaid)

```mermaid
flowchart TD

node_user(("Dashboard user"))
node_ha["Home Assistant"]
node_editor["Visual editor"]
node_config["Card configuration"]
node_entities[("Configured entities")]
node_card["Card runtime"]
node_status["Status calculations"]
node_diagram["Animated diagram"]
node_tank["Tank and sensors"]
node_sources["Heat sources"]
node_distribution["Water and circuits"]
node_extras["Energy and indicators"]
node_interaction["Card interactions"]
node_services["Home Assistant services"]

node_user -->|"configures"| node_editor
node_editor -->|"produces"| node_config
node_ha -->|"hosts"| node_card
node_config -->|"configures"| node_card
node_card -->|"reads states"| node_entities
node_card -->|"calculates"| node_status
node_status -->|"drives rendering"| node_diagram
node_tank -->|"renders in"| node_diagram
node_sources -->|"renders in"| node_diagram
node_distribution -->|"renders in"| node_diagram
node_extras -->|"renders in"| node_diagram
node_diagram -->|"displays to"| node_user
node_user -->|"clicks"| node_interaction
node_interaction -->|"calls"| node_services
node_services -->|"dispatches to"| node_ha

click node_editor "https://github.com/mariofritzer/warmwasser-schema-card/blob/main/warmwasser-schema-card.js"
click node_config "https://github.com/mariofritzer/warmwasser-schema-card/blob/main/warmwasser-schema-card.js"
click node_card "https://github.com/mariofritzer/warmwasser-schema-card/blob/main/warmwasser-schema-card.js"
click node_status "https://github.com/mariofritzer/warmwasser-schema-card/blob/main/warmwasser-schema-card.js"
click node_diagram "https://github.com/mariofritzer/warmwasser-schema-card/blob/main/warmwasser-schema-card.js"
click node_tank "https://github.com/mariofritzer/warmwasser-schema-card/blob/main/warmwasser-schema-card.js"
click node_sources "https://github.com/mariofritzer/warmwasser-schema-card/blob/main/warmwasser-schema-card.js"
click node_distribution "https://github.com/mariofritzer/warmwasser-schema-card/blob/main/warmwasser-schema-card.js"
click node_extras "https://github.com/mariofritzer/warmwasser-schema-card/blob/main/warmwasser-schema-card.js"
click node_interaction "https://github.com/mariofritzer/warmwasser-schema-card/blob/main/warmwasser-schema-card.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_user toneBlue
class node_ha,node_services toneIndigo
class node_editor,node_config,node_card,node_status,node_diagram,node_tank,node_sources,node_distribution,node_extras,node_interaction toneTeal
class node_entities toneAmber
```

## Components

### Other components

- **Dashboard user**
- **Home Assistant**
- [Visual editor](https://github.com/mariofritzer/warmwasser-schema-card/blob/main/warmwasser-schema-card.js): `warmwasser-schema-card.js`
- [Card configuration](https://github.com/mariofritzer/warmwasser-schema-card/blob/main/warmwasser-schema-card.js): `warmwasser-schema-card.js`
- **Configured entities**
- [Card runtime](https://github.com/mariofritzer/warmwasser-schema-card/blob/main/warmwasser-schema-card.js): `warmwasser-schema-card.js`
- [Status calculations](https://github.com/mariofritzer/warmwasser-schema-card/blob/main/warmwasser-schema-card.js): `warmwasser-schema-card.js`
- [Animated diagram](https://github.com/mariofritzer/warmwasser-schema-card/blob/main/warmwasser-schema-card.js): `warmwasser-schema-card.js`
- [Tank and sensors](https://github.com/mariofritzer/warmwasser-schema-card/blob/main/warmwasser-schema-card.js): `warmwasser-schema-card.js`
- [Heat sources](https://github.com/mariofritzer/warmwasser-schema-card/blob/main/warmwasser-schema-card.js): `warmwasser-schema-card.js`
- [Water and circuits](https://github.com/mariofritzer/warmwasser-schema-card/blob/main/warmwasser-schema-card.js): `warmwasser-schema-card.js`
- [Energy and indicators](https://github.com/mariofritzer/warmwasser-schema-card/blob/main/warmwasser-schema-card.js): `warmwasser-schema-card.js`
- [Card interactions](https://github.com/mariofritzer/warmwasser-schema-card/blob/main/warmwasser-schema-card.js): `warmwasser-schema-card.js`
- **Home Assistant services**

## Connections

- Dashboard user → Visual editor: configures
- Visual editor → Card configuration: produces
- Home Assistant → Card runtime: hosts
- Card configuration → Card runtime: configures
- Card runtime → Configured entities: reads states
- Card runtime → Status calculations: calculates
- Status calculations → Animated diagram: drives rendering
- Tank and sensors → Animated diagram: renders in
- Heat sources → Animated diagram: renders in
- Water and circuits → Animated diagram: renders in
- Energy and indicators → Animated diagram: renders in
- Animated diagram → Dashboard user: displays to
- Dashboard user → Card interactions: clicks
- Card interactions → Home Assistant services: calls
- Home Assistant services → Home Assistant: dispatches to