Basic arrows
A few boxes connected with relations, custom anchors and labels.
Dynamic elements
Arrows update automatically as elements and labels change.
Angle lines
Use noCurves to draw right-angle connectors instead of curves.
Straight lines
Use lineStyle="straight" for direct, straight connections.
Anchor offsets
Add spacing between the elements and the start/end of the stroke with offset.
Middle anchor
Anchor relations to the middle of an element.
Custom labels
Render any React node as an arrow label.
Circle ends
Change the end shape from the default arrow to a circle via endShape.
Start markers
Add a marker at the start of the arrow with startMarker.
Styled relations
Customize the stroke color, width and dash pattern per relation.
Interactive
Make arrows selectable with domAttributes, cursor and hitSlop.
Drag & drop
Arrows follow their elements as they are dragged around.