Connectors

Connector Types

Smart Binding

Connectors can bind to shapes, automatically maintaining their connection when shapes are moved, resized, or rotated.

How to Bind

1. Select a connector tool (Line or Arrow)
2. Hover over a shape until you see binding points
3. Click and drag from the binding point
4. Drag to another shape's binding point
5. Release to complete the connection

Arrow Styles

Customize arrow appearance with different head and tail styles:

Arrowhead Types

Bidirectional Arrows

Enable arrowheads on both ends for bidirectional relationships. Set both start and end styles to create two-way arrows.

Bezier Curves

Create smooth, flowing curves with precise control over the path shape.

Editing Bezier Curves

1. Draw the initial curve by clicking start and end points
2. Select the curve to reveal control handles
3. Drag control points to adjust the curve shape
4. Control handles affect the curve's direction and steepness

Line Routing

Choose how connectors navigate between shapes:

Automatic spacing & avoidance

Connectors space themselves out automatically — there is nothing to turn on:

• Fan-in spreads into ports. When several connectors meet the same side of a shape, they land on evenly spaced points along that edge instead of stacking on one spot, ordered so the lines don't cross.
• Bundles separate. Two connectors between the same pair of shapes — or one in each direction — get their own lanes, so both arrowheads stay visible.
• Ports follow your shapes. Move a shape to the other side and the endpoints hop to the edge facing it. On circles, diamonds and other non-rectangular shapes the points sit on the real outline.
• Elbow connectors avoid each other. An orthogonal connector steers onto a neighbouring lane rather than running along the top of another connector. Lines still cross where a diagram needs them to — only overlapping along each other is avoided.

Styling Options

Common Use Cases

Flowcharts

Use arrows to show process flow direction. Dashed lines indicate alternate paths.

Architecture Diagrams

Use different arrowhead styles to indicate data flow direction. Bidirectional arrows for two-way communication.

Mind Maps

Curved lines create organic, flowing connections between nodes. No arrowheads needed for hierarchical relationships.

Sequence Diagrams

Solid arrows for synchronous calls, dashed arrows for responses. Use orthogonal routing for clean, professional diagrams.

Keyboard Shortcuts

Scripting (API)

Connectors are created through the global window.Yappy (usable as Yappy). Line-like helpers take the two endpoints (x1, y1, x2, y2) rather than a bounding box:

// Straight line, arrow, and bezier curve
Yappy.createLine(80, 80, 320, 80, { strokeColor: '#1e1e1e', strokeWidth: 2 });
Yappy.createArrow(80, 140, 320, 140);
Yappy.createBezier(80, 220, 320, 220);

// Arrowheads: startArrowhead / endArrowhead
// 'arrow' | 'triangle' | 'dot' | 'circle' | 'bar' | 'diamond' | 'diamondFilled' | 'crowsfoot' | null
Yappy.createArrow(80, 300, 320, 300, {
  startArrowhead: 'dot',
  endArrowhead: 'triangle',
  strokeStyle: 'dashed',
});

Connecting two shapes, and the shape of the line

Yappy.connect(sourceId, targetId, opts?) binds a connector between two elements so it follows them when they move. It defaults to curveType: 'bezier' — a gentle S-curve that leaves and arrives square to the boxes. For UML and org-chart style diagrams, where a straight line is the conventional form, ask for one explicitly:

const a = Yappy.createRectangle(400, 100, 160, 60);
const b = Yappy.createRectangle(150, 400, 160, 60);

Yappy.connect(a, b);                                  // bezier (the default)
Yappy.connect(a, b, { curveType: 'straight' });        // straight line
Yappy.connect(a, b, { curveType: 'elbow' });           // right-angle jog

// UML relationships read from the arrowhead
Yappy.connect(a, b, { curveType: 'straight', endArrowhead: 'triangle' });      // generalization
Yappy.connect(a, b, { curveType: 'straight', startArrowhead: 'diamond' });     // aggregation

In the text DSL the same choice is a -> b { curveType: straight }; plain -> and -- use the bezier default, and ~> asks for a curve explicitly.