EdgePrimitive

stable

SVG connection line between graph nodes

import { EdgePrimitive } from "@nodus/design-system"

Loading demo…

Props

Prop	Type	Default	Description
`id`req	`string`	—	Unique edge identifier
`x1`req	`number`	—	Start X coordinate
`y1`req	`number`	—	Start Y coordinate
`x2`req	`number`	—	End X coordinate
`y2`req	`number`	—	End Y coordinate
`weight`	`"thin" \| "medium" \| "thick"`	"thin"	Line thickness
`type`	`"solid" \| "dashed" \| "animated"`	"solid"	Line style
`direction`	`"none" \| "forward" \| "backward" \| "bidirectional"`	"none"	Arrow direction

idrequired

Type stringDefault —

Unique edge identifier

x1required

Type numberDefault —

Start X coordinate

y1required

Type numberDefault —

Start Y coordinate

x2required

Type numberDefault —

End X coordinate

y2required

Type numberDefault —

End Y coordinate

weight

Type "thin" | "medium" | "thick"Default "thin"

Line thickness

type

Type "solid" | "dashed" | "animated"Default "solid"

Line style

direction

Type "none" | "forward" | "backward" | "bidirectional"Default "none"

Arrow direction

MobileWorks As-Is

SVG path renders in its parent container. Pan/zoom on mobile requires explicit touch handling by the parent graph component.

Design Rationale

This component was designed to express:

Draggable graph node with status-driven styling and pulse animation

Force-directed or grid layout engine for node graphs

Was this helpful?