An Annotorious plugin for drawing arrows. Arrows can be independent annotations, or they can be linked to existing shapes — either on both ends, or on one end only (start or tip). When linked, the relationships are represented in the data model.

Also available: React wrapper

npm install @annotorious/plugin-arrows

import { createImageAnnotator } from '@annotorious/annotorious';
import { mountImagePlugin } from '@annotorious/plugin-arrows';

const anno = createImageAnnotator('sample-image');

const arrowsPlugin = mountImagePlugin(anno, {
  // Plugin options (see below)
});

import { createOSDAnnotator } from '@annotorious/openseadragon';
import { mountOSDPlugin } from '@annotorious/plugin-arrows';

const viewer = OpenSeadragon({
  // OSD init options
});

const anno = createOSDAnnotator(viewer, {
  // Annotorious init options
});

const arrowsPlugin = mountOSDPlugin(anno, viewer, {
  // Plugin options (see below)
});

Once installed, the plugin integrates seamlessly with the Annotorious lifecycle. Arrow annotations trigger the same events as other annotations:

• createAnnotation
• updateAnnotation
• deleteAnnotation
• selectionChanged
• mouseEnterAnnotation
• mouseLeaveAnnotation

By default, the plugin starts enabled and in select mode:

• You can interact with all annotations normally (regular shapes and arrows).
• Clicking an arrow selects it, allowing the user to move it or adjust the start/tip.

To let users draw arrows, switch to draw mode:

arrowsPlugin.setMode('draw');

Users can then:

• Click once for the start and once for the end point, or
• Click and drag from start to end.

ArrowsVisibility can be one of the following:

• ALWAYS – all arrows are visible.
• HOVER_ONLY – arrows appear only when hovering over a connected shape annotation.
• SELECTED_ONLY – arrows appear only when a connected annotation is selected.
• HOVER_OR_SELECT – arrows appear when hovering over or selecting a connected annotation.

Arrow annotations differ from standard Annotorious shapes in two ways:

• They have a motivation field with the value pointing.
• Their target represents the arrow start and end anchors.

An arrow can be independent, with explicit start/end coordinates, or linked to existing annotations.

Example: independent (unlinked) arrow

{
  "id": "aab6d162-0156-461e-b3cd-704ee5061d89",
  "motivation": "pointing",
  "bodies": [],
  "target": {
    "created": "2025-10-20T13:16:56.486Z",
    "selector": {
      "start": { "x": 37.4, "y": 176.6 },
      "end": { "x": 120.3, "y": 80.1 }
    }
  }
}

Example: arrow linked at both ends

{
  "id": "daf0e68a-002b-44fd-9b9c-6c984c992742",
  "motivation": "pointing",
  "bodies": [],
  "target": {
    "created": "2025-10-20T13:18:26.019Z",
    "selector": {
      "start": {
        "annotationId": "617d04b3-1f49-4b65-b684-5e64d90f10be",
        "offset": { "x": -2, "y": 108.8 }
      },
      "end": {
        "annotationId": "e4309c1c-7481-4554-88a3-9ae42166ea5e",
        "offset": { "x": -13, "y": 0.1 }
      }
    }
  }
}

Linked anchors (start or end) reference other annotations by ID. The offset represents the X/Y offset from the center of the linked shape's bounding box, rather than absolute image coordinates.

BSD-3-Clause