{"id":6885,"date":"2019-11-27T14:30:49","date_gmt":"2019-11-27T11:30:49","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=6885"},"modified":"2024-08-10T11:19:24","modified_gmt":"2024-08-10T08:19:24","slug":"dhtmlx-diagram-2-2-build-type-javascript-diagrams-org-charts-custom-shapes","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-diagram-2-2-build-type-javascript-diagrams-org-charts-custom-shapes\/","title":{"rendered":"DHTMLX Diagram 2.2: Build Any Type of JavaScript Diagrams and Org Charts with Custom Shapes"},"content":{"rendered":"<p>Great news for DHTMLX Diagram users! <\/p>\n<p>A brand new version of our <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxDiagram\/\" rel=\"noopener\" target=\"_blank\">JS diagram library<\/a> 2.2 is out. Hurry up to get acquainted with new powerful abilities &#8211; adding any custom shapes you wish and building mixed org charts and diagrams. <\/p>\n<p><strong>Download a free 30-day <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxDiagram\/download.shtml\" rel=\"noopener\" target=\"_blank\">evaluation version of DHTMLX Diagram ><\/a><\/strong><br \/>\n<\/br><\/p>\n<div style=\"width: 1502px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-6885-1\" width=\"1502\" height=\"800\" loop autoplay preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/11\/Hospital-org-chart-1.mp4?_=1\" \/><a href=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/11\/Hospital-org-chart-1.mp4\">https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/11\/Hospital-org-chart-1.mp4<\/a><\/video><\/div>\n<h5>Custom Shapes via SVG and HTML Templates<\/h5>\n<p>The release rolls out the most awaited ability to equip DHTMLX Diagrams with any types of shapes you desire. Now your opportunities are not restricted to a range of predefined shapes and you are free to build UML class diagrams, network diagrams, life cycle charts, Venn diagrams, and whatnot.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/11\/Venn-diagram.png\" alt=\"Venn diagram\" width=\"900\" height=\"500\" class=\"aligncenter size-full wp-image-6888\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/11\/Venn-diagram.png 900w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/11\/Venn-diagram-300x167.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/11\/Venn-diagram-768x427.png 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><strong>Venn diagrams<\/strong> are designed for finding patterns and defining logical relations among groups of objects, which are usually split into 3 sets. Overlapping areas stand for common characteristics of objects in question. <a href=\"https:\/\/snippet.dhtmlx.com\/2tzyfois?tag=diagram&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/11\/Network-diagram.png\" alt=\"Network diagram\" width=\"900\" height=\"543\" class=\"aligncenter size-full wp-image-6891\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/11\/Network-diagram.png 900w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/11\/Network-diagram-300x181.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/11\/Network-diagram-768x463.png 768w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><strong>Network diagrams<\/strong> usually depict the structure of telecommunication systems. Besides, they can be applied in project management for showing the process flow. <a href=\"https:\/\/snippet.dhtmlx.com\/u1xqyo9w?tag=diagram&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/11\/life-cycle-diagram-with-sticky-notes.png\" alt=\"Life cycle diagram with sticky notes\" width=\"650\" height=\"601\" class=\"aligncenter size-full wp-image-6913\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/11\/life-cycle-diagram-with-sticky-notes.png 650w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/11\/life-cycle-diagram-with-sticky-notes-300x277.png 300w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><strong>Life cycle diagrams<\/strong> make it easy to illustrate the stages of a product&#8217;s or project&#8217;s life cycle. In our example, the stages of the development process are designed with the help of yellow sticky notes. <a href=\"https:\/\/snippet.dhtmlx.com\/y4k51owl?tag=diagram&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/11\/UML-class.png\" alt=\"UML class diagram\" width=\"623\" height=\"459\" class=\"aligncenter size-full wp-image-6896\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/11\/UML-class.png 623w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/11\/UML-class-300x221.png 300w\" sizes=\"auto, (max-width: 623px) 100vw, 623px\" \/><strong>UML Class Diagram<\/strong> for software engineering. Check the samples with <a href=\"https:\/\/snippet.dhtmlx.com\/z8ikyyek?tag=diagram&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">HTML template<\/a><\/p>\n<p>Embedding custom-made shapes into DHTMLX Diagram became possible due to newly introduced <a href=\"https:\/\/docs.dhtmlx.com\/diagram\/shapes\/default_shapes\/\" rel=\"noopener\" target=\"_blank\">SVG and HTML templates<\/a><\/strong>. Now building a custom diagram takes just two steps:<\/p>\n<ul>\n<li>Create a new SVG or HTML template for shapes:<\/li>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"co1\">\/\/ creating SVG template<\/span><br \/>\ndiagram.<span class=\"me1\">flowShapes<\/span>.<span class=\"me1\">customShape<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw1\">function<\/span><span class=\"br0\">&#40;<\/span>config<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span> <br \/>\n&nbsp; &nbsp; <span class=\"kw1\">var<\/span> svg <span class=\"sy0\">=<\/span> <span class=\"st0\">'&lt;svg width=&quot;'<\/span><span class=\"sy0\">+<\/span> config.<span class=\"me1\">width<\/span> <span class=\"sy0\">+<\/span><span class=\"st0\">'&quot; height=&quot;'<\/span><span class=\"sy0\">+<\/span> config.<span class=\"me1\">height<\/span> <span class=\"sy0\">+<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">'&quot; viewBox=&quot;0 0 '<\/span><span class=\"sy0\">+<\/span> config.<span class=\"me1\">width<\/span> <span class=\"sy0\">+<\/span><span class=\"st0\">' '<\/span><span class=\"sy0\">+<\/span> config.<span class=\"me1\">height<\/span> <span class=\"sy0\">+<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">'&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;'<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; svg <span class=\"sy0\">+=<\/span> <span class=\"st0\">'&lt;rect width=&quot;'<\/span><span class=\"sy0\">+<\/span> config.<span class=\"me1\">width<\/span> <span class=\"sy0\">+<\/span><span class=\"st0\">'&quot; height=&quot;'<\/span><span class=\"sy0\">+<\/span> config.<span class=\"me1\">height<\/span> <span class=\"sy0\">+<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">'&quot; fill=&quot;'<\/span><span class=\"sy0\">+<\/span> config.<span class=\"me1\">fill<\/span> <span class=\"sy0\">+<\/span><span class=\"st0\">'&quot;\/&gt;'<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; svg <span class=\"sy0\">+=<\/span> <span class=\"st0\">'&lt;\/svg&gt;'<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">return<\/span> svg<span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>or<\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"co1\">\/\/ creating HTML template<\/span><br \/>\ndiagram.<span class=\"me1\">flowShapes<\/span>.<span class=\"me1\">customShape<\/span> <span class=\"sy0\">=<\/span> <span class=\"kw1\">function<\/span><span class=\"br0\">&#40;<\/span>config<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">return<\/span> `<br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"sy0\">&lt;<\/span>section style<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;width:${config.width}px; <br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height:${config.height}px; background: ${config.fill}&quot;<\/span><span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"sy0\">&lt;<\/span>span style<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;font-size:${config.fontSize}px; <br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color:${config.fontColor}&quot;<\/span><span class=\"sy0\">&gt;<\/span>$<span class=\"br0\">&#123;<\/span>config.<span class=\"me1\">text<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">&lt;\/<\/span>span<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"sy0\">&lt;\/<\/span>section<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; `<br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<li>Apply the template for the chosen shapes and prepare a data set for loading into Diagram. <a href=\"https:\/\/docs.dhtmlx.com\/diagram\/shapes\/default_shapes\/\" rel=\"noopener\" target=\"_blank\">Check a detailed guide in the documentation ><\/a><\/li>\n<\/ul>\n<p>New templates provide you with numerous options not only for adding brand new shapes but also for customizing the existing ones. For instance, you can equip org chart cards with icons, menu items, and any other custom elements required for your project:<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/11\/hospital-org-chart.png\" alt=\"Hospital org chart\" width=\"743\" height=\"775\" class=\"aligncenter size-full wp-image-6930\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/11\/hospital-org-chart.png 743w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/11\/hospital-org-chart-288x300.png 288w\" sizes=\"auto, (max-width: 743px) 100vw, 743px\" \/>Hospital org chart illustrating medical hierachy. <a href=\"https:\/\/snippet.dhtmlx.com\/8fubjmlz?tag=diagram&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<h5>Combining Org Charts and Diagrams<\/h5>\n<p>And the cherry on the cake is that DHTMLX Diagram 2.2 enables you to mix flowchart and org chart shapes in one diagram by specifying particular types of shapes for each data item object:<\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;height:600px;\"><div class=\"javascript codecolorer\"><span class=\"co1\">\/\/ data to load<\/span><br \/>\n<span class=\"kw1\">var<\/span> data <span class=\"sy0\">=<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"co1\">\/\/ the Org Chart shape<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;1&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; text<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Chairman &amp; CEO&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; title<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Henry Bennett&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; img<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;..\/common\/img\/avatar-1.png&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp;<br \/>\n&nbsp; &nbsp; <span class=\"co1\">\/\/ the Diagram shapes<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;2&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; text<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Manager&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;database&quot;<\/span><span class=\"sy0\">,<\/span> <br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; parent<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;1&quot;<\/span> <br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;3&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; text<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Technical Director&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;process&quot;<\/span><span class=\"sy0\">,<\/span> <br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; parent<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;1&quot;<\/span> <br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;2.1&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; text<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Marketer&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;database&quot;<\/span><span class=\"sy0\">,<\/span> <br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; parent<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;2&quot;<\/span> <br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;3.1&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; text<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Team Lead&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;process&quot;<\/span><span class=\"sy0\">,<\/span> <br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; parent<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;3&quot;<\/span> <br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#93;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp;<br \/>\n<span class=\"co1\">\/\/ initializing an org chart<\/span><br \/>\n<span class=\"kw1\">var<\/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;org&quot;<\/span><span class=\"sy0\">,<\/span> <br \/>\n&nbsp; &nbsp; defaultShapeType<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;img-card&quot;<\/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><a href=\"https:\/\/docs.dhtmlx.com\/diagram\/shapes\/default_shapes\/\" rel=\"noopener\" target=\"_blank\">Read detailed instructions in the documentation ><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/11\/mixed_org_chart2.png\" alt=\"Mixed org chart\" width=\"460\" height=\"407\" class=\"aligncenter size-full wp-image-6899\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/11\/mixed_org_chart2.png 460w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2019\/11\/mixed_org_chart2-300x265.png 300w\" sizes=\"auto, (max-width: 460px) 100vw, 460px\" \/><a href=\"https:\/\/snippet.dhtmlx.com\/yd6l6grr?tag=diagram&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<h5>Export Diagrams to JSON from the Editor<\/h5>\n<p>Another novelty is the possibility to export your diagrams and org charts into the JSON format right <a href=\"https:\/\/snippet.dhtmlx.com\/xdvi4fek?tag=diagram&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">from the editor<\/a>. Our editors allow you to fine-tune diagrams and org charts on the fly via a simple and intuitive user interface. When you achieve the look and feel you need, you can export the result into the JSON format just in one click. After that, you are free to change our predefined shapes to custom ones using SVG and HTML templates, while preserving the structure and style of the whole diagram. <a href=\"https:\/\/docs.dhtmlx.com\/diagram\/guides\/diagram_editor\/initialization\/\" rel=\"noopener\" target=\"_blank\">Read more in the documentation ><\/a><\/p>\n<h5>DHTMLX Diagram 2.2 Round-Up<\/h5>\n<p>Summarizing the release news, here&#8217;s what you get with the updated Diagram 2.2:<\/p>\n<ul>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/diagram\/shapes\/default_shapes\/\" rel=\"noopener\" target=\"_blank\">SVG and HTML templates<\/a> for adding custom shapes<\/li>\n<li><a href=\"https:\/\/snippet.dhtmlx.com\/2tzyfois?tag=diagram&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">The Venn diagram<\/a> example<\/li>\n<li><a href=\"https:\/\/snippet.dhtmlx.com\/z8ikyyek?tag=diagram&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">The UML class diagram<\/a> example<\/li>\n<li><a href=\"https:\/\/snippet.dhtmlx.com\/u1xqyo9w?tag=diagram&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">The Network diagram<\/a> example<\/li>\n<li><a href=\"https:\/\/snippet.dhtmlx.com\/y4k51owl?tag=diagram&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">The life cycle diagram with sticky notes<\/a> example<\/li>\n<li><a href=\"https:\/\/snippet.dhtmlx.com\/8fubjmlz?tag=diagram&#038;mode=wide\" rel=\"noopener\" target=\"_blank\">The custom org chart with icons and menu<\/a> example<\/li>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/diagram\/shapes\/default_shapes\/\" rel=\"noopener\" target=\"_blank\">Org charts and diagrams mixed together<\/a><\/li>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/diagram\/guides\/diagram_editor\/initialization\/\" rel=\"noopener\" target=\"_blank\">Export to the JSON format<\/a> right from the editor<\/li>\n<\/ul>\n<p>We&#8217;re looking forward to receiving your feedback about the release of DHTMLX Diagram 2.2. Feel free to share your thoughts and ideas in the comments section below.<\/p>\n<p>If you haven&#8217;t tried our Diagram library before, try it out during a <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxDiagram\/download.shtml\" rel=\"noopener\" target=\"_blank\">free 30-day evaluation period<\/a>.<\/p>\n<p>We invite our current clients to visit their <a href=\"https:\/\/dhtmlx.com\/clients\/\" rel=\"noopener\" target=\"_blank\">Client&#8217;s Area<\/a>, where they can download the latest version 2.2.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Great news for DHTMLX Diagram users! A brand new version of our JS diagram library 2.2 is out. Hurry up to get acquainted with new powerful abilities &#8211; adding &#8230;<\/p>\n","protected":false},"author":101012,"featured_media":6911,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,70,1,38],"tags":[33,58,4],"class_list":["post-6885","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-releases","category-uncategorized","category-visible","tag-all-posts","tag-diagram","tag-dhtmlx-updates"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/6885","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\/101012"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=6885"}],"version-history":[{"count":17,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/6885\/revisions"}],"predecessor-version":[{"id":12701,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/6885\/revisions\/12701"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/6911"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=6885"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=6885"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=6885"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}