DiagramShapeModel
23 Sep 20257 minutes to read
Interface for a class DiagramShape
Properties
activity BpmnActivityModel
Defines the type of the BPMN Activity shape
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
annotation BpmnAnnotationModel
Defines the text of the bpmn annotation
annotations BpmnAnnotationModel[]
Defines the text of the bpmn annotation collection
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');classShape UmlClassModel
Defines the text of the bpmn annotation collection
classifier ClassifierShape
Defines the type of classifier
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');cornerRadius number
Sets the corner of the node
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');dataObject BpmnDataObjectModel
Defines the type of the BPMN DataObject shape
enumerationShape UmlEnumerationModel
Defines the text of the bpmn annotation collection
event BpmnEventModel
Defines the type of the BPMN Event shape
flowShape FlowShapes
Defines the type of the flow shape
gateway BpmnGatewayModel
Defines the type of the BPMN Gateway shape
interfaceShape UmlInterfaceModel
Defines the text of the bpmn annotation collection
margin MarginModel
Defines the space to be let between the node and its immediate parent
points PointModel[]
Defines the collection of points to draw a polygon
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
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');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