Lines & Connectors

Connect shapes with lines and arrows to show flow, relationships, and dependencies in your diagrams.

Connector Types

Type	Description	Use Case
`line`	Simple line without arrowhead	Connections, separators
`arrow`	Line with arrowhead at end	Flow direction, sequence
`bidirectionalArrow`	Arrows at both ends	Two-way relationships

Position System

Lines use x, y as the start point. w and h define a vector to the end point:

Start point: (x, y)
End point: (x + w, y + h)

Horizontal Line

Set h: 1 (nearly zero) for a horizontal line:

// Horizontal arrow: (100, 200) → (300, 200)
{
  "type": "arrow",
  "id": "arrow-h",
  "x": 100,
  "y": 200,
  "w": 200,
  "h": 1
}

Vertical Line

Set w: 1 for a vertical line:

// Vertical arrow: (200, 100) → (200, 300)
{
  "type": "arrow",
  "id": "arrow-v",
  "x": 200,
  "y": 100,
  "w": 1,
  "h": 200
}

Diagonal Line

Set both w and h for diagonal lines:

// Diagonal arrow: (100, 100) → (300, 200)
{
  "type": "arrow",
  "id": "arrow-diag",
  "x": 100,
  "y": 100,
  "w": 200,
  "h": 100
}

Negative Values

Use negative w or h to draw lines going left or up.

Minimum Dimension Requirement

Always use at least 1 for both w and h. Using 0 may cause rendering issues. For vertical lines use w: 1, for horizontal lines use h: 1.

Perfectly Straight Lines

For org charts or diagrams requiring clean, straight connections, set "roughness": 0 and "bowing": 0 in the options to disable the hand-drawn sketch effect.

Styling Lines

Property	Default	Description
`stroke`	"#000000"	Line color
`strokeWidth`	2	Line thickness (1-10)
`roughness`	1.5	Sketch effect (0-3). Set to 0 for straight lines.
`bowing`	1	Line curvature (0-3). Set to 0 for straight lines.

{
  "type": "arrow",
  "id": "styled-arrow",
  "x": 100, "y": 100, "w": 150, "h": 1,
  "options": {
    "stroke": "#3b82f6",
    "strokeWidth": 3,
    "roughness": 1
  }
}

Connecting Shapes

To connect two shapes, calculate the line start and end points based on shape positions:

{
  "elements": [
    // Box A at (100, 100), 120×60
    { "type": "rectangle", "id": "box-a", "x": 100, "y": 100, "w": 120, "h": 60 },
    { "type": "text", "id": "label-a", "x": 100, "y": 120, "w": 120, "h": 20, "text": "Step 1", "align": "center" },
    
    // Box B at (350, 100), 120×60
    { "type": "rectangle", "id": "box-b", "x": 350, "y": 100, "w": 120, "h": 60 },
    { "type": "text", "id": "label-b", "x": 350, "y": 120, "w": 120, "h": 20, "text": "Step 2", "align": "center" },
    
    // Arrow from right edge of A (220,130) to left edge of B (350,130)
    { "type": "arrow", "id": "connection", "x": 220, "y": 130, "w": 130, "h": 1 }
  ]
}