      let connectors: ConnectorModel[] = [{
          id: 'connector1',
          type: 'Straight',
          sourcePoint: { x: 100, y: 300 },
          targetPoint: { x: 200, y: 400 },
      }];
let diagram: Diagram = new Diagram({
...
      connectors: connectors,
...
});
diagram.appendTo('#diagram');

constraints DiagramConstraints

Constraints are used to enable/disable certain behaviors of the diagram.

None - Disables DiagramConstraints constraints
Bridging - Enables/Disables Bridging support for connector
UndoRedo - Enables/Disables the Undo/Redo support
Tooltip - Enables/Disables Tooltip support
UserInteraction - Enables/Disables editing diagram interactively
ApiUpdate - Enables/Disables editing diagram through code
PageEditable - Enables/Disables editing diagrams both interactively and through code
Zoom - Enables/Disables Zoom support for the diagram
PanX - Enables/Disable PanX support for the diagram
PanY - Enables/Disable PanY support for the diagram
Pan - Enables/Disable Pan support the diagram

contextMenuSettings ContextMenuSettingsModel

Defines type of menu that appears when you perform right-click operation
An object to customize the context menu of diagram

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

let diagram: Diagram = new Diagram({
...
  contextMenuSettings: { show: true },
...
});
diagram.appendTo('#diagram');

customCursor CustomCursorActionModel[]

A collection of JSON objects where each object represents a custom cursor action. Layer is a named category of diagram shapes.

dataSourceSettings DataSourceModel

Configures the data source that is to be bound with diagram

diagramSettings DiagramSettingsModel

Represents the diagram settings

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

let diagram: Diagram = new Diagram({
...
diagramSettings: { inversedAlignment: true  }
...
});
diagram.appendTo('#diagram');

drawingObject NodeModel|ConnectorModel

Defines the object to be drawn using drawing tool

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

let diagram: Diagram = new Diagram({
...
drawingObject : {id: 'connector3', type: 'Straight'},
...
});
diagram.appendTo('#diagram');

enableConnectorSplit boolean

Split the connector, when the node is dropped onto it and establish connection with that dropped node.

enablePersistence boolean

Enable or disable persisting component’s state between page reloads.

enableRtl boolean

Enable or disable rendering component in right to left direction.

fixedUserHandleTemplate string|Function

This property allows us to define HTML elements for fixed user handle

getConnectorDefaults Function|string

Helps to return the default properties of connector

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

      let connectors: ConnectorModel[] = [{
          id: 'connector1',
          sourcePoint: { x: 100, y: 300 },
          targetPoint: { x: 200, y: 400 },
      }];
let diagram: Diagram = new Diagram({
...
  connectors: connectors,
  getConnectorDefaults: (connector: ConnectorModel, diagram: Diagram) => {
  let connObj: ConnectorModel = {};
  connObj.targetDecorator ={ shape :'None' };
  connObj.type = 'Orthogonal';
  return connObj;
  },
...
});
diagram.appendTo('#diagram');

getCustomCursor Function|string

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

function getCursor(action: string, active: boolean): string {
let cursor: string;
if (active && action === 'Drag') {
cursor = '-webkit-grabbing';
} else if (action === 'Drag') {
cursor = '-webkit-grab'
}
return cursor;
}
let nodes: NodeModel[] = [{
          id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
      },
      {
          id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
          shape: { type: 'Basic', shape: 'Ellipse' },
      }];
let handle: UserHandleModel[] = [
{ name: 'handle', margin: { top: 0, bottom: 0, left: 0, right: 0 }, offset: 0,
pathData: 'M 376.892,225.284L 371.279,211.95L 376.892,198.617L 350.225,211.95L 376.892,225.284 Z',
side: 'Top', horizontalAlignment: 'Center', verticalAlignment: 'Center',
pathColor: 'yellow' }];
let diagram: Diagram = new Diagram({
...
    nodes: nodes,
    selectedItems: { constraints: SelectorConstraints.All, userHandles: handle },
    getCustomCursor: getCursor
...
});
diagram.appendTo('#diagram');

getCustomProperty Function|string

Allows to get the custom properties that have to be serialized

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

let nodes: NodeModel[] = [{
          id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
          annotations: [{ content: 'Default Shape' }]
      },
      {
          id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
          shape: { type: 'Basic', shape: 'Ellipse' },
          annotations: [{ content: 'Path Element' }]
      }
      ];
      let connectors: ConnectorModel[] = [{
          id: 'connector1', type: 'Straight',
          sourcePoint: { x: 100, y: 300 }, targetPoint: { x: 200, y: 400 },
      }];
