Skip to main content



The property is available only in the default mode of the editor (type:"default")

The default sections of the left panel are: Shapes, Groups, Swimlanes.

Using the shapeSections property you can change the structure of the left panel and display only the items which you need there.


Optional. An object which specifies sections of items that will be shown in the left panel of the editor


shapeSections?: {
[key: string]: any


The shapeSections object can contain a set of key:value pairs where:

  • key - the name of a section
  • value - an array which can include:
    • an object with one key:value pair. The list of available pairs is given below:
      • flowShapes: true - (optional) displays all available flow-chart shapes
      • org: true - (optional) displays "card" and "img-card" shapes
      • group: true - (optional) displays a basic set of groups
      • swimlane: true - (optional) displays a basic set of swimlanes
    • a string value with a specific type of the item to be rendered in the section (for example, "text", "topic", etc.)


const editor = new dhx.DiagramEditor("editor_container", {
shapeSections: {
"Swimlane": [{ swimlane: true }],
"Groups": [{ group: true }],
"Flowchart shapes": [{ flowShapes: true }],
"Org shapes, text, topic": [{ org: true }, "text", "topic"]

Related articles: Left Panel

Related samples: