Skip to main content

Diagram API overview

Diagram methods#

NameDescription
addShape()creates a custom shape; sets sidebar options for its editing in the right panel of the editor
autoPlace()automatically arranges connected diagram shapes in the hierarchical structure
collapseItem()hides all children of the target shape or collapses the group/swimlane
destructor()removes a diagram instance and releases occupied resources
expandItem()shows all children of the target shape or expands the group/swimlane
getScrollState()returns the position of the diagram inner scroll
locate()gets the id of an item from the specified HTML event or tag
paint()repaints the diagram
scrollTo()sets the inner scroll of the diagram to the specified position
showItem()adjusts scroll to make the target item visible

Diagram events#

NameDescription
afterCollapsefires after an item has been collapsed
afterExpandfires after an item has been expanded
afterSubmenuOpenfires after the menu of the subheader is opened
beforeCollapsefires before collapsing an item
beforeExpandfires before expanding an item
beforeSubmenuOpenfires before the menu of the subheader is opened
emptyAreaClickfires on clicking an empty space in the current diagram area
groupClickfires on clicking a group
groupDblClickfires on double-clicking a group
groupHeaderClickfires on clicking a header of a group
groupHeaderDblClickfires on double-clicking a header of a group
groupMouseDownfires when a pointing device button is pressed while the pointer is over a group
itemClickfires on clicking an item
itemDblClickfires on double-clicking an item
itemMouseDownfires when a pointing device button is pressed while the pointer is over an item
itemMouseOutfires when a pointing device is out of an item
itemMouseOverfires when a pointing device is onto an item
lineClickfires on clicking a connector line
lineDblClickfires on double-clicking a connector line
lineMouseDownfires when a pointing device button is pressed while the pointer is over a connector line
scrollfires when a diagram is being scrolled
shapeClickfires on clicking a shape
shapeDblClickfires on double-clicking a shape
shapeIconClickfires on clicking a toolbar icon
shapeMouseDownfires when a pointing device button is pressed while the pointer is over a shape

Diagram properties#

NameDescription
autoplacementan object with configuration settings for auto-placement of shapes
defaultLinkTypethe default type of a connector line
defaultsan object which sets the default configuration of a shape
defaultShapeTypethe default type of a shape
exportStylesdefines the styles that will be sent to the export service when exporting the diagram
gridStepsets the size of a grid step that defines the step of moving a shape/group/swimlane
lineGapadds an offset for two connected shapes, and fills the gap with an additional line
marginAn object with settings of margins for positioning items in the diagram
scaledefines the diagram scale
selectenables selection in the diagram
toolbarAn array of icon objects which sets a toolbar with buttons for items
typedefines the mode of Diagram initialization
typeConfigoptional, an object which defines the direction of the shapes in the mindmap mode of Diagram