let diagram: Diagram = new Diagram({
...
connectors: connectors, nodes: nodes,
getCustomProperty: (key: string) => {
if (key === 'nodes') {
return ['description'];
}
        return null;
}
...
});
diagram.appendTo('#diagram');

getCustomTool Function|string

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

function getTool(action: string): ToolBase {
let tool: ToolBase;
if (action === 'userHandle1') {
tool = new CloneTool(diagram.commandHandler, true);
}
return tool;
}
class CloneTool extends ToolBase {
public mouseDown(args: MouseEventArgs): void {
super.mouseDown(args);
diagram.copy();
diagram.paste();
}
}
let nodes: NodeModel[] = [{
          id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
      },
      {
          id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
          shape: { type: 'Basic', shape: 'Ellipse' },
      }];
      let connectors: ConnectorModel[] = [{
          id: 'connector1', type: 'Straight',
          sourcePoint: { x: 100, y: 300 }, targetPoint: { x: 200, y: 400 },
      }];
     let handles: UserHandleModel[] = [
         { name: 'handle', margin: { top: 0, bottom: 0, left: 0, right: 0 }, offset: 0,
           pathData: 'M 376.892,225.284L 371.279,211.95L 376.892,198.617L 350.225,211.95L 376.892,225.284 Z',
           side: 'Top', horizontalAlignment: 'Center', verticalAlignment: 'Center',
           pathColor: 'yellow' }];
let diagram: Diagram = new Diagram({
...
    connectors: connectors, nodes: nodes,
    selectedItems: { constraints: SelectorConstraints.All, userHandles: handles },
    getCustomTool: getTool
...
});
diagram.appendTo('#diagram');

getDescription Function|string

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

let connector1: ConnectorModel = {
         id: 'connector1', type: 'Straight',
         sourcePoint: { x: 100, y: 100 },targetPoint: { x: 200, y: 200 },
         annotations: [{ 'content': 'label', 'offset': 0, 'alignment': 'Center' }]
      };
let connector2: ConnectorModel = {
          id: 'connector2', type: 'Straight',
          sourcePoint: { x: 400, y: 400 }, targetPoint: { x: 600, y: 600 },
      };
let diagram: Diagram;
diagram = new Diagram({
width: 1000, height: 1000,
connectors: [connector1, connector2],
snapSettings: { constraints: SnapConstraints.ShowLines },
getDescription: getAccessibility
});
diagram.appendTo('#diagram');
function getAccessibility(obj: ConnectorModel, diagram: Diagram): string {
let value: string;
if (obj instanceof Connector) {
value = 'clicked on Connector';
} else if (obj instanceof TextElement) {
value = 'clicked on annotation';
}
else if (obj instanceof Decorator) {
value = 'clicked on Decorator';
}
else { value = undefined; }
return value;
}

getNodeDefaults Function|string

Helps to return the default properties of node

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

let nodes: NodeModel[] = [{
          id: 'node1', height: 100, offsetX: 100, offsetY: 100,
          annotations: [{ content: 'Default Shape' }]
      },
      {
          id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
          shape: {
              type: 'Basic', shape: 'Ellipse'
          },
          annotations: [{ content: 'Ellipse' }]
      }
      ];
let diagram: Diagram = new Diagram({
...
nodes: nodes,
getNodeDefaults: (node: NodeModel) => {
  let obj: NodeModel = {};
  if (obj.width === undefined) {
      obj.width = 145;
  }
  obj.style = { fill: '#357BD2', strokeColor: 'white' };
  obj.annotations = [{ style: { color: 'white', fill: 'transparent' } }];
  return obj;
   },
...
});
diagram.appendTo('#diagram');

height string|number

Defines the height of the diagram model.

historyManager History

Customizes the undo redo functionality

layers LayerModel[]

A collection of JSON objects where each object represents a layer. Layer is a named category of diagram shapes.

layout LayoutModel

Layout is used to auto-arrange the nodes in the Diagram area

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

mode RenderingMode

Defines the diagram rendering mode.

SVG - Renders the diagram objects as SVG elements
Canvas - Renders the diagram in a canvas

model UmlSequenceDiagramModel

Defines the model for the diagram.

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

