{"id":8398,"date":"2021-04-15T09:57:52","date_gmt":"2021-04-15T06:57:52","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=8398"},"modified":"2026-01-23T13:30:55","modified_gmt":"2026-01-23T10:30:55","slug":"dhtmlx-diagram-3-1-with-mind-maps","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-diagram-3-1-with-mind-maps\/","title":{"rendered":"DHTMLX Diagram 3.1 with Mind Maps, Configurable Per-Shape Toolbar, Custom Event Handlers, and TypeScript Support"},"content":{"rendered":"

DHTMLX Diagram has been updated to version 3.1. We have incorporated plenty of feedback from the users of our JavaScript diagramming component<\/a> into the release. Now you can create and customize mind maps, edit them on the fly via the mind map editor, fine-tune a per-shape toolbar, and add custom event handlers to custom shapes. Besides, built-in type definitions become available to help you code diagrams faster.<\/p>\n

Test the new trial version 3.1 free for 30 days<\/a> and explore the release details in our article.<\/p>\n

Brand-New Mind Map Diagram<\/h5>\n

The keynote of the release 3.1 is the introduction of a new diagram type – mind map<\/a>. Mind maps are intended for the visualization of information with multiple hierarchically arranged concepts branching off from the core idea. This diagram type can be applied to structure business, scientific, technical, and any other kinds of data.<\/p>\n

\"DHTMLXCheck the sample ><\/a><\/p>\n

Creating mind maps using the DHTMLX Diagram library is now possible due to a new type of shapes specific to mind maps called the “topic” shapes<\/a>. They are the default type of shapes in DHTMLX mind maps. <\/p>\n

\"DHTMLX<\/p>\n

The library’s API allows configuring topic shapes according to your requirements. You can adjust the shapes’ size, offset, background and border color, text decoration and alignment as well as apply your own CSS classes to shapes. <\/p>\n

To arrange shapes in the right hierarchical order, you can either specify the parent id of each shape via the parent<\/strong> configuration property or link shapes to each other<\/a> using the configuration properties of the connector object. The from<\/strong> and to<\/strong> properties of the connector object enable you to define which shapes to link with a particular connector. Besides, you can choose if a connector is a dashed or solid line with the help of the optional type<\/strong> property:<\/p>\n

const<\/span> data =<\/span> [<\/span>
\n       \/\/ shapes<\/span>
\n    {<\/span> id:<\/span> "1"<\/span>,<\/span> text:<\/span> "49 emotions"<\/span> }<\/span>,<\/span>
\n    {<\/span> id:<\/span> "2"<\/span>,<\/span> text:<\/span> "Positive and lively"<\/span> }<\/span>,<\/span>
\n    {<\/span> id:<\/span> "3"<\/span>,<\/span> text:<\/span> "Quiet positive"<\/span> }<\/span>,<\/span>
\n    {<\/span> id:<\/span> "4"<\/span>,<\/span> text:<\/span> "Caring"<\/span> }<\/span>,<\/span>
\n    {<\/span> id:<\/span> "5"<\/span>,<\/span> text:<\/span> "Reactive"<\/span> }<\/span>,<\/span>
\n    \/\/ connectors<\/span>
\n    {<\/span> "id"<\/span>:<\/span> "1-2"<\/span>,<\/span> "from"<\/span>:<\/span> "1"<\/span>,<\/span> "to"<\/span>:<\/span> "2"<\/span>,<\/span> "type"<\/span>:<\/span> "dash"<\/span> }<\/span>,<\/span>
\n    {<\/span> "id"<\/span>:<\/span> "1-3"<\/span>,<\/span> "from"<\/span>:<\/span> "1"<\/span>,<\/span> "to"<\/span>:<\/span> "3"<\/span>,<\/span> "type"<\/span>:<\/span> "dash"<\/span> }<\/span>,<\/span>
\n    {<\/span> "id"<\/span>:<\/span> "1-4"<\/span>,<\/span> "from"<\/span>:<\/span> "1"<\/span>,<\/span> "to"<\/span>:<\/span> "4"<\/span>,<\/span> "type"<\/span>:<\/span> "line"<\/span> }<\/span>,<\/span>
\n    {<\/span> "id"<\/span>:<\/span> "1-5"<\/span>,<\/span> "from"<\/span>:<\/span> "1"<\/span>,<\/span> "to"<\/span>:<\/span> "5"<\/span>,<\/span> "type"<\/span>:<\/span> "line"<\/span> }<\/span>,<\/span>
\n]<\/span>;<\/span><\/div><\/div>\n

\"DHTMLX<\/p>\n

While a solid line is the default connector type, you can alter it via the defaultLinkType<\/strong> property of the diagram object:<\/p>\n

const<\/span> diagram =<\/span> new<\/span> dhx.Diagram<\/span>(<\/span>document.body<\/span>,<\/span> {<\/span>
\n    type:<\/span> "mindmap"<\/span>,<\/span>
\n    defaultLinkType:<\/span> "line"<\/span>        
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
const<\/span> diagram =<\/span> new<\/span> dhx.Diagram<\/span>(<\/span>document.body<\/span>,<\/span> {<\/span>
\n    type:<\/span> "mindmap"<\/span>,<\/span>
\n    typeConfig:<\/span> {<\/span>
\n        direction:<\/span> "right"<\/span>,<\/span>
\n    }<\/span>
\n}<\/span>)<\/span>;<\/span>
\ndiagram.data<\/span>.parse<\/span>(<\/span>data)<\/span>;<\/span><\/div><\/div>\n

If you would like to place some shapes to the left and some to the right, you can make use of the side<\/strong> attribute of the typeConfig<\/strong> object. The side<\/strong> attribute allows indicating which shapes to be drawn to the left and to the right of the root shape by specifying their ids:<\/p>\n

const<\/span> diagram =<\/span> new<\/span> dhx.Diagram<\/span>(<\/span>document.body<\/span>,<\/span> {<\/span>
\n    type:<\/span> "mindmap"<\/span>,<\/span>
\n    typeConfig:<\/span> {<\/span>
\n        side:<\/span> {<\/span>
\n            left:<\/span> [<\/span>"2"<\/span>,<\/span> "3"<\/span>]<\/span>,<\/span>
\n            right:<\/span> [<\/span>"4"<\/span>,<\/span> "5"<\/span>]<\/span>,<\/span>
\n        }<\/span>
\n    }<\/span>
\n}<\/span>)<\/span>;<\/span>
\ndiagram.data<\/span>.parse<\/span>(<\/span>data)<\/span>;<\/span><\/div><\/div>\n

When configuring a mind map, you can also decide which child shapes to show and which to hide. The open<\/strong> attribute shows child shapes of a particular parent shape being true<\/em> by default. With the help of the openDir<\/strong> attribute you can specify more precisely whether to show child shapes to the left or right of the parent shape:<\/p>\n

const<\/span> data =<\/span> [<\/span>
\n    {<\/span>
\n        "id"<\/span>:<\/span> "1"<\/span>,<\/span> "text"<\/span>:<\/span> "49 emotions"<\/span>,<\/span>
\n        "openDir"<\/span>:<\/span> {<\/span>
\n            left:<\/span> true<\/span>,<\/span>
\n            right:<\/span> false<\/span>,<\/span>
\n        }<\/span>
\n    }<\/span>,<\/span>
\n    {<\/span> "id"<\/span>:<\/span> "2"<\/span>,<\/span> "text"<\/span>:<\/span> "Positive and lively"<\/span>,<\/span> "parent"<\/span>:<\/span> "1"<\/span> }<\/span>,<\/span>
\n    {<\/span> "id"<\/span>:<\/span> "3"<\/span>,<\/span> "text"<\/span>:<\/span> "Quiet positive"<\/span>,<\/span> "parent"<\/span>:<\/span> "1"<\/span> }<\/span>,<\/span>
\n    {<\/span> "id"<\/span>:<\/span> "4"<\/span>,<\/span> "text"<\/span>:<\/span> "Caring"<\/span>,<\/span> "parent"<\/span>:<\/span> "1"<\/span> }<\/span>,<\/span>
\n    {<\/span> "id"<\/span>:<\/span> "5"<\/span>,<\/span> "text"<\/span>:<\/span> "Reactive"<\/span>,<\/span> "parent"<\/span>:<\/span> "1"<\/span> }<\/span>,<\/span>
\n]<\/span>;<\/span><\/div><\/div>\n

\"Hiding<\/p>\n

Custom Shapes in Mind Maps<\/h5>\n

The DHTMLX Diagram library makes it possible to mix various shapes in one diagram. Thus, you can create a mind map and add org chart shapes or any other diagram shapes into it. All you need to do is to specify the desired type of shape in the shape configuration object:<\/p>\n

const<\/span> data =<\/span> [<\/span>
\n    \/\/ create an "img-card" shape of Org Chart with the related configuration<\/span>
\n    {<\/span> id:<\/span> "1"<\/span>,<\/span> text:<\/span> "Chairman & CEO"<\/span>,<\/span> type:<\/span> "img-card"<\/span>,<\/span> img:<\/span> "..\/avatar-06.jpg"<\/span> }<\/span>,<\/span>
\n    \/\/ create default "topic" shapes of Mind Map<\/span>
\n    {<\/span> id:<\/span> "2"<\/span>,<\/span> text:<\/span> "Manager"<\/span>,<\/span> parent:<\/span> "1"<\/span> }<\/span>,<\/span>
\n    {<\/span> id:<\/span> "2.1"<\/span>,<\/span> text:<\/span> "Marketer"<\/span>,<\/span> parent:<\/span> "2"<\/span> }<\/span>,<\/span>
\n    {<\/span> id:<\/span> "2.2"<\/span>,<\/span> text:<\/span> "Team Lead "<\/span>,<\/span> parent:<\/span> "2"<\/span> }<\/span>,<\/span>
\n    \/\/ more options<\/span>
\n]<\/span>;<\/span>
\n 
\n\/\/ initializing the mind map<\/span>
\nconst<\/span> diagram =<\/span> new<\/span> dhx.Diagram<\/span>(<\/span>document.body<\/span>,<\/span> {<\/span>
\n    type:<\/span> "mindmap"<\/span>,<\/span>
\n}<\/span>)<\/span>;<\/span>
\ndiagram.data<\/span>.parse<\/span>(<\/span>data)<\/span>;<\/span><\/div><\/div>\n

\"DHTMLX<\/p>\n

You can also change the default type of shapes via the defaultShapeType<\/strong><\/a> configuration option of the diagram. The new default type will be applied to all shapes except the ones where another type is specified in the shape configuration object:<\/p>\n

const<\/span> diagram =<\/span> new<\/span> dhx.Diagram<\/span>(<\/span>document.body<\/span>,<\/span> {<\/span>
\n    type:<\/span> "mindmap"<\/span>,<\/span>
\n    defaultShapeType:<\/span> "rectangle"<\/span>
\n}<\/span>)<\/span>;<\/span>
\n 
\nconst<\/span> data =<\/span> [<\/span>
\n    {<\/span> id:<\/span> "1"<\/span>,<\/span> text:<\/span> "Chairman & CEO"<\/span>,<\/span> type:<\/span> "card"<\/span> }<\/span>,<\/span>    
\n    {<\/span> id:<\/span> "2"<\/span>,<\/span> text:<\/span> "Manager"<\/span>,<\/span> parent:<\/span> "1"<\/span> }<\/span>,<\/span>
\n    {<\/span> id:<\/span> "3"<\/span>,<\/span> text:<\/span> "Technical Director"<\/span>,<\/span> parent:<\/span> "1"<\/span> }<\/span>,<\/span>
\n    {<\/span> id:<\/span> "4"<\/span>,<\/span> text:<\/span> "CCO"<\/span>,<\/span> parent:<\/span> "1"<\/span> }<\/span>,<\/span>
\n    {<\/span> id:<\/span> "5"<\/span>,<\/span> text:<\/span> "Product Manager"<\/span>,<\/span> parent:<\/span> "1"<\/span> }<\/span>
\n]<\/span>;<\/span><\/div><\/div>\n

\"DHTMLX<\/p>\n

const<\/span> diagram =<\/span> new<\/span> dhx.Diagram<\/span>(<\/span>document.body<\/span>,<\/span> {<\/span>
\n    type:<\/span> "mindmap"<\/span>,<\/span>
\n    \/\/ specifies the new shape type as a type for all shapes<\/span>
\n    defaultShapeType:<\/span> "flowView"<\/span>
\n}<\/span>)<\/span>;<\/span>
\n 
\nfunction<\/span> template(<\/span>{<\/span> title,<\/span> view,<\/span> cr,<\/span> br,<\/span> conversion,<\/span> link }<\/span>)<\/span>{<\/span>
\n    ...
\n}<\/span>
\n
\nfunction<\/span> openModalInfo(<\/span>title,<\/span> text)<\/span> {<\/span>
\n     ...
\n}<\/span>
\n 
\ndiagram.addShape<\/span>(<\/span>"flowView"<\/span>,<\/span> {<\/span>
\n    template:<\/span> template,<\/span>
\n    eventHandlers:<\/span> {<\/span>
\n        onclick:<\/span> {<\/span>
\n            info:<\/span> function<\/span>(<\/span>event,<\/span> item)<\/span> {<\/span>
\n                openModalInfo(<\/span>item.title<\/span>,<\/span> item.info<\/span>)<\/span>;<\/span>
\n            }<\/span>
\n        }<\/span>
\n    }<\/span>
\n}<\/span>)<\/span>;<\/span>
\n
\nconst<\/span> customShape =<\/span> [<\/span>
\n    \/\/ an appropriate data set<\/span>
\n]<\/span>;<\/span>
\n 
\ndiagram.data<\/span>.parse<\/span>(<\/span>customShape)<\/span>;<\/span><\/div><\/div>\n

This custom mind map is available as a CSS template in the DHTMLX collection of templates.<\/p>\n

Mind Map Editor<\/h5>\n

Together with the introduction of a brand-new diagram type DHTMLX Diagram receives a new editor specifically designed for working with mind maps. The mind map editor<\/a> provides all the possibilities available in the diagram and org chart editors. It has two panels: one at the top and one to the right of the editing area.<\/p>\n

\"DHTMLXCheck the sample ><\/a><\/p>\n

In order to create a mind map editor, you need to specify the editor type in the editor configuration object:<\/p>\n

var<\/span> editor =<\/span> new<\/span> dhx.DiagramEditor<\/span>(<\/span>document.body<\/span>,<\/span> {<\/span>
\n    type:<\/span> "mindmap"<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

A wide range of API properties enables you to configure the editor to meet your needs. You can manipulate editor controls and what’s more, customize the right panel to equip it with the necessary editing options. It may especially come in useful when you would like to edit a custom mind map like in the example below.
\n\"DHTMLXCheck the sample ><\/a><\/p>\n

Custom Per-Shape Toolbar in Editors<\/h5>\n

Starting with v3.1, you can customize a per-shape toolbar in all DHTMLX Diagram editors. <\/p>\n

In the case of the mind map editor, the default toolbar consists of four controls for adding a new child shape, creating a new shape to the right of the root shape and to the left of the root shape, and removing a shape. <\/p>\n

To make customization possible, we have added the shapeToolbar<\/strong> configuration property, which allows manipulating toolbar controls and creating custom ones. If this property is specified to true<\/em>, the toolbar will contain all the default controls specific to the editor you work with. To modify the toolbar, you can include only those controls that you need via the shapeToolbar<\/strong> property. The order in which you specify the controls determines how they are displayed in the toolbar. <\/p>\n

In the example below, we have left two controls in the toolbar: one for removing a shape and another for adding a shape.<\/p>\n

const<\/span> editor =<\/span> new<\/span> dhx.DiagramEditor<\/span>(<\/span>document.body<\/span>,<\/span> {<\/span>
\n    type:<\/span> "mindmap"<\/span>,<\/span>
\n    shapeToolbar:<\/span> [<\/span>"remove"<\/span>,<\/span> "add"<\/span>]<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

\"DHTMLX<\/p>\n

You can not only fine-tune the toolbar by rearranging or disabling some controls but also add custom ones. The best way to add a custom control to the toolbar is to enable the default configuration of the toolbar by specifying the shapeToolbar<\/strong> property to true<\/em> and to set an icon object in the shapeToolbar<\/strong> array. The icon object contains the id of the icon and the HTML content of the icon:<\/p>\n

const<\/span> editor =<\/span> new<\/span> dhx.DiagramEditor<\/span>(<\/span>document.body<\/span>,<\/span> {<\/span>
\n    type:<\/span> "mindmap"<\/span>,<\/span>
\n    shapeToolbar:<\/span> [<\/span>      
\n true<\/span>,<\/span>
\n{<\/span> id:<\/span> "download"<\/span>,<\/span> content:<\/span>"<i class='dxi dxi-download'><\/i>"<\/span> }<\/span>    
\n    ]<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

\"DHTMLX<\/p>\n

Custom Event Handlers<\/h5>\n

From now on, DHTMLX Diagram is able to handle user interactions with custom shapes due to the ability to add custom event handlers. For that purpose, we have introduced the new eventHandlers<\/strong><\/a> attribute of the addShape()<\/strong> method.<\/p>\n

In the example below, we add an event handler to listen to the clicks on the icon with the info<\/strong> class, after which a modal window opens:<\/p>\n

diagram.addShape<\/span>(<\/span>"template"<\/span>,<\/span> {<\/span>
\n    template:<\/span> template,<\/span>
\n    defaults:<\/span> {<\/span>
\n        height:<\/span> 190<\/span>,<\/span>
\n        width:<\/span> 97<\/span>
\n    }<\/span>,<\/span>
\n    eventHandlers:<\/span> {<\/span>
\n        onclick:<\/span> {<\/span>
\n            info:<\/span> function<\/span>(<\/span>event,<\/span> item)<\/span> {<\/span>
\n                openModalInfo(<\/span>item.title<\/span>,<\/span> item.info<\/span>)<\/span>;<\/span>
\n            }<\/span>
\n        }<\/span>
\n    }<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
TypeScript Support<\/h5>\n

And the icing on the cake is TypeScript support<\/a> provided by the DHTMLX Diagram library starting with v3.1. From now on, you can fall back on built-in type definitions and apply type suggestions, type checking, and autocompletion to speed up coding and make it clean and steady. Check the sample ><\/a><\/p>\n

Other Features and Updates<\/h5>\n

The release brings out new events of the editor object: BeforeShapeIconClick<\/strong> and AfterShapeIconClick<\/strong>, BeforeShapeMove<\/strong> and AfterShapeMove<\/strong>. They serve to track such user actions as clicking per-shape toolbar controls and moving shapes. Learn more in the Diagram Editor API reference<\/a>.<\/p>\n

V3.1 also delivers the ability to control the CSS styles of diagrams when they are exported via the export service. From now on, you can disable the export of CSS styles<\/a> or include only the styles you need to export them together with your diagram.<\/p>\n

We aspire to provide you with the complete toolkit for creating mind maps and customizing them to fit your requirements. Feel free to send us your feedback as well as your questions if any arise.<\/p>\n

We invite everyone to try out DHTMLX Diagram and mind mapping during a free 30-day trial period<\/a>. Current clients may download the latest version in their Client’s Area<\/a>.<\/p>\n

Stay tuned!<\/p>\n

Related Materials:<\/h5>\n

\"DHTMLXCheck the sample ><\/a><\/p>\n

Thus, v3.1 gives you full control over the configuration of a per-shape toolbar in all editors (diagram<\/a>, org chart<\/a>, and mind map<\/a>) and enables you to customize editors extensively.<\/p>\n

\"DHTMLXCheck the sample ><\/a><\/p>\n

Moreover, you can create an entirely custom mind map by adding custom shapes via the addShape()<\/strong><\/a> method and making them the default ones. In the example below, we have created a sitemap with landing page previews instead of topic shapes and custom HTML content inside shapes: icon, which opens a popup, icon with an embedded link to a landing page, and custom text, which appears when a user clicks on a shape:<\/p>\n

\"DHTMLXCheck the sample ><\/a><\/p>\n

\"DHTMLXCheck the sample ><\/a><\/p>\n

DHTMLX mind maps provide an opportunity to arrange child shapes both to the right and to the left of the root shape. For this purpose, we have introduced the typeConfig<\/strong><\/a> option, which determines the direction of mind map branches. The direction<\/strong> attribute of the typeConfig<\/strong> option can be set to left<\/em> or right<\/em>:<\/p>\n