Name: JavaScript Mind Map - DHTMLX Diagram Library
Rating: 4.8 (34 reviews)

JavaScript Mind Map

A mind map is a radial-like diagram with branches consisting of subtopics surrounding the main topic. Here you will find DHTMLX JavaScript mindmap examples, features, and integration guides with Angular, React, and Vue.

Open a demo on desktop

This mind map template is made with the DHTMLX Diagram library.

Get a 30-day trial to test this demo and 20+ others in your projects free of charge.

Get free trial

Core topic and subtopics

The DHTMLX mind map diagram consists of the main shape outlining the core topic and branches with shapes describing subtopics. The central shape and subtopic nodes have different colors to distinguish the hierarchy levels of the presented information.

Curved lines for connectors

By default, the mind map JS connectors are curved lines. The DHTMLX API allows adjusting the connector settings by redefining the color and width of the line and making it solid or dashed.

Direction of mind map branches

You can define the direction of the HTML mind map branches using the typeConfig object. Thus, you can place subtopics to the left or right of the core topic. Otherwise, it is possible to specify different directions for different shapes instead of setting one direction for all branches.

Expanding and collapsing subtopics

Developers can programmatically expand and collapse mind map branches on the left or right side of the main shape via the expandItem() and collapseItem() methods. The user interface also provides a plus icon for end-users to show and hide separate branches.

Finding and filtering mind map items

If you work with complex mind maps, you might need to search for particular subtopics that match various criteria. The find() method allows specifying the search criteria and returns the first necessary object. The findAll() method enables you to find all the corresponding items. Besides, you can filter all nodes to display only the desired ones using the filter() method.

Inline editing

With inline editing, end-users can manage the contents of mind maps on the fly. DHTMLX Diagram enables them to edit the text of the main topic and subtopics by a simple double-click. Developers don’t need to configure anything, as inline editing works out of the box.

Mindmap JS editor

The DHTMLX Diagram library gives an opportunity to create a live mind map tool for building and editing mind maps right from the UI from scratch. Developers can initialize such an editor in a few lines of code. The mind map editor consists of a grid area for arranging shapes, a configurable toolbar, and a right panel for styling shapes. You can fine-tune the styling options available in the sidebar according to your requirements.

Custom shapes

The DHTMLX JavaScript mindmap library is fully customizable. You can replace built-in topics and subtopics with any figures you like. HTML and SVG templates give you the freedom to create any mind map you can imagine. For example, you can visualize a website and its user flow on the basis of the mind map structure.

Export to PDF/PNG

It is crucial to provide the option to export a mind map to a user-friendly format like PDF/PNG. DHTMLX Diagram permits developers to establish the export functionality for mind maps through the DHTMLX online export service or by utilizing a local export module.

Touch support

DHTMLX Diagram empowers your end-users to flawlessly view and edit mind maps across various devices, thanks to its touch support feature. Intuitive touch gestures like tap, double tap, press, hold, and drag are readily available, allowing users to effortlessly interact with each element of these responsive HTML mind maps.

Localization

Regardless of the language used in your web application, the localization feature simplifies the translation of the interface for the mind map editor, enabling seamless adaptation of the correct labels through the API.

JavaScript Mind Map

What Are JavaScript/HTML Mind Maps and How to Create Them with DHTMLX

Key Features of DHTMLX JavaScript Mindmap