Decorator API in React Diagram API component

Decorators are used to decorate the end points of the connector with some predefined path geometry

Properties

height

number

Sets the height of the decorator

Defaults to 10

pathData

string

Defines the geometry of the decorator shape

Defaults to ”

pivot

PointModel

Defines the position of the decorator with respect to the source/target point of the connector

shape

DecoratorShapes

<div id='diagram'></div>

let connectors: ConnectorModel[] = [{
  id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 },
  sourceDecorator: {
   style: { fill: 'black' },
   shape: 'Arrow',
   pivot: { x: 0, y: 0.5 }},
  targetDecorator: {
   shape: 'Diamond',
   style: { fill: 'blue' },
   pivot: { x: 0, y: 0.5 }}
 },];
let diagram: Diagram = new Diagram({
...
connectors: connectors
...
});
diagram.appendTo('#diagram');

style

ShapeStyleModel

Defines the appearance of the decorator

Defaults to new ShapeStyle()

width

number

Sets the width of the decorator

Defaults to 10