DiagramShape

23 Sep 20258 minutes to read

Defines the behavior of the UMLActivity shape

Properties

activity BpmnActivityModel

Defines the type of the BPMN Activity shape

Defaults to ‘None’

align ImageAlignment

Defines the alignment of the image within the node boundary.

  • None - Alignment value will be set as none
  • XMinYMin - smallest X value of the view port and smallest Y value of the view port
  • XMidYMin - midpoint X value of the view port and smallest Y value of the view port
  • XMaxYMin - maximum X value of the view port and smallest Y value of the view port
  • XMinYMid - smallest X value of the view port and midpoint Y value of the view port
  • XMidYMid - midpoint X value of the view port and midpoint Y value of the view port
  • XMaxYMid - maximum X value of the view port and midpoint Y value of the view port
  • XMinYMax - smallest X value of the view port and maximum Y value of the view port
  • XMidYMax - midpoint X value of the view port and maximum Y value of the view port
  • XMaxYMax - maximum X value of the view port and maximum Y value of the view port

Defaults to ‘None’

annotation BpmnAnnotationModel

Defines the text of the bpmn annotation

Defaults to ‘None’

annotations BpmnAnnotationModel[]

Defines the text of the bpmn annotation collection

Defaults to ‘None’

basicShape BasicShapes

Defines the type of the basic shape

bpmnShape BpmnShapes 

<div id='diagram'></div>
let nodes: NodeModel[] = [{
 id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100,
 shape: {
  type: 'Bpmn', shape: 'Gateway',
  gateway: { type: 'EventBased' } as BpmnGatewayModel
        } as BpmnShapeModel,
}];
let diagram: Diagram = new Diagram({
...
nodes : nodes,
...
});
diagram.appendTo('#diagram');

Defaults to ‘Event’

classShape UmlClassModel

Defines the text of the bpmn annotation collection

Defaults to ‘None’

classifier ClassifierShape

Defines the type of classifier

Defaults to ‘Class’

content SVGElement|HTMLElement

Defines the geometry of a native element.

<div id='diagram'></div>
let nodes: NodeModel[] = [{
id: 'node1', width: 100, height: 100,
shape: { scale: 'Stretch',
  type: 'Native', content: '<g><path d='M90,43.841c0,24.213-19.779,43.841-44.182,43.841c-7.747,0-15.025-1.98-21.357-5.455'+
'L0,90l7.975-23.522' +
'c-4.023-6.606-6.34-14.354-6.34-22.637C1.635,19.628,21.416,0,45.818,0C70.223,0,90,19.628,90,43.841z M45.818,6.982' +
'c-20.484,0-37.146,16.535-37.146,36.859c0,8.065,2.629,15.534,7.076,21.61L11.107,79.14l14.275-4.537' +
'c5.865,3.851,12.891,6.097,20.437,6.097c20.481,0,37.146-16.533,37.146-36.857S66.301,6.982,45.818,6.982z M68.129,53.938' +
'c-0.273-0.447-0.994-0.717-2.076-1.254c-1.084-0.537-6.41-3.138-7.4-3.495c-0.993-0.358-1.717-0.538-2.438,0.537' +
'c-0.721,1.076-2.797,3.495-3.43,4.212c-0.632,0.719-1.263,0.809-2.347,0.271c-1.082-0.537-4.571-1.673-8.708-5.333' +
'c-3.219-2.848-5.393-6.364-6.025-7.441c-0.631-1.075-0.066-1.656,0.475-2.191c0.488-0.482,1.084-1.255,1.625-1.882' +
'c0.543-0.628,0.723-1.075,1.082-1.793c0.363-0.717,0.182-1.344-0.09-1.883c-0.27-0.537-2.438-5.825-3.34-7.977' +
'c-0.902-2.15-1.803-1.792-2.436-1.792c-0.631,0-1.354-0.09-2.076-0.09c-0.722,0-1.896,0.269-2.889,1.344' +
'c-0.992,1.076-3.789,3.676-3.789,8.963c0,5.288,3.879,10.397,4.422,11.113c0.541,0.716,7.49,11.92,18.5,16.223' +
'C58.2,65.771,58.2,64.336,60.186,64.156c1.984-0.179,6.406-2.599,7.312-5.107C68.398,56.537,68.398,54.386,68.129,53.938z'>'+
'</path></g>',
       }
}];
let diagram: Diagram = new Diagram({
...
nodes: nodes
...
});
diagram.appendTo('#diagram');

