Diagram

Name	Type	Default	Description
adornerLayer	Group		The layer group that contains adorners for selection and editing.
canvas	any		The canvas element used for rendering the diagram.
connections	any[]		Array of all connections in the diagram.
element	HTMLElement		The HTML element that contains the diagram.
events	string[]		Array of event names that this observable supports.
id	string		The unique identifier of the diagram.
mainLayer	Group		The main layer group that contains all diagram elements.
options	any		Configuration options for the observable instance.
pauseMouseHandlers	boolean		Indicates whether mouse handlers should be paused.
scrollable	any		The scrollable container element.
scroller	any		The scroller component for panning.
selector	Selector		The selector tool for area selection.
shapes	Shape[]		Array of all shapes in the diagram.
size	{ height: number; width: number; }		The current size of the diagram viewport.
toolBar	any		The toolbar element for diagram tools.
toolService	ToolService		The tool service that manages diagram tools and interactions.
undoRedoService	any		Service for managing undo/redo operations.
wrapper	HTMLElement		The wrapper element for the diagram content.

Constructors

Diagram

(element: any, userOptions: any, themeOptions: any)

Creates a new Diagram instance.

Parameters

element

any

The HTML element that will contain the diagram

userOptions

any

Configuration options for the diagram

themeOptions

any

Theme-specific options

Methods

addConnection
Adds connection to the diagram.
Parameters connection Connection Connection. undoable? boolean Boolean.
Returns Connection The newly created connection.

addShape
Adds shape to the diagram.
Parameters item any Shape, Point. If point is passed it will be created new Shape and positioned at that point. undoable? any
Returns any The newly created shape.

alignShapes
Aligns shapes in the specified direction.
Parameters direction any The alignment direction ('left', 'right', 'top', 'bottom')

bind
Binds event handlers to one or more events.
Parameters event EventNames | {[key: string]: Handler} The event name(s) to bind to, or an object mapping event names to handlers handlers? EventHandlers The event handler(s) to bind. Can be a function or an object mapping event names to handlers one? boolean If true, the handler will be executed only once and then automatically unbound
Returns Diagram The Observable instance for method chaining

boundingBox
Gets the bounding rectangle of the given items.
Parameters items any DiagramElement, Array of elements. origin? any Boolean. Pass 'true' if you need to get the bounding box of the shapes without their rotation offset.
Returns Rect The bounding rectangle of the items.

bringIntoView
Bring into view the passed item(s) or rectangle.
Parameters item any options? any

clear
Clears the diagram by removing all selections and elements, then reinitializes.

connect
Creates a connection between two endpoints (shapes, connectors, or points).
Parameters source any The source endpoint target any The target endpoint options? any Optional connection configuration
Returns Connection The newly created connection

connected
Determines whether the the two items are connected.
Parameters source any Shape, Connector, Point. target any Shape, Connector, Point.
Returns boolean true if the two items are connected.

copy
Copies the currently selected items to the clipboard.

cut
Cuts the currently selected items to the clipboard and removes them from the diagram.

deselect
Deselects items from the current selection.
Parameters item? any The item(s) to deselect. If not provided, deselects all items.

destroy
Destroys the diagram and cleans up all resources. Removes event listeners, destroys components, and clears all elements.

destroyScroller
Destroys the scroller component and removes its element.

documentToModel
Converts a point from document coordinates to model coordinates.
Parameters point any The point in document coordinates
Returns any The point in model coordinates

documentToView
Converts a point from document coordinates to view coordinates.
Parameters point any The point in document coordinates
Returns Point The point in view coordinates

exportDOMVisual
Exports the diagram's DOM visual representation for rendering or export purposes. Creates a clipped group containing the canvas content with proper transformations.
Returns Group A drawing Group element containing the exported DOM visual

exportVisual
Exports the diagram's visual representation with proper scaling based on zoom level. Creates a scaled group containing the main layer content.
Returns Group A drawing Group element containing the exported visual with inverse zoom scaling

first
Binds event handlers to be executed first (prepends to the handlers list). These handlers will be called before any previously bound handlers for the same event.
Parameters eventName EventNames The event name(s) to bind to handlers EventHandlers The event handler(s) to bind
Returns Diagram The Observable instance for method chaining

focus
Sets focus to the diagram element.
Returns boolean True if focus was set, undefined otherwise

