Connector

A connector is a line element that connects two points or items on the project map. Connectors support multiple line styles (straight, angled, curved) and customizable decorators (arrows, circles) at the endpoints.

Item type: connector

Properties

Property	Type	Required	Updatable	Default	Description
position	object	No	—	—	Ignored for connectors. Position is determined by startPoint and endPoint.
size	object	No	—	—	Ignored for connectors. Size is calculated automatically.
scale	number	No	—	—	Ignored for connectors.
angle	number	No	—	—	Ignored for connectors.
type	string	No	Yes	"Straight"	Line type: "Straight", "Angled", or "Curved".
strokeColor	string	No	Yes	Accent color	Stroke color as a hex string (e.g., "#FF0000").
strokeThickness	number	No	Yes	3	Line thickness in pixels. Must be greater than 0.
cornerPoints	array	No	Yes	[]	Array of corner points for "Angled" connectors. Each point has x and y fields.
radius	number	No	Yes	0.5	Corner radius for "Angled" connectors, from 0.1 to 1.
startPoint	object	Yes	Yes	—	Start point configuration. See Connector Point below.
endPoint	object	Yes	Yes	—	End point configuration. See Connector Point below.

Connector Point

Both startPoint and endPoint use the ConnectorPointDto structure:

Property	Type	Required	Default	Description
edge	boolean	No	true	With itemId: the end sits on the item's edge. Set it to false for an end that is not attached to an item.
position	object	Free ends only	—	With itemId: a point relative to the item's box, x and y from 0 to 1 ({ x: 0.5, y: 0 } is the middle of the top side). Leave it out to place the end in the middle of the side that faces the other end. Without itemId: the end's position on the map.
itemId	string (GUID)	No	null	ID of an item to attach to. When specified, the connector follows the item.
decorator	string	No	"ArrowLine"	Endpoint decorator: "None", "Arrow", "ArrowLine", or "Circle".

Line Types

• Straight: Direct line between start and end points
• Angled: Polyline with 90-degree angles (uses cornerPoints and radius)
• Curved: Smooth cubic Bézier curve

Decorators

• None: No decorator
• Arrow: Filled arrow
• ArrowLine: Arrow outline
• Circle: Circle at the endpoint

Create

Creates a new connector item in the project.

POST /api/v2/projects/{projectId}/item/{parent}/connector

curl

curl -X POST "https://api.deon.cloud/api/v2/projects/{projectId}/item/inbox/connector" \
  -H "Authorization: Bearer <token>" \
  -H "Content-Type: application/json" \
  -d '{
    "type": "Straight",
    "strokeColor": "#0078D4",
    "strokeThickness": 2,
    "startPoint": {
      "edge": false,
      "position": { "x": 100, "y": 100 },
      "decorator": "None"
    },
    "endPoint": {
      "edge": false,
      "position": { "x": 300, "y": 200 },
      "decorator": "ArrowLine"
    }
  }'

JavaScript

const response = await fetch(
  `https://api.deon.cloud/api/v2/projects/${projectId}/item/inbox/connector`,
  {
    method: "POST",
    headers: {
      Authorization: `Bearer ${token}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      type: "Straight",
      strokeColor: "#0078D4",
      strokeThickness: 2,
      startPoint: {
        edge: false,
        position: { x: 100, y: 100 },
        decorator: "None",
      },
      endPoint: {
        edge: false,
        position: { x: 300, y: 200 },
        decorator: "ArrowLine",
      },
    }),
  }
);

const result = await response.json();
console.log(result.itemId); // "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"

Update

Updates an existing connector item.

PATCH /api/v2/projects/{projectId}/item/connector/{itemId}

curl

curl -X PATCH "https://api.deon.cloud/api/v2/projects/{projectId}/item/connector/{itemId}" \
  -H "Authorization: Bearer <token>" \
  -H "Content-Type: application/json" \
  -d '{
    "properties": {
      "strokeColor": "#FF5733",
      "strokeThickness": 4,
      "type": "Curved"
    }
  }'

JavaScript

const response = await fetch(
  `https://api.deon.cloud/api/v2/projects/${projectId}/item/connector/${itemId}`,
  {
    method: "PATCH",
    headers: {
      Authorization: `Bearer ${token}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      properties: {
        strokeColor: "#FF5733",
        strokeThickness: 4,
        type: "Curved",
      },
    }),
  }
);

const result = await response.json();
console.log(result.itemId);

Example: Connect Two Items

You can attach a connector to existing items by specifying their IDs:

const response = await fetch(
  `https://api.deon.cloud/api/v2/projects/${projectId}/item/inbox/connector`,
  {
    method: "POST",
    headers: {
      Authorization: `Bearer ${token}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      type: "Straight",
      strokeColor: "#28A745",
      strokeThickness: 2,
      startPoint: {
        itemId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", // Source item ID
        decorator: "Circle",
      },
      endPoint: {
        itemId: "yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy", // Target item ID
        decorator: "Arrow",
      },
    }),
  }
);

Without a position, each end is placed in the middle of the side of its item that faces the other item. The side is chosen when the connector is created, and the ends keep it when the items move. To choose the point yourself, pass a relative position, for example { x: 1, y: 0.5 } for the middle of the right side.