The DHTMLX Diagram library is composed of various types of diagrams, the most widely used of which is the JavaScript flowchart, which can display any type of workflow, process or system, you can download the evaluation version of DHTMLX Diagram and try it yourself.
In the above ( click here to review>> ), we introduced the application scenarios of Javascript flowcharts, how the flowcharts visualize data, etc. This article will continue to explain why we should use the DHTMLX Diagram control to build Javascript flowcharts!
Download the official version of DHTMLX Diagram
Why choose DHTMLX Diagram to build Javascript flowchart?
Being able to manipulate flowcharts is important for workflow visualization, and a rich and flexible API provides opportunities to achieve the goal, and users can use it to set up javascript/html5 flowcharts.
1. Setting up flowchart elements with multiple configuration options
As you start building JavaScript flowcharts with DHTMLX , you'll appreciate the many useful configuration options. At this point, you can specify the default type of shapes and lines, margins between shapes, a toolbar with shape icons, tooltips, and more.
If you need to provide any specific flowchart shape type in the DHTMLX library, just set it as the value in the type property inside the shape object. Similarly, use the type attribute in the line object to specify the line type of an individual connector.
To save time when preparing data for complex flowcharts, you can use the defaults property to specify default configurations for all shapes and connector lines at once, which also helps improve code readability.
2. Customize and style each flowchart element to customize it to suit your needs
Another key advantage of the JavaScript diagramming library is enhanced customizability, users can style shapes and connector rows in their objects and redefine the corresponding CSS classes. So adjusting the appearance of the main flowchart elements according to the project's requirements should not be a problem, and the text content in the shapes can be easily changed through inline editing.
If that wasn't enough, there is also the possibility to create custom flowchart shapes and define templates for them. To add your own shape to the flowchart, you should use the addShape method.
3. Freely manipulate the shape through the API and make changes when needed
The js flowchart of DHTMLX Diagram is highly flexible when it comes to manipulating chart items through the component's API .
For example, if you want to build a large flowchart without arranging the entire structure in a proper order, there is a special auto layout algorithm that can help you do this job faster. The algorithm transforms a set of randomly connected shapes into an aesthetically pleasing hierarchy, with orthogonal or radial positioning of the shapes. During automatic placement, you can connect shapes using diagonal (direct mode) or right-angle (edge mode) connectors.
This feature is enabled in two ways:
- Use the autoplacement attribute:
const diagram = new dhx.Diagram("diagram_container");
diagram.data.parse(data);
diagram.autoPlace({
mode: "direct"| "edges",
placeMode: "orthogonal"|"radial"
});- Use the autoPlace() method:
const diagram = new dhx.Diagram(document.body, {
type: "default",
autoplacement: {
mode: "direct"| "edges",
placeMode: "orthogonal"|"radial",
}
});It is possible to add new shapes, delete old ones, and even create diagrams from scratch by using the associated data collection API.
Using the add method, you can add new shapes to the flowchart:
diagram.data.add({id:"3.2", text:"New Item", parent:"3"});Removing some unwanted shapes, or even all shapes can be done with the remove method:
diagram.data.remove(3.2);
diagram.data.removeAll();If you're happy with the shapes you already have, but their content needs improvement, you can apply the update method to put new data into the shapes.
diagram.data.update("1", {text:"Some new text"});4. Make wide flowcharts that are easy to read and analyze
With zoom and scroll capabilities, wide flowcharts containing large amounts of data no longer bother you and your end users. Considering the size of the flowchart, you can zoom in or out with the help of the scale property:
var diagram = new dhx.Diagram (diagram"diagram_container", {type: "org", scale: 0.7});
diagram.data.parse(data);Another option is to add horizontal and/or vertical scrolling to view the flowchart.
To make it easier for end-users to work with complex structures, you can also supplement flowcharts with swimlanes, which help to divide the entire visualization process into independent stages, like in this example.
Also a useful feature here is the ability to clarify tricky parts of the flowchart with titles on connecting lines.
5. Export flowchart to PNG and PDF
If you export your flowchart as a png or pdf, you can easily save, store and share your process visualization with others.
The pdf or png export methods allow not only exporting diagrams, but also adjusting export settings:
//export with config settings
diagram.export.png({
type:"jpeg"
fullPage: true
});6. Provide seamless front-end and back-end integration
What really matters is that our javascript flowcharts can be integrated into any web application built using any client-side and server-side technology, and the data is easily loaded into the diagram in JSON format. The demos we provide will give you a clear understanding of how to integrate DHTMLX Diagram into applications based on popular JavaScript frameworks (Angular, React, Vue.js). With DHTMLX Diagram your flowcharts will perform equally well on any touchscreen device and all modern browsers.
7. Build a flowchart in the DHTMLX Diagram editor
As an alternative to the general coding method, you can also use the Diagram Editor, which serves as a supplementary tool to our diagram library, with three modes of operation (Default, Org Chart, Mind Map). Embedding the editor into your application will enable end users to build flowcharts and other types of diagrams in a code-free manner using more than 30 built-in shapes. It has a user-friendly interface, supports drag and drop, and consists of four main parts:
- A toolbar that controls the entire editing process;
- Select the desired shape in the left panel;
- grid areas for interacting with shapes;
- Right panel for changing the appearance of the chart.
In terms of functions, the editor supports the main features of chart components, such as automatic layout algorithms, custom shapes, swimming lines, inline editing, etc. For convenient use of custom shapes, you can customize both panels of the editor.
Besides that, the editor also offers some unique features. For example, it is possible to select multiple shapes and perform some basic operations simultaneously (drag, copy, paste, delete), set custom toolbars for shapes, use special hotkey combinations to speed up styling of similar shapes, etc.
In addition to the auto-layout algorithm, end users can organize shapes accurately in the editor using snaplines and multiple alignment and distribution options.