getShapeById
Gets a shape by its unique identifier.
Parameters id any The unique identifier of the shape
Returns any The shape with the specified ID, or undefined if not found

getShapeByModelId
Gets a shape by its model ID.
Parameters id any The model ID of the shape
Returns any The shape with the specified model ID, or undefined if not found

getShapeByModelUid
Gets a shape by its model UID.
Parameters uid any The model UID of the shape
Returns any The shape with the specified model UID, or undefined if not found

layerToModel
Converts a point from layer coordinates to model coordinates.
Parameters point any The point in layer coordinates
Returns any The point in model coordinates

layout
Performs a diagram layout of the given type.
Parameters options? any Layout-specific options.

load
Loads diagram data and recreates shapes and connections.
Parameters options any The diagram options containing shapes and connections data

modelToDocument
Converts a point from model coordinates to document coordinates.
Parameters point any The point in model coordinates
Returns Point The point in document coordinates

modelToLayer
Converts a point from model coordinates to layer coordinates.
Parameters point any The point in model coordinates
Returns any The point in layer coordinates

modelToView
Converts a point from model coordinates to view coordinates.
Parameters point any The point in model coordinates
Returns any The point in view coordinates

one
Binds event handlers that will be executed only once. After execution, the handlers are automatically unbound.
Parameters eventNames EventNames The event name(s) to bind to handlers EventHandlers The event handler(s) to bind
Returns Diagram The Observable instance for method chaining

pan
Gets or sets the pan offset of the diagram.
Parameters pan any The pan offset as a Point. If not provided, returns the current pan. animate? any Whether to animate the pan operation
Returns Point The current pan offset when used as a getter

paste
Pastes items from the clipboard into the diagram.

redo
Executes the previous undoable action on top of the redo stack if any.

remove
Removes items (or single item) from the diagram.
Parameters items any DiagramElement, Array of Items. undoable? any

save
Serializes the diagram to a JSON object containing shapes and connections.
Returns { connections: any[]; shapes: any[]; } Object with shapes and connections arrays

select
Selects items on the basis of the given input or returns the current selection if none.
Parameters item? any options? any
Returns any[] The currently selected items.

selectAll
Selects all shapes and connections in the diagram.

selectArea
Selects shapes and connections within a rectangular area.
Parameters rect any The rectangular area to select items within

setOptions
Sets options for the diagram by deep extending the current options.
Parameters options any The options to merge with current diagram options

toBack
Sends to back the passed items.
Parameters items any DiagramElement, Array of Items. undoable any

toFront
Brings to front the passed items.
Parameters items any DiagramElement, Array of Items. undoable? any

trigger
Triggers an event, calling all bound handlers for that event.
Parameters eventName string The name of the event to trigger eventArgs? any Optional event arguments to pass to the handlers
Returns boolean True if any handler called preventDefault(), false otherwise

unbind
Removes event handlers from events.
Parameters eventName? string The event name to unbind from. If undefined, all events are unbound handler? EventHandlers The specific handler to remove. If undefined, all handlers for the event are removed
Returns Diagram The Observable instance for method chaining

undo
Executes the next undoable action on top of the undo stack if any.

updateConnectionModel
Updates the connection's underlying data model. Calls the configured updateConnectionModel function if available.
Parameters connection Connection The connection whose model should be updated syncChanges? boolean Whether to synchronize changes immediately
Returns any The result of the update operation, if any

updateShapeModel
Updates the shape's underlying data model. Calls the configured updateShapeModel function if available.
Parameters shape Shape The shape whose model should be updated syncChanges? boolean Whether to synchronize changes immediately
Returns any The result of the update operation, if any

viewport
Gets the viewport rectangle of the diagram.
Returns Rect A Rect representing the current viewport

viewToDocument
Converts a point from view coordinates to document coordinates.
Parameters point any The point in view coordinates
Returns Point The point in document coordinates

viewToModel
Converts a point from view coordinates to model coordinates.
Parameters point any The point in view coordinates
Returns any The point in model coordinates

zoom
Gets or sets the zoom level of the diagram.
Parameters zoom? any The zoom level to set (1.0 = 100%). If not provided, returns the current zoom. options? any Options including the zoom point and metadata
Returns number The current zoom level when used as a getter