{"id":7501,"date":"2020-08-04T15:32:43","date_gmt":"2020-08-04T12:32:43","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=7501"},"modified":"2024-08-16T11:03:45","modified_gmt":"2024-08-16T08:03:45","slug":"create-javascript-network-diagram","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/create-javascript-network-diagram\/","title":{"rendered":"How to Create a JavaScript Network Diagram with DHTMLX"},"content":{"rendered":"<p><em>We continue the series of blog posts on how to create popular types of diagrams available in the DHTMLX Diagram library. This time, we will provide you with a detailed guide on how to build a JavaScript network diagram using our diagramming component. Equip yourself with a <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxDiagram\/download.shtml\" rel=\"noopener\" target=\"_blank\">DHTMLX Diagram trial version<\/a> and follow the instructions below.<\/em><\/p>\n<h5>What is a network diagram<\/h5>\n<p>A network diagram is a type of diagram that helps to visualize the architecture of computer or telecommunication systems of any complexity level (from basic home networks to complex MAN networks or cloud-based storage systems). It depicts various components such as routers, servers, hubs, etc. that shape into a network using special symbols and explains relationships between them.<\/p>\n<p>Network diagrams differ in two main aspects: network type and network topology, or the positioning of their elements.<\/p>\n<p>Network diagrams are commonly divided into two main types:<\/p>\n<ul>\n<li>Physical network diagrams that represent the physical layout of the network.<\/li>\n<li>Logical network diagrams that depict how data is transmitted via the network. <\/li>\n<\/ul>\n<p>When talking about possible arrangement variations for network diagrams, we can point out the following topology options:<\/p>\n<ul>\n<li>Bus topology<\/li>\n<li>Star topology<\/li>\n<li>Ring topology<\/li>\n<li>Mesh topology<\/li>\n<\/ul>\n<p>Network diagrams are extensively used in network architecture design. For example, this type of diagram can be helpful in planning the arrangement of networks, determining updates for existing networks or eliminating redundancies, detecting bottlenecks and vulnerabilities, or can be used as a part of network documentation.<\/p>\n<p>Moreover, network diagrams have also gained popularity in project management. Utilizing this type of diagram, project managers can vividly present the workflow of different project activities, monitor the project progress, perform time estimates for the project, and much more.<\/p>\n<h5>Example of a JavaScript network diagram by DHTMLX<\/h5>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/08\/JS-network-diagram-1024x527.jpg\" alt=\"JS network diagram\" width=\"1024\" height=\"527\" class=\"aligncenter size-large wp-image-7512\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/08\/JS-network-diagram-1024x527.jpg 1024w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/08\/JS-network-diagram-300x154.jpg 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/08\/JS-network-diagram-768x395.jpg 768w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2020\/08\/JS-network-diagram.jpg 1232w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>Let us consider the example of a JavaScript network diagram built with the use of the DHTMLX Diagram library.<\/p>\n<p>The example above depicts the architecture of the remote presence software system. This technology creates a virtual presence of a remote expert to consult specialists in any location. <\/p>\n<p>This system includes four main components:<\/p>\n<ul>\n<li>signal server that provides proper signal transmission (video and audio)<\/li>\n<li>client-side app on a device<\/li>\n<li>web UI on a PC for an expert<\/li>\n<li>process management system\/storage\/wiki-systems, etc.<\/li>\n<\/ul>\n<h5>How to create a JavaScript network diagram with DHTMLX<\/h5>\n<p>Now let us proceed with concrete steps for creating a JavaScript network diagram utilizing our Diagramming component.<\/p>\n<p><strong>1. Initializing DHTMLX Diagram library:<\/strong><\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"sy0\">&lt;!<\/span>DOCTYPE html<span class=\"sy0\">&gt;<\/span><br \/>\n<span class=\"sy0\">&lt;<\/span>html<span class=\"sy0\">&gt;<\/span><br \/>\n<span class=\"sy0\">&lt;<\/span>head<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; <span class=\"sy0\">&lt;<\/span>script type<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;text\/javascript&quot;<\/span> src<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;codebase\/diagram.js&quot;<\/span><span class=\"sy0\">&gt;&lt;\/<\/span>script<span class=\"sy0\">&gt;<\/span> &nbsp; &nbsp;<br \/>\n&nbsp; <span class=\"sy0\">&lt;<\/span>link rel<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;stylesheet&quot;<\/span> href<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;codebase\/diagram.css&quot;<\/span><span class=\"sy0\">&gt;<\/span><br \/>\n<span class=\"sy0\">&lt;\/<\/span>head<span class=\"sy0\">&gt;<\/span><br \/>\n<span class=\"sy0\">&lt;<\/span>body<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; <span class=\"sy0\">&lt;<\/span>div id<span class=\"sy0\">=<\/span><span class=\"st0\">&quot;diagram&quot;<\/span><span class=\"sy0\">&gt;&lt;\/<\/span>div<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; <span class=\"sy0\">&lt;<\/span>script<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; <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; &nbsp; lineGap<span class=\"sy0\">:<\/span> <span class=\"nu0\">20<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; <span class=\"sy0\">&lt;\/<\/span>script<span class=\"sy0\">&gt;<\/span><br \/>\n<span class=\"sy0\">&lt;\/<\/span>body<span class=\"sy0\">&gt;<\/span><br \/>\n<span class=\"sy0\">&lt;\/<\/span>html<span class=\"sy0\">&gt;<\/span><\/div><\/div>\n<p>First of all, it is necessary to add JS and CSS source files and a container, where your diagram will be placed. The next move is to apply the <strong>dhx.Diagram<\/strong> constructor that will help to perform the initialization of your diagram. This function takes two parameters: container originated at the previous step and object with configuration properties.<\/p>\n<p><strong>2. Specifying the default configuration of shapes via the defaults config:<\/strong><\/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> defaults <span class=\"sy0\">=<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; width<span class=\"sy0\">:<\/span> <span class=\"nu0\">160<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; height<span class=\"sy0\">:<\/span> <span class=\"nu0\">160<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; img<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;..\/common\/img\/network_image\/desktop.svg&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; text<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Network Card&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; ip<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;138.68.41.78&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; preview<span class=\"sy0\">:<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; scale<span class=\"sy0\">:<\/span> <span class=\"nu0\">0.8<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>When it comes to setting up the configuration properties of shapes for your JavaScript network diagram, you can do it much faster and easier using the <strong>defaults<\/strong> config. Our example includes eleven shapes with a similar size (160&#215;160). Each shape has a text naming a particular component of the network, image, and string of numbers for its IP address.<\/p>\n<p><strong>3. Creating a template for custom shapes of the network diagram:<\/strong><\/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> template <span class=\"sy0\">=<\/span> config <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">&#40;<\/span>`<br \/>\n&nbsp; &nbsp; <span class=\"sy0\">&lt;<\/span>section <span class=\"kw5\">class<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">'template'<\/span><span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"sy0\">&lt;<\/span>img src<span class=\"sy0\">=<\/span><span class=\"st0\">'${config.img}'<\/span> alt<span class=\"sy0\">=<\/span><span class=\"st0\">'${config.text}'<\/span><span class=\"sy0\">&gt;&lt;\/<\/span>img<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"sy0\">&lt;<\/span>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>span<span class=\"sy0\">&gt;<\/span>$<span class=\"br0\">&#123;<\/span>config.<span class=\"me1\">ip<\/span><span class=\"br0\">&#125;<\/span><span class=\"sy0\">&lt;\/<\/span>span<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"sy0\">&lt;\/<\/span>section<span class=\"sy0\">&gt;<\/span><br \/>\n`<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>Then, you have to create a new HTML template to make custom shapes for your diagram. In this example, we employ the ES6+ format (ES5 is applicable as well) to set up the template for your custom shapes. By putting to use the template, you can define all necessary content for the shape: an image that shows a specific component of the diagram and alt attribute that provides an alternate text for an image (if the image cannot be displayed), name of the component, and its IP address.<\/p>\n<p><strong>4. Adding shapes to the JS network diagram:<\/strong><\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">diagram.<span class=\"me1\">addShape<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;networkCard&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; template<span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; defaults<span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>The next move is to add custom shapes to the diagram. For this purpose, we utilize the <strong>addShape<\/strong> method. This method serves to promptly add different shapes generated by employing the templates.<\/p>\n<p><strong>5. Preparing and parsing data into the diagram:<\/strong><\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;height:600px;\"><div class=\"javascript codecolorer\">diagram.<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><br \/>\n<br \/>\n<span class=\"kw1\">const<\/span> data <span class=\"sy0\">=<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;id&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">1<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;type&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;networkCard&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;x&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">0<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;y&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">380<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;img&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;https:\/\/docs.dhtmlx.com\/diagram\/samples\/common\/img\/network_image\/desktop.svg&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;text&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Remote expert desktop&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;ip&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;192.168.32.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; <span class=\"st0\">&quot;id&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">2<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;type&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;networkCard&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;x&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">200<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;y&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">0<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;img&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;https:\/\/docs.dhtmlx.com\/diagram\/samples\/common\/img\/network_image\/cloud.svg&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;text&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;NGNIX&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;ip&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;192.168.1.4&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; <span class=\"st0\">&quot;id&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">3<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;type&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;networkCard&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;x&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">0<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;y&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">190<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;img&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;https:\/\/docs.dhtmlx.com\/diagram\/samples\/common\/img\/network_image\/fieldWorker.svg&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;text&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;User: Field Worker&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;ip&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;192.168.1.5&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; <span class=\"st0\">&quot;id&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">4<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;type&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;networkCard&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;x&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">200<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;y&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">190<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;img&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;https:\/\/docs.dhtmlx.com\/diagram\/samples\/common\/img\/network_image\/server.svg&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;text&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Storage Server&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;ip&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;192.168.1.6&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; <span class=\"st0\">&quot;id&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">5<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;type&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;networkCard&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;x&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">420<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;y&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">190<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;img&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;https:\/\/docs.dhtmlx.com\/diagram\/samples\/common\/img\/network_image\/server.svg&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;text&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Event server&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;ip&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;192.168.1.8&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; <span class=\"st0\">&quot;id&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">6<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;type&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;networkCard&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;x&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">620<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;y&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">190<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;img&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;https:\/\/docs.dhtmlx.com\/diagram\/samples\/common\/img\/network_image\/server.svg&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;text&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;PUB\/SUB Server&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;ip&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;192.168.1.9&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; <span class=\"st0\">&quot;id&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">7<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;type&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;networkCard&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;x&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">820<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;y&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">190<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;img&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;https:\/\/docs.dhtmlx.com\/diagram\/samples\/common\/img\/network_image\/server.svg&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;text&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;API Server&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;ip&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;192.168.1.10&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; <span class=\"st0\">&quot;id&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">8<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;type&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;networkCard&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;x&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">1010<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;y&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">190<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;img&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;https:\/\/docs.dhtmlx.com\/diagram\/samples\/common\/img\/network_image\/server.svg&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;text&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;STUN\/TURN Server&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;ip&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;192.168.1.13&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; <span class=\"st0\">&quot;id&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">9<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;type&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;networkCard&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;x&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">200<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;y&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">380<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;img&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;https:\/\/docs.dhtmlx.com\/diagram\/samples\/common\/img\/network_image\/cloud.svg&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;text&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;AWS S3&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;ip&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;192.168.1.7&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; <span class=\"st0\">&quot;id&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">10<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;type&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;networkCard&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;x&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">820<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;y&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">390<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;img&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;https:\/\/docs.dhtmlx.com\/diagram\/samples\/common\/img\/network_image\/database.svg&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;text&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Database postgre SQL&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;ip&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;192.168.1.11&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; <span class=\"st0\">&quot;id&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">11<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;type&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;networkCard&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;x&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">0<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;y&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">0<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;img&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;https:\/\/docs.dhtmlx.com\/diagram\/samples\/common\/img\/network_image\/core.svg&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;text&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;Intel MCU&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;ip&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;192.168.1.12&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; <span class=\"st0\">&quot;id&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;12&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;type&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;line&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;from&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">4<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;to&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">9<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;fromSide&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;bottom&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;toSide&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;top&quot;<\/span><span class=\"sy0\">,<\/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; <span class=\"st0\">&quot;id&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;13&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;type&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;line&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;from&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">5<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;to&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">6<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;fromSide&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;right&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;toSide&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;left&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;backArrow&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;filled&quot;<\/span><span class=\"sy0\">,<\/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; <span class=\"st0\">&quot;id&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;14&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;type&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;line&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;from&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">6<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;to&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">7<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;fromSide&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;right&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;toSide&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;left&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;backArrow&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;filled&quot;<\/span><span class=\"sy0\">,<\/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; <span class=\"st0\">&quot;id&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;15&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;type&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;line&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;from&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">2<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;to&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">5<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;fromSide&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;right&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;toSide&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;top&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;backArrow&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;filled&quot;<\/span><span class=\"sy0\">,<\/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; <span class=\"st0\">&quot;id&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;16&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;type&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;line&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;from&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">2<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;to&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">8<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;fromSide&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;right&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;toSide&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;top&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;backArrow&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;filled&quot;<\/span><span class=\"sy0\">,<\/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; <span class=\"st0\">&quot;id&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;17&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;type&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;line&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;from&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">3<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;to&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">2<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;fromSide&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;right&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;toSide&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;left&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;backArrow&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;filled&quot;<\/span><span class=\"sy0\">,<\/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; <span class=\"st0\">&quot;id&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;18&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;type&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;line&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;from&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">2<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;to&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">4<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;fromSide&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;bottom&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;toSide&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;top&quot;<\/span><span class=\"sy0\">,<\/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; <span class=\"st0\">&quot;id&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;19&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;type&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;line&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;from&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">2<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;to&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">7<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;fromSide&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;right&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;toSide&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;top&quot;<\/span><span class=\"sy0\">,<\/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; <span class=\"st0\">&quot;id&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;20&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;type&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;line&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;from&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">2<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;to&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">6<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;fromSide&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;right&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;toSide&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;top&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;backArrow&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;filled&quot;<\/span><span class=\"sy0\">,<\/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; <span class=\"st0\">&quot;id&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;21&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;type&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;line&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;from&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">7<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;to&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">10<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;fromSide&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;bottom&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;toSide&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;top&quot;<\/span><span class=\"sy0\">,<\/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; <span class=\"st0\">&quot;id&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;22&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;type&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;line&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;from&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">2<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;to&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">11<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;fromSide&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;left&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;toSide&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;right&quot;<\/span><span class=\"sy0\">,<\/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; <span class=\"st0\">&quot;id&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;23&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;type&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;line&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;from&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">2<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;to&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"nu0\">1<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;fromSide&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;left&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"st0\">&quot;toSide&quot;<\/span><span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;right&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#93;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>To populate your diagram with prepared data, it is necessary to apply the <strong>parse <\/strong>method.<\/p>\n<p><strong>6. Styling specific elements of your network graph:<\/strong><\/p>\n<div class=\"codecolorer-container javascript default codecolorer-noborder\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"sy0\">&lt;<\/span>style<span class=\"sy0\">&gt;<\/span><br \/>\n&nbsp; &nbsp; .<span class=\"me1\">template<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; display<span class=\"sy0\">:<\/span> flex<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; align<span class=\"sy0\">-<\/span>items<span class=\"sy0\">:<\/span> center<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; justify<span class=\"sy0\">-<\/span>content<span class=\"sy0\">:<\/span> center<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; flex<span class=\"sy0\">-<\/span>direction<span class=\"sy0\">:<\/span> column<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; background<span class=\"sy0\">:<\/span> #F7F7F7<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; width<span class=\"sy0\">:<\/span> <span class=\"nu0\">100<\/span><span class=\"sy0\">%;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; height<span class=\"sy0\">:<\/span> <span class=\"nu0\">100<\/span><span class=\"sy0\">%;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; border<span class=\"sy0\">:<\/span> 1px solid #DFDFDF<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; overflow<span class=\"sy0\">:<\/span> hidden<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; .<span class=\"me1\">template<\/span> span <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; font<span class=\"sy0\">-<\/span>weight<span class=\"sy0\">:<\/span> <span class=\"nu0\">300<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; line<span class=\"sy0\">-<\/span>height<span class=\"sy0\">:<\/span> 20px<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; overflow<span class=\"sy0\">:<\/span> hidden<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; text<span class=\"sy0\">-<\/span>overflow<span class=\"sy0\">:<\/span> ellipsis<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; white<span class=\"sy0\">-<\/span>space<span class=\"sy0\">:<\/span> nowrap<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; width<span class=\"sy0\">:<\/span> <span class=\"nu0\">100<\/span><span class=\"sy0\">%;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; text<span class=\"sy0\">-<\/span>align<span class=\"sy0\">:<\/span> center<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; .<span class=\"me1\">template<\/span> span<span class=\"sy0\">:<\/span>not<span class=\"br0\">&#40;<\/span><span class=\"sy0\">:<\/span>last<span class=\"sy0\">-<\/span>child<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; font<span class=\"sy0\">-<\/span>weight<span class=\"sy0\">:<\/span> <span class=\"nu0\">500<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; margin<span class=\"sy0\">-<\/span>top<span class=\"sy0\">:<\/span> 16px<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; .<span class=\"me1\">template<\/span> img <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; width<span class=\"sy0\">:<\/span> 64px<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; height<span class=\"sy0\">:<\/span> 64px<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; pointer<span class=\"sy0\">-<\/span>events<span class=\"sy0\">:<\/span> none<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; border<span class=\"sy0\">-<\/span>radius<span class=\"sy0\">:<\/span> <span class=\"nu0\">50<\/span><span class=\"sy0\">%;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"sy0\">&lt;\/<\/span>style<span class=\"sy0\">&gt;<\/span><\/div><\/div>\n<p>As the last step, you can make your diagram more visually appealing by setting up style attributes for its elements by means of CSS. We can specify the color characteristics for the background and border of the shape, align items and textual data, size of the image, and other characteristics of shapes utilized in the network diagram.<\/p>\n<p>That&#8217;s how you can quickly build an HTML\/JavaScript network diagram using the abilities of our diagramming component. As a bonus,  you can also examine a <a href=\"https:\/\/snippet.dhtmlx.com\/vj8i4ii5\" rel=\"noopener\" target=\"_blank\">complete sample<\/a> of this network graph and modify it on the fly via our new DHTMLX code snippet tool.<\/p>\n<h5>Conclusion <\/h5>\n<p>DHTMLX <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxDiagram\/\" rel=\"noopener\" target=\"_blank\">JavaScript Diagram<\/a> library makes it possible for web developers to generate JS network diagrams and other popular types of graphs and diagrams for visualizing data of any complexity with minimal coding effort. You can set the default configuration for all shapes using just one property, create various custom shapes, and style all shapes and their elements according to your liking. We encourage you to leverage a <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxDiagram\/download.shtml\" rel=\"noopener\" target=\"_blank\">30-day tryout version<\/a> of our library and test its capabilities in your projects.<\/p>\n<h6>Related Materials:<\/h6>\n<ul>\n<li><a href=\"https:\/\/snippet.dhtmlx.com\/u1xqyo9w\" rel=\"noopener\" target=\"_blank\">Network Diagram Sample<\/a><\/li>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/diagram\/\" rel=\"noopener\" target=\"_blank\">DHTMLX Diagram Documentation<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>We continue the series of blog posts on how to create popular types of diagrams available in the DHTMLX Diagram library. This time, we will provide you with a &#8230;<\/p>\n","protected":false},"author":101014,"featured_media":7510,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71,1],"tags":[33,43,58,14],"class_list":["post-7501","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-uncategorized","tag-all-posts","tag-dhtmlx-tips","tag-diagram","tag-tips"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/7501","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=7501"}],"version-history":[{"count":25,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/7501\/revisions"}],"predecessor-version":[{"id":12793,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/7501\/revisions\/12793"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/7510"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=7501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=7501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=7501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}