Defaults to ’’

cornerRadius number

Sets the corner of the node

Defaults to 0

data string

Defines the geometry of a path

<div id='diagram'></div>
let nodes: NodeModel[] = [{
id: 'node1', width: 100, height: 100, offsetX: 300, offsetY: 100,
  shape: { type: 'Path', data: 'M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296'+
  'L550.7723,171.9366L558.9053,194.9966L540.3643,179.4996L521.8223,194.9966L529.9553,171.9366'+
  'L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z' }
}];
let diagram: Diagram = new Diagram({
...
nodes: nodes
...
});
diagram.appendTo('#diagram');

Defaults to ’’

dataObject BpmnDataObjectModel

Defines the type of the BPMN DataObject shape

Defaults to ‘None’

enumerationShape UmlEnumerationModel

Defines the text of the bpmn annotation collection

Defaults to ‘None’

event BpmnEventModel

Defines the type of the BPMN Event shape

Defaults to ‘None’

flowShape FlowShapes

Defines the type of the flow shape

gateway BpmnGatewayModel

Defines the type of the BPMN Gateway shape

Defaults to ‘None’

interfaceShape UmlInterfaceModel

Defines the text of the bpmn annotation collection

Defaults to ‘None’

margin MarginModel

Defines the space to be let between the node and its immediate parent

Defaults to 0

points PointModel[]

Defines the collection of points to draw a polygon

Defaults to undefined

scale Stretch

Defines the scale of the native element.

  • None - Sets the stretch type for diagram as None
  • Stretch - Sets the stretch type for diagram as Stretch
  • Meet - Sets the stretch type for diagram as Meet
  • Slice - Sets the stretch type for diagram as Slice

Defaults to ‘Stretch’

source string

Defines the source of the image

<div id='diagram'></div>
let nodes: NodeModel[] = [{
id: 'node1', width: 100, height: 100, offsetX: 300, offsetY: 100,
shape: { type: 'Image', source: 'https://www.w3schools.com/images/w3schools_green.jpg' }
}];
let diagram: Diagram = new Diagram({
...
nodes: nodes
...
});
diagram.appendTo('#diagram');

Defaults to ’’

textContent string

Defines the text of the text element

type Shapes

Defines the type of node shape

umlActivityShape UmlActivityShapes

Defines the type of the UMLActivity shape

  • Action - Sets the type of the UMLActivity Shape as Action
  • Decision - Sets the type of the UMLActivity Shape as Decision
  • MergeNode - Sets the type of the UMLActivity Shape as MergeNode
  • InitialNode - Sets the type of the UMLActivity Shape as InitialNode
  • FinalNode - Sets the type of the UMLActivity Shape as FinalNode
  • ForkNode - Sets the type of the UMLActivity Shape as ForkNode
  • JoinNode - Sets the type of the UMLActivity Shape as JoinNode
  • TimeEvent - Sets the type of the UMLActivity Shape as TimeEvent
  • AcceptingEvent - Sets the type of the UMLActivity Shape as AcceptingEvent
  • SendSignal - Sets the type of the UMLActivity Shape as SendSignal
  • ReceiveSignal - Sets the type of the UMLActivity Shape as ReceiveSignal
  • StructuredNode - Sets the type of the UMLActivity Shape as StructuredNode
  • Note - Sets the type of the UMLActivity Shape as Note

Defaults to ‘Action’