DHTMLX Diagram has been a part of our product portfolio for five years and we are very enthusiastic about its prospects. Many web developers rely on this tool for achieving their data visualization goals of various complexity levels. They value our JavaScript diagrams for a flexible API and well-written documentation. But there is one more thing that makes our product special compared to other options currently available on the market. It is the DHTMLX Diagram editor.
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
DHTMLX Diagram editor is an out-of-the-box JavaScript tool designed to make data visualization on the web fast and simple. It helps to create and edit different types of diagrams on the fly, thereby bringing in extra flexibility required for effective working with frequently changing data. But the most pleasant thing about using our JS diagram editor is that you don’t have to perform any code manipulations at all.
How JavaScript Diagram Editor Can be Used in Web Development
When talking about the applicability of our diagram editor, it can be used as a nice addition to a web app or as a handy JavaScript development tool. In other words, it is equally useful for both web developers and end-users.
Most often, our JavaScript diagram editor is integrated into web projects to offer end-users an instrument for building and editing diagrams in an intuitive and code-free way. Programmers, in turn, can apply our JavaScript editor for building UML diagrams that significantly simplify communication within a dev team when delivering apps of any scale. It is also a good practice to use DHTMLX-based diagrams in combination with the editor as a simple JavaScript app for data visualization.
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
This mode can be a great alternative to any JavaScript flowchart builder. It comes with a range of predefined shapes for creating popular diagram types such as flowcharts, decision trees, UML class diagrams, network diagrams, etc. Utilizing these shapes, you can also build a combination of two or more diagrams. Apart from diagram shapes, this mode provides an automatic layout algorithm and two useful visual elements – swimlanes and groups.
- 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.
You may wonder why we decided to create separate modes for org charts and mind maps. The core reason behind that is to make your work with our JavaScript tool more convenient and productive. In the default mode, you can also build these types of diagrams but it will be time-consuming. Knowing that diagrams used for presenting hierarchical data are quite predictable in terms of structure, we created two modes based on standardized arrangement algorithms to help you save time when diagramming with DHTMLX. That is why in org chart and mind map modes, you don’t have to think much about the diagram’s structure since this part of the job is performed under the hood.
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.
Let us get acquainted with all parts of our JavaScript diagram editor library and its capabilities in more detail.
Toolbar
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.
For instance, if you like changes made in one of the editing modes, it is possible to apply them to the diagram using the corresponding button. Otherwise, all modifications can be instantly cleared via the reset button. Undo/redo options provide you with a backup for each editing step in the JavaScript graph editor.
If you get tired of arranging shapes and connector lines by yourself, the auto-layout button will help to do it right with a click. Available only in the default mode, this button activates a special algorithm that transforms a group of chaotically connected shapes into a well-structured JavaScript diagram.
Check the sample >
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.
Left panel
The left panel is available only in the default mode. It serves as a kind of storage unit for previews of items provided in the JavaScript editor. In addition to a pack of predefined diagram shapes, the panel also includes two types of visual elements designed to aid in building diagrams with comprehensive structures. These are groups and swimlanes.
Check the sample >
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.
Grid area
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 in 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.
Check the sample >
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.
In the default mode, it is also possible to manipulate connector lines. You can change their position and form or remove excessive ones. When your diagram becomes too complicated, the ability to add clarifying text labels will help viewers to fully understand visualized processes. In addition, there is an opportunity to specify default settings for new connector lines added via the JavaScript editor in all modes.
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.
Right panel
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.
Customization Options in DHTMLX JavaScript Diagram Editor
Like other DHTMLX products, our JavaScript diagram editor is notable for enhanced customizability. Using the powerful API of our JavaScript diagram library, you can configure the editor in accordance with your project needs.
For instance, if you require some diagram shapes that are not available by default, it is not a problem to create a custom shape and quickly add it with HTML templates.
Previews of custom shapes added to the JavaScript diagram editor will automatically appear in the left panel and you’ll be able to start using them in your project. Apart from that, you can change the way custom shapes are displayed in the panel and even create a separate section for them. For more convenience, you can also easily specify default sections with previews for predefined diagram elements in the left panel of the JavaScript editor.
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.
Check the sample >
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.
The toolbar of the JavaScript diagram editor is also customizable. If necessary, you can specify which controls should be shown and hidden in the toolbar.
Wrapping up
As you can see, the diagram editor is rightly considered to be the key feature of our JavaScript diagram library. It gives web developers freedom to visualize data without coding and at the same time enables end-users to show their skills in creating diagrams.
If you are looking for a simple JavaScript diagram editor but still have doubts that our tool will cover all your needs, download a free 30-day trial version of the DHTMLX Diagram to give it proper testing.
Bear in mind that the diagram editor is a part of the DHTMLX JavaScript Diagram component and cannot be purchased separately.
Related Materials:
- DHTMLX Diagram documentation
- DHTMLX Diagram code snippets
- How to create a JavaScript mindmap diagram with DHTMLX library
- How to create a data flow diagram in JavaScript with DHTMLX
- How to create a basic JavaScript entity relationship diagram with DHTMLX
- How to create a JavaScript tree diagram with DHTMLX
- How to create a JavaScript network diagram with DHTMLX