Function: Connector()

Connector(from: ConnectorTarget, to: ConnectorTarget, options?: object): ConnectorElement

Creates a reactive visual connector / arrow between two nodes or coordinate points.

Parameters

Parameter	Type	Description
from	ConnectorTarget	-
to	ConnectorTarget	-
options?	{ align?: Align; blur?: number; brightness?: number; className?: string; color?: string; curvature?: number; customPositioned?: boolean; end?: number; endHead?: ConnectorHeadType; endHeadSize?: number; enterDelay?: number; enterDuration?: number; exitDelay?: number; exitDuration?: number; flow?: FlowEffect; fromAnchor?: ElementAnchor | AnchorMode; fromPadding?: number; height?: Size; id?: string; label?: string; labelOffset?: LabelOffset; labelOffsetX?: string | number; labelOffsetY?: string | number; labelPlacement?: LabelPlacement; labelScale?: number; onActivate?: () => void; onDeactivate?: () => void; onMount?: () => void; onUnmount?: () => void; opacity?: number; origin?: ElementAnchor; padding?: number; position?: Position; pulseInterval?: number | PeriodicPulseOptions; radius?: number; rotation?: number; routing?: "straight" | "corner" | "bezier" | "arc"; rowY?: number; scale?: number; size?: Size; start?: number; startHead?: ConnectorHeadType; startHeadSize?: number; strokePattern?: "solid" | "dashed" | "dotted"; strokeWidth?: number; style?: Properties<0 | string & object, string & object>; theme?: Partial<ThemeConfig>; toAnchor?: ElementAnchor | AnchorMode; toPadding?: number; width?: Size; x?: PositionCoord; y?: PositionCoord; }	-
options.align?	Align	-
options.blur?	number	Blur in virtual pixels (default: 0).
options.brightness?	number	Brightness multiplier (default: 1).
options.className?	string	-
options.color?	string	Stroke color of the connector line (default: var(--sr-primary)).
options.curvature?	number	Curvature bow factor for "arc" routing (defaults to 0.2). Positive bows outward, negative bows inward.
options.customPositioned?	boolean	Whether this element manages its own CSS transform / positioning (disables stage translate3d).
options.end?	number	Trim-path end offset from 0.0 to 1.0 for draw-in transitions. When animated (e.g. to(1)), the arrowhead automatically rides the leading edge of the stroke.
options.endHead?	ConnectorHeadType	Head marker at the end/destination endpoint (defaults to "arrow").
options.endHeadSize?	number	Size of the end head marker in virtual canvas pixels (defaults to 16).
options.enterDelay?	number	Delay in seconds before entering scene transition begins.
options.enterDuration?	number	Duration in seconds for entering scene transition.
options.exitDelay?	number	Delay in seconds before exiting scene transition begins.
options.exitDuration?	number	Duration in seconds for exiting scene transition.
options.flow?	FlowEffect	Continuous ambient stroke animation ("none"
options.fromAnchor?	ElementAnchor | AnchorMode	Attachment point on the origin target: an anchor mode, a named face, or an [x, y] percentage point (defaults to "auto").
options.fromPadding?	number	Custom perimeter clearance at the origin card.
options.height?	Size	Height in stage units or CSS length (default: content size).
options.id?	string	-
options.label?	string	Optional text label rendered at the connector's midpoint or specified placement.
options.labelOffset?	LabelOffset	Offset to nudge the label ([x, y] in stage units, or a CSS length). Reactive.
options.labelOffsetX?	string | number	Horizontal offset for the label in stage units, or a CSS length. Reactive.
options.labelOffsetY?	string | number	Vertical offset for the label in stage units, or a CSS length. Reactive.
options.labelPlacement?	LabelPlacement	Position of the label along the path ("start"
options.labelScale?	number	Scale factor for the label badge and text (default: 1). Reactive.
options.onActivate?	() => void	-
options.onDeactivate?	() => void	-
options.onMount?	() => void	-
options.onUnmount?	() => void	-
options.opacity?	number	Whole-element opacity from 0 to 1 (default: 1).
options.origin?	ElementAnchor	Which point of the element sits on its coordinate (default: "top-left").
options.padding?	number	Outer clearance padding around card perimeters in virtual pixels (defaults to 6).
options.position?	Position	-
options.pulseInterval?	number | PeriodicPulseOptions	Continuous periodic pulse configuration or interval in seconds (e.g. 1.5 or { interval: 2.0, color: '#38bdf8' }).
options.radius?	number	Corner radius for rounded box intersections (defaults to 12).
options.rotation?	number	Rotation in degrees (default: 0).
options.routing?	"straight" | "corner" | "bezier" | "arc"	Routing style: straight line, 90° orthogonal corners, smooth cubic Bézier, or single-curvature circular arc.
options.rowY?	number	Fixed message row in stage units (default: undefined, automatic routing).
options.scale?	number	Scale multiplier (default: 1).
options.size?	Size	Both dimensions in stage units or CSS length (default: unset).
options.start?	number	Trim-path start offset from 0.0 to 1.0.
options.startHead?	ConnectorHeadType	Head marker at the start/origin endpoint (defaults to "none").
options.startHeadSize?	number	Size of the start head marker in virtual canvas pixels (defaults to 16).
options.strokePattern?	"solid" | "dashed" | "dotted"	Stroke pattern (default: "solid").
options.strokeWidth?	number	Stroke width in virtual pixels (defaults to 3).
options.style?	Properties<0 | string & object, string & object>	-
options.theme?	Partial<ThemeConfig>	-
options.toAnchor?	ElementAnchor | AnchorMode	Attachment point on the destination target: an anchor mode, a named face, or an [x, y] percentage point (defaults to "auto").
options.toPadding?	number	Custom perimeter clearance at the destination card.
options.width?	Size	Width in stage units or CSS length (default: content size).
options.x?	PositionCoord	Horizontal position in stage units (default: 0).
options.y?	PositionCoord	Vertical position in stage units (default: 0).

Returns

ConnectorElement