{"id":14628,"date":"2025-11-25T15:15:47","date_gmt":"2025-11-25T12:15:47","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=14628"},"modified":"2026-04-28T15:31:14","modified_gmt":"2026-04-28T12:31:14","slug":"introducing-dhtmlx-diagram-6-1","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/introducing-dhtmlx-diagram-6-1\/","title":{"rendered":"Introducing DHTMLX Diagram 6.1 with a New PERT Mode and More Flexible Diagram Editor Configuration"},"content":{"rendered":"

Today, we are excited to announce the release of DHTMLX Diagram 6.1 introducing a new visualization mode along with enhanced flexibility and control over your code-free diagramming experience. The killer feature of this release is the new PERT mode, which enables the creation of detailed PERT charts, and what is most interesting, data syncronization with DHTMLX-based Gantt charts. The Diagram editor also received a few valuable enhancements. Now it is possible to flexibly modify the behavior of existing keyboard shortcuts and set targeted limitations for shape manipulations in the editor.<\/p>\n

This release is shipped with a pack of live samples covering the key aspects of v6.1and a new demo demonstrating the possibility of building org charts with DHTMLX and AI.<\/p>\n

Let us review all the novelties of DHTMLX Diagram 6.1 in more detail.<\/p>\n

Introducing PERT Mode<\/h2>\n

The new PERT mode of our JavaScript diagramming component <\/a> offers a convenient way to create and configure PERT charts.
\n\"exampleCheck the sample ><\/a><\/p>\n

This type of diagram is commonly used to visualize sequences and interdependencies of tasks within a project in a clear and well-structured way. As a result, it becomes much easier to determine the critical path and estimate the overall project duration.<\/p>\n

The new mode is not just another visualization option, but a great addition to our JavaScript Gantt component<\/a>. From now on, it is possible to use PERT charts in combination with DHTMLX-based Gantt charts. This kind of integration provides project managers with a more coherent picture of the project. A PERT chart is well-suited for the early planning stage of a project, while a Gantt chart serves as a logical follow-up with a timeline-based overview of tasks and tracking their progress.<\/p>\n

\"PERTCheck the sample ><\/a>
\nLet us dig deeper and see how the new mode can benefit web developers. <\/p>\n

Developers’ Perspective on PERT Mode<\/h2>\n

You may be wondering what lies behind our decision to create a separate mode for creating PERT charts. The main reason here is to simplify the visualization process. Previously, you could build PERT charts in the default mode, but it would require extra effort on your part. You\u2019d have to create your own templates of PERT shapes and properly organize them. With the new PERT mode, you can make use of a built-in arrangement algorithm and predefined diagram elements specifically designed for building PERT charts with ease. <\/p>\n

Now, we can proceed to putting this mode into action and exploring other technical peculiarities of this novelty in the Diagram API.<\/p>\n

Setting Up the PERT Mode<\/h3>\n

If you need to complement your visualization arsenal with the PERT mode, the first thing you should do is specify the newly added “pert”<\/strong> type in the type<\/strong> configuration option:<\/p>\n

const<\/span> diagram =<\/span> new<\/span> dhx.Diagram<\/span>(<\/span>"diagram_container"<\/span>,<\/span> {<\/span>
\n    type:<\/span> "pert"<\/span>,<\/span>
\n}<\/span>)<\/span>;<\/span>
\ndiagram.data<\/span>.parse<\/span>(<\/span>dataset)<\/span>;<\/span><\/div><\/div>\n

The data structure in the PERT mode matches the data structure of DHTMLX Gantt. It helps ensure a seamless integration and data synchronization between Diagram and Gantt components. <\/p>\n

Built-in PERT Shapes<\/h3>\n

By default, the structure of PERT charts in our Diagram component includes three main elements:<\/p>\n

1) Task shape – represents a separate project task with the specified dates and duration.
\n\"PERT<\/p>\n

2) Milestone shape – illustrates a project milestone without the duration.
\n\"PERT<\/p>\n

3) Project group – serves as a container for tasks and milestones. It also supports nesting and visual grouping.
\n\"PERT<\/p>\n

When preparing a dataset for your PERT chart, you can add specific properties for tasks<\/a>, milestones<\/a>, and project groups<\/a>. It is worth noting that task and milestone shapes inherit common properties of other built-in shapes available in DHTMLX Diagram, while the project element adopts common group properties, some of which are automatically generated during rendering.<\/p>\n

Customization Options<\/h3>\n

Just like other DHTMLX libraries, our Diagram component is notable for its enhanced customization capabilities, which are now also applicable in the PERT mode. For instance, you can implement the following customizations using the rich Diagram API:<\/p>\n

The configuration of this diagram type also includes the typeConfig<\/a><\/strong> property with the new dateFormat<\/strong> parameter, which is responsible for displaying dates in the UI.<\/p>\n