Canvas

Edge

A labelled connector between two points: bowed curve, open arrowhead, label riding the curve.

• Provide from, to, label (lowercase, ≤ 4 words), variant solid (direct/causal) or dashed (associative); bow scales the curve.
• Only draw a connector when the relationship teaches something. Inside a map use VisualMap, which anchors connectors to the rings.

Props

export interface EdgeProps {
  from: Point;
  to: Point;
  label?: string;
  variant?: 'solid' | 'dashed';
  width?: number;
  height?: number;
  bow?: number;
  arrow?: boolean
}

Use

import { Edge } from '@visualli/design-system/components';

Source: components/src/ · Guidelines: components/catalog/Edge/README.md