Skip to main content

DHTMLX Diagram Editor overview

The DHTMLX Diagram component provides you with Editor that allows you to try and apply your designer skills in building neat and nice-looking diagrams.

Editor in the default mode

The interface of the editor initialized in the default mode consists of four functional parts:

  • toolbar
  • left panel
  • grid area
  • right panel

To build a diagram, you need either to drag the necessary items from the left panel or create a copy of the items via the per-item toolbar.

You can adjust the attributes of the items via sidebar options of the right panel. To accelerate the styling process, use Alt (Option) + Ctrl (Cmd) + С combination to copy styles of an item and Alt (Option) + Ctrl (Cmd) + V to apply these styles to the chosen items.

Diagram. Default mode. Wide flowchart

You may customize the left panel and, if you have added a custom shape, configure the right panel according to the attributes of your shape.

Editor in the org chart mode

The interface of the editor initialized in the org chart mode consists of three parts:

  • toolbar
  • grid area
  • right panel

Note, the editor in this mode does not have the left panel

To build a diagram in the org chart mode of the editor, you need to select a shape and add a new child for it. The shapes are draggable from one parent item to another. The moved item is dragged with all its child items.

You can adjust the attributes of the shapes via the available sidebar options of the right panel. To accelerate the styling process, use Alt (Option) + Ctrl (Cmd) + С combination to copy styles of an item and Alt (Option) + Ctrl (Cmd) + V to apply these styles to the chosen items.

Diagram editor. Org chart mode. Basic initialization

Select any card in the example below and you will notice that sidebar options for editing a shape with an image differs from the sidebar options for editing a simple card.

If you've added a custom shape to the editor in the org chart mode, you can configure the right panel to be able to edit custom properties of the shape.

You can add assistant or partner items for a parent shape of any level. The assistant or partner items can't be parent items.

Diagram editor. Org chart mode. Basic initialization

The connection between the parent shape and its partner is always horizontal. Also, the connections between the parent shape and all its children will become horizontal after you add a partner item for the parent, even if the connections were vertical before.

Diagram editor. Org chart mode. Basic initialization

Editor in the mindmap mode

The interface of the editor initialized in the mindmap mode consists of three parts:

  • toolbar
  • grid area
  • right panel

Note, the editor in this mode does not have the left panel

To build a diagram in the mindmap mode of the editor, you need to select a shape and add a new child for it. The shapes are draggable from one parent item to another. The moved item is dragged with all its child items.

You can adjust the attributes of the shapes via the available sidebar options of the right panel. To accelerate the styling process, use Alt (Option) + Ctrl (Cmd) + С combination to copy styles of an item and Alt (Option) + Ctrl (Cmd) + V to apply these styles to the chosen items.

Diagram editor. Mindmap mode. Emotions mind map

If you've added a custom shape to the editor in the mindmap mode, you can configure the right panel to be able to edit custom properties of the shape.

What's next

That's all. Now you can start working with diagrams or keep exploring the inner world of JavaScript Diagram and Diagram Editor.