Customise the connection points on a shape

Connection points are the locations around a shape where connectors attach to. Hover over a non-selected shape and you'll see them as tiny crosses.

Each shape has a varying number of connection points at different locations around its perimeter.

Compound shapes, like the entity relationship tables in the diagram above, are a bit more complex. As they are shapes within shapes, they have specially defined or limited points - in this case, the row rectangle shapes within the tables have only two connection points to the left and the right of the row.

Connection points for fixed connectors

You can use the connection points on a shape to connect a fixed connector. When you move the shape around, the connector stays attached to exactly that connection point, it doesn't float around the perimeter of the shape.

Connection points are also used when you enable the snap to point shape property - instead of a connector floating smoothly around the perimeter when you move it or the shape, it will snap to the defined connection points.

Learn more about connecting shapes

Note: If you don't see any connection points, check that this option is enabled via the Arrange tab of the format panel, or View > Connection Points.

Force a fixed or floating connection

You can force a floating or fixed connection at any location by using a keyboard shortcut, even if the shape has custom connection points or the snap to point shape property enabled.

• Hold down Shift as you drop the connector on a shape to connect it to the shape's outline.
• Hold down Alt as you drop the connector on a shape to add a fixed connection inside the shape.
  

Edit a shape's connection points

The visual editor makes it easy to change the fixed connection points on a shape.

Right click on a shape and select Edit Connection Points.

Select a connection point: Click on a connection point, or select multiple connection points by dragging a selection box around them.

Delete connection points: Select one or more connection points, then press Delete or click on the Delete icon just under the editor on the right.

Add new connection points: Double click anywhere on or around the shape or click Add.

Move connection points: Drag the selected connection point(s) to a new position or shift selected connection points to the left/right or up/down by entering a positive or negative value in Dx or Dy.

Define connection points in the shape style

You can define your own custom shape style and specify exactly where the connection points should be located around the shape perimeter. The custom coordinates you specify in the shape style override the default connection points.

Add new points in x,y pairs, with values between 0 and 1, which correspond to positions on the shape's outline, relative to the outer four 'corners' of the shape. Top left is [0,0], top right is [1,0], bottom left is [0,1], bottom right is [1,1].

For example, you can redefine a cloud shape to have just two connection points (on the left), instead of the default connection points (on the right).

1. Select the shape, then click Edit Style in the Style tab of the format panel. Alternatively, press Ctrl+E (on Windows) or Cmd+E on macOS.
2. Enter the new connection points in the form of an array of x,y coordinates to the shape style definition. For example, to add only two points, one to the left and one to the right: points=[[0,0.5],[1,0.5]];
   
3. Click Apply.
   In the example below, the snap to point shape property has been enabled to show how the connector moves to another custom connection point as you move the shape around.
   

Reset a complex shape's connection points

1. Select the shape, then click Edit Style in the Style tab of the format panel.
   
2. Delete the points[] array (in the example, highlighted in blue).
   
3. Click Apply.

This means you can now add a connector from the other connection points, as has been done from the lower entity table in the diagram below.

Build your own custom shapes

You can create your own custom shapes in addition to simply modifying an existing shape's connection points by specifying the custom shape's foreground and background geometry, connection points, shape styles and label text.

Note: An optional third coordinate in the points[] array may function as a toggle (outline/perimeter), or an offset to move the connection point around inside the shape or between its outline and its perimeter, but this works only on some shapes. This third coordinate is therefore only used for development purposes. An optional fourth and fifth coordinate may be added to define an absolute offset in pixels.

points=[[x₀,y₀,p₀,dx₀,dy₀],[x₁,y₁,p₁,dx₁,dy₁],...,[x_n,y_n,p_n,dx_n,dy_n]]