Skip to main content

Diagram API overview

Diagram methods

NameDescription
addShape()Creates a custom shape and 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
emptyAreaDblClickFires on double-clicking an empty space in the current diagram area
emptyAreaMouseDownFires when a pointing device button is pressed while the pointer is over 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 line
lineMouseDownFires when a pointing device button is pressed while the pointer is over a connector line
lineTitleClickFires on clicking a text element of a line
lineTitleDblClickFires on double-clicking a text element of a line
lineTitleMouseDownFires when a pointing device button is pressed while the pointer is over a text element of a 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
autoplacementOptional. An object with configuration settings for auto-placement of shapes
defaultsOptional. An object which sets the default configuration of a shape or line
defaultShapeTypeOptional. The default type of a shape
exportStylesOptional. Defines the styles that will be sent to the export service when exporting the diagram
gridStepOptional. Sets the size of a grid step that defines the step of moving a shape/group/swimlane
lineConfigOptional. An object with default configuration for the connector lines
lineGapOptional. Adds an offset for two connected shapes, and fills the gap with an additional line
marginOptional. An object with settings of margins for positioning items in the diagram
scaleOptional. Defines the diagram scale
selectOptional. Enables selection in the diagram
toolbarOptional. An array of icon objects which sets a toolbar with buttons for items
typeRequired. Defines the mode of Diagram initialization
typeConfigOptional. An object which defines the direction of the shapes in the mindmap mode of Diagram