Arrow Head Styles

Overview

Arrow shapes support multiple head styles and can render at the end, the start, or both ends.

Access in the Editor

Update the arrow object properties using arrowHead settings and the existing pointerLength/pointerWidth size controls.

Behavior

• arrowHead.style controls the head shape.
• arrowHead.atEnd enables the head at the end of the arrow (default: true).
• arrowHead.atStart enables the head at the start of the arrow (default: false).
• pointerLength and pointerWidth control head size (triangle/diamond use length + width; circle/square use width for size).

Supported Styles

• triangle (default)
• triangle-outline (outline only)
• diamond
• circle
• square
• none (no head rendered)

Example

editor.updateObjectProperty(arrowId, 'arrowHead', {
  style: 'diamond',
  atStart: true,
  atEnd: true,
})