Connections & Edges

Learn about different edge types, styles, colors, and interactive features.

Edge Types

kaykay supports three edge routing types:

Bezier - Smooth curved lines (default)
Step - Right-angle routing
Straight - Direct lines

Edge Styles

Solid - Continuous line
Dashed - Dashed pattern
Dotted - Dotted pattern
Animated - Moving dashes

Create Custom Edge

Type

Style

Color

Animated

Interactions

Right-click edge - Context menu
Ctrl+click edge - Add waypoint
Drag waypoint - Reposition
Ctrl+click waypoint - Remove it
Select + Delete - Remove edge

const edges = [
  {
    id: 'e1',
    source: 'node-1',
    source_handle: 'out',
    target: 'node-2',
    target_handle: 'in',
    type: 'bezier',
    style: 'solid',
    color: '#888888',
    animated: false
  }
];

Node A

Node B

Node C

Node D

Output