Connector Annotations

Connector annotation is on screen direct connection line between two nodes of diagram. Use them the same way as highlight markers for temporary or per transaction drawings over diagram nodes. See following example for how it works:


Connector annotations are drawn on top of exisiting diagram, so sometimes space between nodes is not enough to fit annotation label and arrow, so for this case connector annotation supports offbeat style of drawing, so instead of straight line connecting two nodes, the connector is drawn as free hand spline on side of them.

  • primitives.common.ConnectorPlacementType.Offbeat - Free hand drawing of connector annotation
  • primitives.common.ConnectorPlacementType.Straight - Straight line between nodes


In general shape of connector annotation may indicate various business relations, so component supports following simple use case:

  • primitives.common.ConnectorShapeType.OneWay - The arrow line between fromItem and toItem nodes
  • primitives.common.ConnectorShapeType.TwoWay - Two opposite direction arrow lines between fromItem and toItem nodes
  • primitives.common.ConnectorShapeType.BothWay - One line having arrows on both ends
The more complex use cases can be built with multiple connector annotations originating from the same fromItem and toItem nodes. Component supports simple conflict resolution, for example in the above mentioned case if multiple straight line connectors overlap each other, the diagram will try to offset them and draw side by side in parallel.


Connector annotations labels are defined as a plane text or JSX elements. Please, pay attention that component does not resolve connector annotations labels overlapping, so large number of labels can clutter view and diagram in general.

Set connector annotation placement type:

Scott Aasrud
Scott Aasrud
VP, Public Sector
Have questions? Ask for help on Github.