dhtmlxDiagram API


var diagram = new dhx.Diagram(document.body, {


  • an HTML container (or the ID of an HTML container)
  • a hash of config options (check below)
collapseItem hides all children of the target shape
expandItem shows all children of the target shape
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 shape visible

Data Collection

add adds a new shape to the diagram
copy creates a copy of a shape at the defined position
exists checks whether the specified shape exists in the diagram
filter filters the shapes in the diagram by the specified key
find finds the shape that corresponds to the specified parameters
findAll finds all the shapes that correspond to the specified parameters
getId returns the id of the shape by its index
getIndex returns the index of the shape by its id
getItem returns the object of a shape by its id
getNearId returns the id of a shape which is nearest to the specified one
load loads data from an external file
map iterates through all items of the diagram
move moves a shape to the defined position
parse loads data from a local data source
remove deletes the specified shape from the diagram
removeAll deletes all shapes from the diagram
serialize serializes the diagram data into an array of JSON objects
update updates properties of the shape


add selects the specified shape
getId returns the id of a selected shape
getItem returns the object of a selected shape
remove unselects a previously selected shape


pdf exports a diagram to a PDF file
png exports a diagram to a PNG file

Events Bus

detach detaches a handler from an event (which was attached before by the on() method)
fire triggers an inner event
on attaches a handler to an inner event of Diagram
AfterCollapse fires after a shape has been collapsed
AfterExpand fires after a shape has been expanded
BeforeCollapse fires before collapsing a shape
BeforeExpand fires before expanding a shape
EmptyAreaClick fires on clicking an empty space in the editor
Scroll fires when a diagram is being scrolled
ShapeClick fires on clicking a shape
ShapeDblClick fires on double-clicking a shape
ShapeHover fires on hovering over a shape in the editor
ShapeIconClick fires on clicking a toolbar icon
ShapeMouseDown fires when the left mouse button is moved down over a shape

Data Collection

AfterAdd fires after adding a shape
BeforeAdd fires before adding a shape
Change fires on changes in the diagram
Load fires on loading data into the diagram


AfterSelect fires after selecting a shape
AfterUnSelect fires after unselecting a shape
BeforeSelect fires on selecting a shape, but before the shape is really selected
BeforeUnSelect fires on unselecting a shape, but before the shape is really unselected
defaultLinkType the default type of a connector
defaultShapeType the default type of a shape
gridStep defines the size of a grid cell that defines the step of moving a shape
lineGap adds an offset for two connected shapes, and fills the gap with an additional line
margin margins for autoplacement in the diagram
scale defines the diagram scale
select enables selection in the diagram
toolbar sets a toolbar with buttons for shapes
type defines the type of a diagram
Back to top