const model: UmlSequenceDiagramModel = {
    participants: [
        {
            id: 'User', content: 'User', width: 100, height: 50,
            showDestructionMarker: true,
            isActor: true,
            activationBoxes: [
                { id: 'act1', startMessageID: 'MSG1', endMessageID: 'MSG3' }
            ]
        },
        {
            id: 'Server', content: 'Server', width: 100, height: 50,
            showDestructionMarker: true,
            isActor: false,
            activationBoxes: [
                { id: 'act2', startMessageID: 'MSG1', endMessageID: 'MSG3' }
            ]
        }
    ],
    messages: [
        { id: 'MSG1', content: 'User sends request', fromParticipantID: 'User', toParticipantID: 'Server' },
        { id: 'MSG2', content: 'Processing', fromParticipantID: 'Server', toParticipantID: 'Server' },
        { id: 'MSG3', content: 'Server sends response', fromParticipantID: 'Server', toParticipantID: 'User' }
    ],
    fragments: [
        {
            id: 'frag1', type: 'Optional',
            conditions: [
                { content: 'Interactions', messageIds: ['MSG1', 'MSG2', 'MSG3'] }
            ]
        }
    ]
};

const diagram: Diagram = new Diagram({
    // Other properties
    model: model
});

diagram.appendTo('#diagram');

nodeDefaults NodeModel

Helps to assign the default properties of nodes

nodeTemplate string|Function

Customizes the node template

nodes NodeModel[]

Defines the collection of nodes

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

let nodes: NodeModel[] = [{
          id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
          annotations: [{ content: 'Default Shape' }]
      },
      {
          id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
          shape: {
              type: 'Basic', shape: 'Ellipse'
          },
          annotations: [{ content: 'Path Element' }]
      }
      ];
let diagram: Diagram = new Diagram({
...
nodes: nodes,
...
});
diagram.appendTo('#diagram');

pageSettings PageSettingsModel

Page settings enable to customize the appearance, width, and height of the Diagram page.

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

let diagram: Diagram = new Diagram({
...
pageSettings: {  width: 800, height: 600, orientation: 'Landscape',
background: { color: 'blue' }, boundaryConstraints: 'Infinity'},
...
});
diagram.appendTo('#diagram');

rulerSettings RulerSettingsModel

Defines the properties of both horizontal and vertical guides/rulers to measure the diagram area.

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

let arrange: Function = (args: IArrangeTickOptions) => {
if (args.tickInterval % 10 == 0) {
args.tickLength = 25;
}
}
let diagram: Diagram = new Diagram({
...
rulerSettings: { showRulers: true,
horizontalRuler: { segmentWidth: 50, orientation: 'Horizontal', interval: 10,  arrangeTick: arrange },
verticalRuler: {segmentWidth: 200,interval: 20, thickness: 20,
tickAlignment: 'LeftOrTop', segmentWidth: 50, markerColor: 'red' }
},
...
});
diagram.appendTo('#diagram');

scrollSettings ScrollSettingsModel

Defines the current zoom value, zoom factor, scroll status and view port size of the diagram

segmentThumbShape SegmentThumbShapes

Defines the segmentThumbShape

segmentThumbSize number

Specifies the size of the segment thumb. When not set, it defaults to matching the underlying path data.

selectedItems SelectorModel

Defines the collection of selected items, size and position of the selector

serializationSettings SerializationSettingsModel

Defines the serialization settings of diagram.

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

let diagram: Diagram = new Diagram({
...
serializationSettings: { preventDefaults: true },
...
});
diagram.appendTo('#diagram');

setNodeTemplate Function|string

setNodeTemplate helps to customize the content of a node

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

let getTextElement: Function = (text: string) => {
let textElement: TextElement = new TextElement();
textElement.width = 50;
textElement.height = 20;
textElement.content = text;
return textElement;
};
let nodes: NodeModel[] = [{
          id: 'node1', height: 100, offsetX: 100, offsetY: 100,
          annotations: [{ content: 'Default Shape' }]
      },
      {
          id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100
      }
      ];
let diagram: Diagram = new Diagram({
...
nodes: nodes,
setNodeTemplate : setNodeTemplate,
...
});
diagram.appendTo('#diagram');

snapSettings SnapSettingsModel

Defines the gridlines and defines how and when the objects have to be snapped

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

let horizontalGridlines: GridlinesModel = {lineColor: 'black', lineDashArray: '1,1' };
let verticalGridlines: GridlinesModel = {lineColor: 'black', lineDashArray: '1,1'};
let diagram: Diagram = new Diagram({
...
snapSettings: { horizontalGridlines, verticalGridlines, constraints: SnapConstraints.ShowLines,
snapObjectDistance: 5, snapAngle: 5 },
...
});
diagram.appendTo('#diagram');

tool DiagramTools

Defines the precedence of the interactive tools. They are,

