Skip to main content



The autoPlace() method works only in the default mode of the diagram and only for shapes


Automatically arranges connected diagram shapes in the hierarchical structure


autoPlace(config?: object): void;


  • config - (optional) an object with configuration settings of the autoplacement. If not specified, the default settings will be applied. Here you can specify the following parameters:
    • mode - (optional) the mode of connecting shapes, "direct" (by default) or "edges"
    • graphPadding - (optional) sets the distance between unconnected diagrams, 200 by default


const diagram = new dhx.Diagram("diagram_container");;

mode: "edges"

Modes of connecting shapes

"direct" mode

Connector lines with no arrows are aligned "from center to center"; they are straight and diagonal.

"edges" mode

Connector lines are aligned "from side to side".


To add arrows to the lines, specify forwardArrow: "filled" or backArrow: "filled" in the configuration of a line object.

The connector lines in the "edges" mode can be:

  • either straight (if you set connectType: "straight" property of a line object)

  • or 90-degree curved (if you set connectType: "elbow" property of a line object)

Change log: Added in v3.0

Related articles: Arranging shapes automatically

Related sample: Diagram. Default mode. Autoplacement