{"id":8521,"date":"2021-05-26T17:02:35","date_gmt":"2021-05-26T14:02:35","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=8521"},"modified":"2023-05-02T15:52:30","modified_gmt":"2023-05-02T12:52:30","slug":"create-javascript-mindmap-diagram-dhtmlx-library","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/create-javascript-mindmap-diagram-dhtmlx-library\/","title":{"rendered":"How to Create a JavaScript Mindmap Diagram with DHTMLX Library"},"content":{"rendered":"<p><em>Welcome back to our series of posts on how to boost your data visualization capabilities with the DHTMLX Diagram. The collection of diagrams included in our library has recently received a new addition \u2013 a JavaScript mind map. In this article, you will get some general insights into mind maps and learn how to build them with DHTMLX in two different ways.<\/em><\/p>\n<h5>What is a mind map<\/h5>\n<p>A mind map is a type of diagram that provides a simple but effective way to hierarchically present ideas and concepts of any complexity. This visualization tool is based on radiant thinking. It means that a key concept is placed at the center of the diagram and associated ideas branch off from it in different directions using curvy connectors, specifying relationships between them. Thus, you can break down complex ideas into smaller chunks of information and describe them in greater depth. It is also common to highlight groups of ideas in mind maps with different colors and add some related images, thereby stimulating a better perception and memorization of the \u201cmapped\u201d information.<\/p>\n<p>The concept of mind mapping was brought into the mainstream by the British psychologist Tony Buzan in the late 1960s. Since then, it has become a popular approach to organizing thoughts more productively and avoid information overloads in different kinds of activities such as:<\/p>\n<ul>\n<li>Learning techniques<\/li>\n<li>Personal knowledge management<\/li>\n<li>Project planning<\/li>\n<li>Decision making<\/li>\n<li>Brainstorming <\/li>\n<li>Note-taking<\/li>\n<\/ul>\n<h5>JavaScript mindmap example by DHTMLX<\/h5>\n<p>Our <a href=\"https:\/\/snippet.dhtmlx.com\/twd25ww1\" rel=\"noopener\" target=\"_blank\">example<\/a> shows the mind map of the classification of human emotions designed by the HUMAINE association. Dubbed as EARL (emotional annotation and representation language), it is intended to help tech specialists develop interactive emotion-oriented systems (affective computing).<\/p>\n<p>This classification includes several groups of emotions and the mind mapping approach suits perfectly for its visual presentation. It has a standard two-dimensional structure, where the root shape with the name of the classification is positioned in the middle, ten categories of emotions stem from it in opposite directions, and actual emotion types emanating from these groups. DHTMLX Diagram comes with special oval shapes (named as topic shapes) for displaying mind map elements and curvilinear connectors for linking them with each other. Groups of positive emotions are depicted in green, while groups of negative emotions are shown in grey to make the diagram more visually appealing and comprehensible.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/05\/image3.png\" alt=\"DHTMLX Diagram - mind map\" width=\"636\" height=\"624\" class=\"aligncenter size-full wp-image-8522\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/05\/image3.png 636w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/05\/image3-300x294.png 300w\" sizes=\"auto, (max-width: 636px) 100vw, 636px\" \/><\/p>\n<p>Starting from v3.1, our Diagram library enables you to create mind maps using a traditional coding approach or via a newly-made DHTMLX mind map editor without any code manipulations at all. Let us explore both of these options in more detail.<\/p>\n<h5>How to create a JavaScript mindmap with DHTMLX library<\/h5>\n<p>We start with highlighting key aspects of how to build your own DHTMLX mind map of the EARL classification by writing code. We will also pay special attention to the available positioning options for child shapes in relation to the root shape and the possibility to show or hide a specific branch of the diagram.<\/p>\n<p><strong>1) Example of creating a basic DHTMLX mindmap:<\/strong><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/05\/image7.png\" alt=\"DHTMLX mind map - example\" width=\"651\" height=\"244\" class=\"aligncenter size-full wp-image-8525\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/05\/image7.png 651w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/05\/image7-300x112.png 300w\" sizes=\"auto, (max-width: 651px) 100vw, 651px\" \/><\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> diagram <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">Diagram<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;diagram&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span> <br \/>\n&nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;mindmap&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\ndiagram.<span class=\"me1\">data<\/span>.<span class=\"me1\">parse<\/span><span class=\"br0\">&#40;<\/span>data<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><em><a href=\"https:\/\/snippet.dhtmlx.com\/ku90dhr4\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/em><\/p>\n<p>The necessary type of the diagram is specified with the <strong>type:\u201dmindmap\u201d<\/strong> property in the configuration object. More details on the initialization process can be found in the <a href=\"https:\/\/docs.dhtmlx.com\/diagram\/guides\/diagram\/initialization\/\" rel=\"noopener\" target=\"_blank\">documentation<\/a>.<\/p>\n<p><strong>2) Placing child shapes in one direction<\/strong><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/05\/image5.png\" alt=\"DHTMLX mind map - child shapes -one direction\" width=\"545\" height=\"277\" class=\"aligncenter size-full wp-image-8526\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/05\/image5.png 545w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/05\/image5-300x152.png 300w\" sizes=\"auto, (max-width: 545px) 100vw, 545px\" \/><\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> diagram <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">Diagram<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;diagram&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span> <br \/>\n&nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;mindmap&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; typeConfig<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; direction<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;right&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\ndiagram.<span class=\"me1\">data<\/span>.<span class=\"me1\">parse<\/span><span class=\"br0\">&#40;<\/span>data<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><em><a href=\"https:\/\/snippet.dhtmlx.com\/0obfeniq\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/em><br \/>\nWhen it comes to positioning mind map branches in your own way, our library provides a <strong>typeConfig<\/strong> property with two attributes (<strong>direction <\/strong>and <strong>side<\/strong>). If it is necessary to set child shapes on one side (left or right), we apply the <strong>direction<\/strong> attribute.<\/p>\n<p><strong>3) Placing child shapes in both directions<\/strong><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/05\/image8.png\" alt=\"DHTMLX Diagram - mind map - child chapes in both directions\" width=\"685\" height=\"227\" class=\"aligncenter size-full wp-image-8528\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/05\/image8.png 685w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/05\/image8-300x99.png 300w\" sizes=\"auto, (max-width: 685px) 100vw, 685px\" \/><\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> diagram <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">Diagram<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;diagram&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span> <br \/>\n&nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;mindmap&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; typeConfig<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; side<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><span class=\"st0\">&quot;caring&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">&quot;positiveThoughts&quot;<\/span><span class=\"br0\">&#93;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; right<span class=\"sy0\">:<\/span> <span class=\"br0\">&#91;<\/span><span class=\"st0\">&quot;negativeAndForceful&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">&quot;positiveAndLively&quot;<\/span><span class=\"br0\">&#93;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp;<span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\ndiagram.<span class=\"me1\">data<\/span>.<span class=\"me1\">parse<\/span><span class=\"br0\">&#40;<\/span>data<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><em><a href=\"https:\/\/snippet.dhtmlx.com\/2fhw9jo5\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/em><\/p>\n<p>The <strong>side<\/strong> attribute allows arranging child shapes in both left and right directions. For this purpose, we label these shapes with identification names in the corresponding side option. <\/p>\n<p>Both attributes of the <strong>typeConfig<\/strong> property are optional. If none of them is used, child shapes in the mind map will be positioned automatically.<\/p>\n<p><strong>4) Showing\/hiding mindmap child shapes<\/strong><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/05\/image10.png\" alt=\"DHTMLX Diagram - Mind Map\" width=\"573\" height=\"203\" class=\"aligncenter size-full wp-image-8529\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/05\/image10.png 573w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/05\/image10-300x106.png 300w\" sizes=\"auto, (max-width: 573px) 100vw, 573px\" \/><\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> data <span class=\"sy0\">=<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;emotionsEarl&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;49 Emotions (EARL)&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;fill&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;#0288D1&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;fontColor&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;#FFFFFF&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;stroke&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;#0288D1&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;fontWeight&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;bold&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; openDir<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; right<span class=\"sy0\">:<\/span> <span class=\"kw2\">false<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n\u2026<br \/>\n<span class=\"br0\">&#93;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p><em><a href=\"https:\/\/snippet.dhtmlx.com\/tkot92jw\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/em><\/p>\n<p>Another useful feature is the possibility to show or hide specific child shapes that branch off from the root shape in the right or left side. To do that, you have to make use of the <strong>openDir<\/strong> attribute during the configuration process. In our example, child shapes to the right of the parent shape are collapsed, while shapes on the left stay visible.<\/p>\n<h5>Creating JavaScript mindmaps with DHTMLX mind map editor<\/h5>\n<p>The DHTMLX mind map editor is a new tool for generating mind maps and editing them on the fly. In terms of functionality, this editor is similar to the DHTMLX editors for diagrams and org charts. <\/p>\n<p>This type of editor can be initialized by calling the <strong>dhx.DiagramEditor<\/strong> and specifying the <strong>&#8220;mindmap&#8221;<\/strong> type in the configuration object.<\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> editor <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">DiagramEditor<\/span><span class=\"br0\">&#40;<\/span>document.<span class=\"me1\">body<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;mindmap&quot;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>Data is loaded in the editor via the <strong>parse<\/strong> method.<\/p>\n<p>A comprehensive API provides a variety of configuration properties allowing you to adjust the mind map editor to specific requirements of your project.<br \/>\nThe editor has a user-friendly interface composed of three main parts: header toolbar, grid area, and right-side editing panel.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/05\/image6-1024x537.png\" alt=\"DHTMLX Diagram - Mind map Editor\" width=\"1024\" height=\"537\" class=\"aligncenter size-large wp-image-8531\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/05\/image6-1024x537.png 1024w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/05\/image6-300x157.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/05\/image6-768x403.png 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/05\/image6.png 1043w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><br \/>\n<em>Utilize this <a href=\"https:\/\/snippet.dhtmlx.com\/lo1vm0e8\" rel=\"noopener\" target=\"_blank\">snippet<\/a> to try out different things with our example in the editor<\/em><\/p>\n<p>Let us become familiar with what you can do once the mind map is loaded in the editor. <\/p>\n<ul>\n<li><strong>Manipulating and modifying any mind map elements via UI<\/strong><\/li>\n<\/ul>\n<p>The editor has a drag-and-drop interface, therefore you can easily change the position of any mind map shape relative to the root shape. If you need to move around the whole diagram, just drag the root shape in the required direction.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/05\/image9.gif\" alt=\"DHTMLX Diagram  - Mind map Editor\" width=\"516\" height=\"276\" class=\"aligncenter size-full wp-image-8533\" \/><\/p>\n<p>It is possible to perform some editing operations via a personal toolbar of any mind map shape. When you click on a particular shape, the appeared toolbar enables you to add a child shape and resize or delete the selected shape.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/05\/image1.png\" alt=\"DHTMLX Diagram - Mind map Editor\" width=\"385\" height=\"268\" class=\"aligncenter size-full wp-image-8534\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/05\/image1.png 385w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/05\/image1-300x209.png 300w\" sizes=\"auto, (max-width: 385px) 100vw, 385px\" \/><br \/>\nYou can also simultaneously select several shapes with a mouse (or a hotkey combination &#8211; Shift+Left Click) and drag or delete them.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/05\/image2.gif\" alt=\"DHTMLX Diagram - Mind map editor\" width=\"459\" height=\"413\" class=\"aligncenter size-full wp-image-8535\" \/><br \/>\nIf you need more editing capabilities in the per-shape toolbar, you can add custom options by using the <strong>shapeToolbar<\/strong> property.<\/p>\n<ul>\n<li><strong>Editing shape attributes with the help of the right-side panel<\/strong><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/05\/image11.gif\" alt=\"DHTMLX Mind map editor\" width=\"494\" height=\"494\" class=\"aligncenter size-full wp-image-8537\" \/><br \/>\nThis editing panel offers plenty of options for tuning the visual appearance of the mind map shapes.  After clicking on a specific shape, you will be able to accurately set the size and arrangement of the shape, change its color scheme, and make adjustments to how text is displayed.<\/p>\n<ul>\n<li><strong>Exporting\/importing options for JavaScript mind maps<\/strong><\/li>\n<\/ul>\n<p>It is also possible to work with DHTMLX-based mind maps offline, as our library supports exporting to popular formats (PDF, PNG, JSON). If something has to be reworked, it is not a problem to import the diagram back into the editor.<\/p>\n<p>That\u2019s how you can handle a JavaScript mind map visualization in the DHTMLX mind map editor.<\/p>\n<h5>Conclusion<\/h5>\n<p>In this article, we\u2019ve examined two ways of using our <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxDiagram\/\" rel=\"noopener\" target=\"_blank\">JavaScript Diagram library<\/a> for visualizing ideas with mindmaps. It can be done with just a few lines of code or via the mind map editor. As a cherry on top, now you can also take advantage of the TypeScript support to start diagramming with DHTMLX more promptly and efficiently.<\/p>\n<p>But as is often said: first try and then trust. Make use of a <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxDiagram\/download.shtml\" rel=\"noopener\" target=\"_blank\">free 30-day evaluation version<\/a> of our library to see how it works in your own scenarios.<\/p>\n<h5>Related materials:<\/h5>\n<ul>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/diagram\/guides\/overview\/\" rel=\"noopener\" target=\"_blank\">DHTMLX Diagram documentation<\/a><\/li>\n<li><a href=\"https:\/\/snippet.dhtmlx.com\/twd25ww1\" rel=\"noopener\" target=\"_blank\">Mind map sample<\/a><\/li>\n<li><a href=\"https:\/\/snippet.dhtmlx.com\/lo1vm0e8\" rel=\"noopener\" target=\"_blank\">Mind map editor<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Welcome back to our series of posts on how to boost your data visualization capabilities with the DHTMLX Diagram. The collection of diagrams included in our library has recently &#8230;<\/p>\n","protected":false},"author":101014,"featured_media":8538,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71],"tags":[33,58],"class_list":["post-8521","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-all-posts","tag-diagram"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/8521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/101014"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=8521"}],"version-history":[{"count":12,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/8521\/revisions"}],"predecessor-version":[{"id":9677,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/8521\/revisions\/9677"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/8538"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=8521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=8521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=8521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}