None - Disables selection, zooming and drawing tools
SingleSelect - Enables/Disables single select support for the diagram
MultipleSelect - Enables/Disable MultipleSelect select support for the diagram
ZoomPan - Enables/Disable ZoomPan support for the diagram
DrawOnce - Enables/Disable ContinuousDraw support for the diagram
ContinuousDraw - Enables/Disable ContinuousDraw support for the diagram

Defines the tooltip that should be shown when the mouse hovers over a node or connector
An object that defines the description, appearance and alignments of tooltip

updateSelection Function|string

Helps to set the undo and redo node selection

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

      let connectors: ConnectorModel[] = [{
          id: 'connector1',
          sourcePoint: { x: 100, y: 300 },
          targetPoint: { x: 200, y: 400 },
      }];
let diagram: Diagram = new Diagram({
...
  connectors: connectors,
  updateSelection: (object: ConnectorModel | NodeModel, diagram: Diagram) => {
  let objectCollection = [];
  objectCollection.push(obejct);
  diagram.select(objectCollection);
  },
...
});
diagram.appendTo('#diagram');

userHandleTemplate string|Function

This property represents the template content of a user handle. The user can define any HTML element as a template.

width string|number

Defines the width of the diagram model.

<div id='diagram'/>

let diagram: Diagram = new Diagram({
width:'1000px', height:'500px' });
diagram.appendTo('#diagram');

DiagramModel

Properties

animationComplete EmitType<Object>

click EmitType<IClickEventArgs>

collectionChange EmitType<ICollectionChangeEventArgs>

commandExecute EmitType<ICommandExecuteEventArgs>

connectionChange EmitType<IConnectionChangeEventArgs>

contextMenuBeforeItemRender EmitType<MenuEventArgs>

contextMenuClick EmitType<MenuEventArgs>

contextMenuOpen EmitType<BeforeOpenCloseMenuEventArgs>

created EmitType<Object>

dataLoaded EmitType<IDataLoadedEventArgs>

doubleClick EmitType<IDoubleClickEventArgs>

dragEnter EmitType<IDragEnterEventArgs>

dragLeave EmitType<IDragLeaveEventArgs>

dragOver EmitType<IDragOverEventArgs>

drop EmitType<IDropEventArgs>

elementDraw EmitType<IElementDrawEventArgs>

expandStateChange EmitType<IExpandStateChangeEventArgs>

fixedUserHandleClick EmitType<FixedUserHandleClickEventArgs>

historyChange EmitType<IHistoryChangeArgs>

historyStateChange EmitType<IBlazorCustomHistoryChangeArgs>

keyDown EmitType<IKeyEventArgs>

keyUp EmitType<IKeyEventArgs>

layoutUpdated EmitType<ILayoutUpdatedEventArgs>

load EmitType<ILoadEventArgs>

loaded EmitType<ILoadedEventArgs>

mouseEnter EmitType<IMouseEventArgs>

mouseLeave EmitType<IMouseEventArgs>

mouseOver EmitType<IMouseEventArgs>

mouseWheel EmitType<IMouseWheelEventArgs>

onFixedUserHandleMouseDown EmitType<FixedUserHandleEventsArgs>

onFixedUserHandleMouseEnter EmitType<FixedUserHandleEventsArgs>

onFixedUserHandleMouseLeave EmitType<FixedUserHandleEventsArgs>

onFixedUserHandleMouseUp EmitType<FixedUserHandleEventsArgs>

onImageLoad EmitType<IImageLoadEventArgs>

onUserHandleMouseDown EmitType<UserHandleEventsArgs>

onUserHandleMouseEnter EmitType<UserHandleEventsArgs>

onUserHandleMouseLeave EmitType<UserHandleEventsArgs>

onUserHandleMouseUp EmitType<UserHandleEventsArgs>

positionChange EmitType<IDraggingEventArgs>

propertyChange EmitType<IPropertyChangeEventArgs>

rotateChange EmitType<IRotationEventArgs>

scrollChange EmitType<IScrollChangeEventArgs>

segmentChange EmitType<ISegmentChangeEventArgs>

segmentCollectionChange EmitType<ISegmentCollectionChangeEventArgs>

selectionChange EmitType<ISelectionChangeEventArgs>

sizeChange EmitType<ISizeChangeEventArgs>

sourcePointChange EmitType<IEndChangeEventArgs>

targetPointChange EmitType<IEndChangeEventArgs>

textEdit EmitType<ITextEditEventArgs>

addInfo Object

annotationTemplate string|Function

backgroundColor string

bridgeDirection BridgeDirection

commandManager CommandManagerModel

connectorDefaults ConnectorModel

connectors ConnectorModel[]