Connect Blocks with Living Lines.
Draw SVG connector lines between any two blocks on the canvas — with multi-point paths, smooth Bézier curves, block anchor points, and animated particle flow driven by live entity state.
- SVG
- Smooth connector lines
- 9
- Anchor points per block
- Bézier
- Curve support
- Live
- Entity-driven animation
Draw Connections Directly on the Canvas
Activate link drawing mode from the header bar, then click a source anchor on one block and drag to the target anchor on another block. The SVG path is created instantly.
Enable link drawing mode
Click the link icon in the header bar to enter link drawing mode. A visual indicator shows the active state.
Click a source anchor
Hover over any block to reveal its 9 anchor points. Click the one you want to start the connection from.
Drag to the target
Drag to another block and release on its target anchor. The SVG connector line is drawn and snapped into place.
Style and animate
Configure the line's appearance and optionally bind its animation or visibility to a Home Assistant entity.
Straight, Stepped, or Curved
Choose from three path rendering modes to match the visual style of your card.
A direct straight line from source anchor to target anchor. Clean and minimal — ideal for tight layouts.
An orthogonal path that routes through horizontal and vertical segments. Follows a clean grid-like structure.
A smooth cubic Bézier curve with configurable control point handles. Creates organic, flowing connections.
Full Visual Control Over Every Line
Each link has its own style properties — color, width, dash pattern, opacity, and more. Every property can be bound to entity state for dynamic visual feedback.
Stroke color
Set the line color using any CSS color value, or bind it to an entity state for dynamic coloring.
Stroke width
Control the line thickness in pixels. Supports entity binding for dynamic width changes.
Dash pattern
Create dashed or dotted lines with a configurable SVG dash array pattern.
Opacity
Set the overall opacity of the link, or bind it to make lines appear/disappear based on entity state.
Arrow markers
Add directional arrow markers at the start, end, or both ends of the connection line.
Particle flow
Enable animated particles flowing along the line path, with configurable speed, size, and color.
Lines That React to Your Home
Bind any link property — color, opacity, animation speed — to a live Home Assistant entity. Visualize energy flows, active connections, or state transitions in real time.
Energy flow visualization
Show power flowing from solar panels to battery to home with animated particles. The flow direction and speed reflect the actual energy readings.
Active connection indicators
Display connection lines between devices only when they are communicating — bound to a binary sensor or connectivity attribute.
State-based coloring
Change link color based on sensor thresholds — green for normal, amber for warning, red for critical — using the same binding modes as style properties.
Bring Your Cards to Life.
Visual entity links are available on all CardBuilder Pro plans — free to start.