Skip to main content


automatically arranges connected diagram shapes in the hierarchical structure

autoPlace(config?: IAutoPlacement): void;


config: object - optional, an object with configuration settings of the autoplacement. If not specified, the default settings will be applied.


const diagram = new dhx.Diagram("diagram_container");;
diagram.autoPlace({    mode: "edges"});

Related sample: Diagram. Default mode. Autoplacement


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

The config object contains two optional properties:

  • mode - (string) the mode of connecting shapes, "direct" (by default) or "edges"
  • graphPadding - (number) sets the distance between unconnected diagrams, "200" by default

Modes of connecting shapes#

mode: "direct"mode: "edges"
Connectors are aligned "from center to center"; they are straight and diagonal.Connectors are aligned "from side to side"; they are straight and 90-degree curved.

Change log:

added in v3.0

Related articles#

Arranging shapes automatically