In this article, we will provide you with a detailed overview of this important functionality and explain how it can be useful for your web project.
What is DHTMLX Diagram Editor
Editing modes in JS Diagram Editor
One of the main peculiarities about the DHTMLX editor is the availability of several editing modes.
Currently, you can make use of three modes:
- Default mode
- Org chart mode
It provides everything you need to visually present a company’s internal structure via an organizational chart. This mode is also great for building family trees.
- Mind map mode
This mode is solely dedicated to depicting various ideas and concepts via a mind map. The DHTMLX mind map commonly consists of “topic” shapes that are connected by “curved” lines and placed around the main idea. Other types of shapes can be used in DHTMLX mind maps as well.
Structural Elements of DHTMLX Editor and Their Features
The first thing that catches the eye when you start working with the DHTMLX Diagram editor is its simple and intuitive UI. You can quickly master this tool and make the most of it in your projects.
The toolbar is located at the top of the DHTMLX Diagram editor. By default, it offers a range of useful controls that help to manage the process of creating a diagram.
There is also an opportunity to apply zooming for reviewing complex structures in more detail.
It is really useful to be able to save your work progress in a file and continue later at any time. For these purposes, the toolbar includes controls for importing and exporting data in JSON format.
Once your diagram is ready, you can estimate the result by enabling the preview mode or exporting your diagram as a PDF or PNG file.
Thus, by default, the left panel is divided into three corresponding parts. Any diagram item presented in this panel can be easily moved to the grid area for building diagrams with drag and drop.
The grid area is the main working space where you actually arrange shapes selected from the left panel and style them via the right panel to get a good-looking diagram at the end.
After dragging all required diagram elements (shape, group, swimlane) into the grid area, you can start manipulating them with no delay. All you have to do is to click on any element placed on the grid and you’ll see a personal toolbar that allows performing various editing operations (copy, remove, add a connector line, etc.). A set of editing options provided in personal toolbars depends on the enabled editing mode and shape positioning. In the default mode, personal toolbars of shapes have a bit limited capabilities when placed within a group or a swimlane. When working with shapes, you’ll also be able to rotate a shape with a corresponding icon and resize it using special handlers.
In the org chart and mind map modes, it is possible to instantly reposition any parent shape together with its children using drag and drop, thereby rearranging the structure of your diagram with minimum time and effort.
Any parent shape in the org chart mode can be complemented with assistant and partner items. The first item helps to show assistants and secretaries in the organization’s structure, while the second one is absolutely essential for creating family trees.
One more useful feature that can be utilized in the grid is inline editing. Using this feature, you have an opportunity to change the text content of your diagram on the go.
To speed up your work in the grid area, we also introduced support for popular keyboard shortcuts. For instance, you can select several diagram items and perform various operations on them simultaneously using the Shift+Left Click combination. The full list of available shortcuts is provided on this page.
The right panel is used for adjusting the visual appearance of the whole diagram or any of its elements to your project requirements. It comes with a collection of editing parameters for giving a selected diagram element (shape, group, swimlane) a new look. The number of available editing options for a specific item depends on its type and configuration. The panel is invoked when selecting the diagram element that you want to edit.
Using the right panel, you can perform the following operations:
- set a grid step for moving diagram elements,
- change shape parameters (positioning, size, stroke, color),
- modify attributes for groups and swimlanes,
- play around with text content,
- specify settings for connector lines.
More details on the sections described above can be found in these guides.
But what about editing custom shapes with non-standard parameters that are missing in the right panel? No worries, you can add these parameters in the structure of the right panel and make custom shapes fully editable.
To save time usually spent on tuning the same diagram elements (shapes, groups, swimlanes) manually, there is an opportunity to add similar elements with different configurations to the left panel.
To create maximally comfortable conditions for manipulating diagram elements in the grid area, you can configure a personal toolbar of any element in the desired way. For instance, it is possible to change the order of controls in the toolbar, remove unnecessary options, or add custom ones. This capability is available in all three editing modes.
This article was originally published in the DHTMLX blog on March 15th, 2022.