Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <script src="https://gojs.net/release/go-debug.js"></script>
<body>
  
  <div id="myDiagram" style="border: solid 3px red; width:800px; height:300px"></div>
  <button id="cs">Add node and link</button>
</body>
              
            
!

CSS

              
                
              
            
!

JS

              
                var myDiagram;	

function renderChart() {
		var $ = go.GraphObject.make,
			diagram = $(go.Diagram, 'myDiagram',  {'relinkingTool.fromHandleArchetype': getLinkingToolHandleArchetype($, 0),
	    'relinkingTool.toHandleArchetype': getLinkingToolHandleArchetype($, -1)}),
			spot = new go.Spot(0.95, 0.1, 0, 0);
			
      for (var i = 0; i < model.nodeDataArray.length; i += 1) {
        model.nodeDataArray[i].isGroup = true; 
      }
  
			var nodes = model.nodeDataArray;
			var links = model.linkDataArray;

		diagram.groupTemplate = getGroupTemplate($);
    diagram.linkTemplate = getLinkTemplate($);

		diagram.model = new go.GraphLinksModel(nodes, links);
		diagram.model.linkFromPortIdProperty = 'from_port';
		diagram.model.linkToPortIdProperty = 'to_port';
  
  diagram.addDiagramListener('selectionMoved', function() {
    //myDiagram.selection.first().linksConnected.each(function(link) { console.log(link.data.points) } )
  })
    myDiagram = diagram;
	};

function getGroupTemplate($) {
  return $(go.Group, 'Table', 
				{
					locationObjectName: 'BODY',
					selectionObjectName: 'BODY',
					contextMenu: $(go.Adornment),
					resizeObjectName: 'BODY', 
					layerName: '',
				},
				new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
				new go.Binding('cursor'),
				new go.Binding('groupable', 'group', function(v) { return !v; }),

				//The body
				$(go.Panel, 'Table', 
					{
						row: 1,
						column: 1,
						name: 'BODY',
						stretch: go.GraphObject.Fill,
						minSize: new go.Size(10,10),
						width: 206,
					},
					new go.Binding('desiredSize', 'size', function(v) { if (v && v !== '0 0') { return go.Size.parse(v); } }).makeTwoWay(go.Size.stringify),
					new go.Binding('background', 'color'), 
         

					// The body's main panel, contains a shape and a textblock
					$(go.Panel, 'Auto', 
						{
							row: 1,
							column: 1,
							stretch: go.GraphObject.Fill,
						},

						$(go.TextBlock, 
							{ 
								margin: 10,
								wrap: go.TextBlock.WrapFit,
								// textAlign: 'center'
							}, 
							new go.Binding('text', 'object_title'), 
							new go.Binding('stroke', 'font'))
					), //end of the main panel

					// Right panel containing the image
       		$(go.Panel, 'Vertical',
	          { row: 1, column: 2, stretch: go.GraphObject.Fill, width: 18, margin: 2 },
	          $(go.Picture, new go.Binding('source', 'source'), { desiredSize: new go.Size(18, 18) })
        	)  // end of right panel
				), //end of body, consists of a main panel containing a shape and a textblock and a small panel located right for the image
				getPortTemplate($, 'top'),
				getPortTemplate($, 'bottom'),
				getPortTemplate($, 'left'),
				getPortTemplate($, 'right')
			);
}

function getLinkTemplate($) {
  var fromPoints = function(points) {
			var alternatingPoints = [];
			points.each(function(point) {
				alternatingPoints.push(point.x);
				alternatingPoints.push(point.y);
			});
			return alternatingPoints;
		}
   var toPoints = function(points) {
     var newPoints = new go.List(go.Point);
		 for (var i = 0; i < points.length; i += 2) {
       newPoints.add(new go.Point(points[i], points[i + 1]))
     }
     return newPoints;
		}
  var options = {
			//curve: go.Link.JumpOver,
			adjusting: go.Link.Stretch, 
			corner: 6,
			routing: go.Link.Orthogonal,
			resegmentable: true,
			reshapable: true,
			visible: true,
			relinkableFrom: true,
			relinkableTo: true
		}
   return $(go.Link, options, new go.Binding('points', 'points', toPoints).makeTwoWay(fromPoints), $(go.Shape));
}

 function getLinkingToolHandleArchetype($, segmentIndex) {
    return $(go.Panel, 'Table', { segmentIndex: segmentIndex, isPanelMain: true, cursor: 'pointer'},
      $(go.Panel, 'Table', { row: 0, column: 0,}, $(go.Shape, 'Diamond', { width: 10, height: 10, fill: '#ADD8E6', stroke: '#66B4F3' })),
      $(go.Panel, 'Table', { row: 0, column: 0,}, $(go.Shape, 'Circle', { width: 30, height: 30, fill: 'transparent', stroke: 'transparent' }))
    );
  }

function getPortTemplate($, side) {
		var row = 1, 
				col = 1, 
				portSize = 10,
				spot, desiredSize, orientation, panelOptions, shapeOptions, margin;

		if (side === 'top' || side === 'bottom') {
			margin = new go.Margin(0, portSize * 0.2, 0, portSize * 0.2);
			row = side === 'top' ? 0 : 2;
			spot = side === 'top' ? go.Spot.Top : go.Spot.Bottom;
			desiredSize = new go.Size(portSize, 0);
			orientation = 'Horizontal';
		} else if (side === 'left' || side === 'right') {
			margin = new go.Margin(portSize * 0.2, 0, portSize * 0.2, 0);
			col = side === 'left' ? 0 : 2;
			spot = side === 'left' ? go.Spot.Left : go.Spot.Right;
			desiredSize = new go.Size(0, portSize);
			orientation = 'Vertical';
		}

		panelOptions = { desiredSize: desiredSize, toLinkableSelfNode: true, fromLinkableSelfNode: true, fromLinkable: true, toLinkable: true, _side: side, fromSpot: spot, toSpot: spot };
		shapeOptions = { stroke: null, strokeWidth: 0, opacity: 0.3, margin: margin };
		return createPort($, panelOptions, shapeOptions, side, orientation, row, col);
	}

	function createPort($, panelOptions, shapeOptions, side, orientation, row, column) {
		return $(go.Panel, orientation, { 
      	row: row, 
      	column: column,
        itemTemplate: $(go.Panel, 
          new go.Binding('portId', 'port_id'),
        	panelOptions,
          $(go.Shape, 'Rectangle', shapeOptions, new go.Binding('fill'))
        )
      },
      new go.Binding('itemArray', side + '_ports')
    );
	}















var model = { "class": "go.GraphLinksModel",
			  "nodeDataArray": [{"key":"549151fdd4e5740b1c6dc8cf","object_title":"ADT_DIAM_T","object_type":{"template_id":"532fff7eb41281c17ce263b6","name":"ApplicatieInterface","name_internal":"application_interface","category":"Applicatielaag","category_internal":"application_layer"},"loc":"-620 -340","size":"460 144","color":"#009edf","category":"composition_group","hide_links_from":false,"hide_links_to":false,"isGroup":true,"group":"","text":"","type":null,"shape":"","picture":"applicationinterface-transparent","font":"white","left_ports":[{"port_id":"left_1","visible":false},{"port_id":"left_18","visible":false},{"port_id":"left_19","visible":false},{"port_id":"left_20","visible":false},{"port_id":"left_21","visible":false},{"port_id":"left_22","visible":false},{"port_id":"left_23","visible":false},{"port_id":"left_24","visible":false},{"port_id":"left_25","visible":false},{"port_id":"left_26","visible":false},{"port_id":"left_10","visible":false},{"port_id":"left_11","visible":false},{"port_id":"left_12","visible":false},{"port_id":"left_13","visible":false}],"top_ports":[{"port_id":"top_0","visible":false},{"port_id":"top_1","visible":false},{"port_id":"top_2","visible":false},{"port_id":"top_3","visible":false},{"port_id":"top_4","visible":false},{"port_id":"top_5","visible":false},{"port_id":"top_6","visible":false},{"port_id":"top_7","visible":false},{"port_id":"top_8","visible":false},{"port_id":"top_9","visible":false},{"port_id":"top_10","visible":false},{"port_id":"top_11","visible":false},{"port_id":"top_12","visible":false},{"port_id":"top_13","visible":false},{"port_id":"top_14","visible":false},{"port_id":"top_15","visible":false},{"port_id":"top_16","visible":false},{"port_id":"top_17","visible":false},{"port_id":"top_18","visible":false},{"port_id":"top_19","visible":false},{"port_id":"top_20","visible":false},{"port_id":"top_21","visible":false},{"port_id":"top_22","visible":false},{"port_id":"top_23","visible":false},{"port_id":"top_24","visible":false},{"port_id":"top_25","visible":false},{"port_id":"top_26","visible":false},{"port_id":"top_27","visible":false},{"port_id":"top_28","visible":false},{"port_id":"top_29","visible":false},{"port_id":"top_30","visible":false},{"port_id":"top_31","visible":false},{"port_id":"top_32","visible":false},{"port_id":"top_33","visible":false},{"port_id":"top_34","visible":false},{"port_id":"top_35","visible":false},{"port_id":"top_36","visible":false},{"port_id":"top_37","visible":false},{"port_id":"top_38","visible":false},{"port_id":"top_39","visible":false},{"port_id":"top_40","visible":false},{"port_id":"top_41","visible":false},{"port_id":"top_42","visible":false},{"port_id":"top_43","visible":false},{"port_id":"top_44","visible":false},{"port_id":"top_45","visible":false}],"right_ports":[{"port_id":"right_1","visible":false},{"port_id":"right_18","visible":false},{"port_id":"right_19","visible":false},{"port_id":"right_20","visible":false},{"port_id":"right_21","visible":false},{"port_id":"right_22","visible":false},{"port_id":"right_23","visible":false},{"port_id":"right_24","visible":false},{"port_id":"right_25","visible":false},{"port_id":"right_26","visible":false},{"port_id":"right_10","visible":false},{"port_id":"right_11","visible":false},{"port_id":"right_12","visible":false},{"port_id":"right_13","visible":false}],"bottom_ports":[{"port_id":"bottom_0","visible":false},{"port_id":"bottom_1","visible":false},{"port_id":"bottom_2","visible":false},{"port_id":"bottom_3","visible":false},{"port_id":"bottom_4","visible":false},{"port_id":"bottom_5","visible":false},{"port_id":"bottom_6","visible":false},{"port_id":"bottom_7","visible":false},{"port_id":"bottom_8","visible":false},{"port_id":"bottom_9","visible":false},{"port_id":"bottom_10","visible":false},{"port_id":"bottom_11","visible":false},{"port_id":"bottom_12","visible":false},{"port_id":"bottom_13","visible":false},{"port_id":"bottom_14","visible":false},{"port_id":"bottom_15","visible":false},{"port_id":"bottom_16","visible":false},{"port_id":"bottom_17","visible":false},{"port_id":"bottom_18","visible":false},{"port_id":"bottom_19","visible":false},{"port_id":"bottom_20","visible":false},{"port_id":"bottom_21","visible":false},{"port_id":"bottom_22","visible":false},{"port_id":"bottom_23","visible":false},{"port_id":"bottom_24","visible":false},{"port_id":"bottom_25","visible":false},{"port_id":"bottom_26","visible":false},{"port_id":"bottom_27","visible":false},{"port_id":"bottom_28","visible":false},{"port_id":"bottom_29","visible":false},{"port_id":"bottom_30","visible":false},{"port_id":"bottom_31","visible":false},{"port_id":"bottom_32","visible":false},{"port_id":"bottom_33","visible":false},{"port_id":"bottom_34","visible":false},{"port_id":"bottom_35","visible":false},{"port_id":"bottom_36","visible":false},{"port_id":"bottom_37","visible":false},{"port_id":"bottom_38","visible":false},{"port_id":"bottom_39","visible":false},{"port_id":"bottom_40","visible":false},{"port_id":"bottom_41","visible":false},{"port_id":"bottom_42","visible":false},{"port_id":"bottom_43","visible":false},{"port_id":"bottom_44","visible":false},{"port_id":"bottom_45","visible":false}],"status":0},{"key":"54916127c2a25c0518d14c11","object_title":"ADT_ASCOM2_P","object_type":{"template_id":"532fff7eb41281c17ce263b6","name":"ApplicatieInterface","name_internal":"application_interface","category":"Applicatielaag","category_internal":"application_layer"},"loc":"-610 -295","size":"440 45","color":"#ccecf9","category":"composition_group","hide_links_from":false,"hide_links_to":false,"isGroup":true,"group":"549151fdd4e5740b1c6dc8cf","text":"","type":null,"shape":"","picture":"applicationinterface-transparent","font":"#009edf","left_ports":[{"port_id":"left_0","visible":false},{"port_id":"left_1","visible":false},{"port_id":"left_2","visible":false},{"port_id":"left_3","visible":false}],"top_ports":[{"port_id":"top_0","visible":false},{"port_id":"top_1","visible":false},{"port_id":"top_2","visible":false},{"port_id":"top_3","visible":false},{"port_id":"top_4","visible":false},{"port_id":"top_5","visible":false},{"port_id":"top_6","visible":false},{"port_id":"top_7","visible":false},{"port_id":"top_8","visible":false},{"port_id":"top_9","visible":false},{"port_id":"top_10","visible":false},{"port_id":"top_11","visible":false},{"port_id":"top_12","visible":false},{"port_id":"top_13","visible":false},{"port_id":"top_14","visible":false},{"port_id":"top_15","visible":false},{"port_id":"top_16","visible":false},{"port_id":"top_17","visible":false},{"port_id":"top_18","visible":false},{"port_id":"top_19","visible":false},{"port_id":"top_20","visible":false},{"port_id":"top_21","visible":false},{"port_id":"top_22","visible":false},{"port_id":"top_23","visible":false},{"port_id":"top_24","visible":false},{"port_id":"top_25","visible":false},{"port_id":"top_26","visible":false},{"port_id":"top_27","visible":false},{"port_id":"top_28","visible":false},{"port_id":"top_29","visible":false},{"port_id":"top_30","visible":false},{"port_id":"top_31","visible":false},{"port_id":"top_32","visible":false},{"port_id":"top_33","visible":false},{"port_id":"top_34","visible":false},{"port_id":"top_35","visible":false},{"port_id":"top_36","visible":false},{"port_id":"top_37","visible":false},{"port_id":"top_38","visible":false},{"port_id":"top_39","visible":false},{"port_id":"top_40","visible":false},{"port_id":"top_41","visible":false},{"port_id":"top_42","visible":false},{"port_id":"top_43","visible":false}],"right_ports":[{"port_id":"right_0","visible":false},{"port_id":"right_1","visible":false},{"port_id":"right_2","visible":false},{"port_id":"right_3","visible":false}],"bottom_ports":[{"port_id":"bottom_0","visible":false},{"port_id":"bottom_1","visible":false},{"port_id":"bottom_2","visible":false},{"port_id":"bottom_3","visible":false},{"port_id":"bottom_4","visible":false},{"port_id":"bottom_5","visible":false},{"port_id":"bottom_6","visible":false},{"port_id":"bottom_7","visible":false},{"port_id":"bottom_8","visible":false},{"port_id":"bottom_9","visible":false},{"port_id":"bottom_10","visible":false},{"port_id":"bottom_11","visible":false},{"port_id":"bottom_12","visible":false},{"port_id":"bottom_13","visible":false},{"port_id":"bottom_14","visible":false},{"port_id":"bottom_15","visible":false},{"port_id":"bottom_16","visible":false},{"port_id":"bottom_17","visible":false},{"port_id":"bottom_18","visible":false},{"port_id":"bottom_19","visible":false},{"port_id":"bottom_20","visible":false},{"port_id":"bottom_21","visible":false},{"port_id":"bottom_22","visible":false},{"port_id":"bottom_23","visible":false},{"port_id":"bottom_24","visible":false},{"port_id":"bottom_25","visible":false},{"port_id":"bottom_26","visible":false},{"port_id":"bottom_27","visible":false},{"port_id":"bottom_28","visible":false},{"port_id":"bottom_29","visible":false},{"port_id":"bottom_30","visible":false},{"port_id":"bottom_31","visible":false},{"port_id":"bottom_32","visible":false},{"port_id":"bottom_33","visible":false},{"port_id":"bottom_34","visible":false},{"port_id":"bottom_35","visible":false},{"port_id":"bottom_36","visible":false},{"port_id":"bottom_37","visible":false},{"port_id":"bottom_38","visible":false},{"port_id":"bottom_39","visible":false},{"port_id":"bottom_40","visible":false},{"port_id":"bottom_41","visible":false},{"port_id":"bottom_42","visible":false},{"port_id":"bottom_43","visible":false}],"status":0},{"key":"549150b4c2a25c0518d14ab5","object_title":"ADT","object_type":{"template_id":"532fff94b41281c17ce263b7","name":"Applicatiefunctie","name_internal":"application_function","category":"Applicatielaag","category_internal":"application_layer"},"loc":"-610 -240","size":"440 34","color":"#ccecf9","category":"composition_group","hide_links_from":false,"hide_links_to":false,"isGroup":true,"group":"549151fdd4e5740b1c6dc8cf","text":"","type":null,"shape":"","picture":"businessfunction-transparent","font":"#009edf","left_ports":[{"port_id":"left_0","visible":false},{"port_id":"left_1","visible":false},{"port_id":"left_2","visible":false}],"top_ports":[{"port_id":"top_0","visible":false},{"port_id":"top_1","visible":false},{"port_id":"top_2","visible":false},{"port_id":"top_3","visible":false},{"port_id":"top_4","visible":false},{"port_id":"top_5","visible":false},{"port_id":"top_6","visible":false},{"port_id":"top_7","visible":false},{"port_id":"top_8","visible":false},{"port_id":"top_9","visible":false},{"port_id":"top_10","visible":false},{"port_id":"top_11","visible":false},{"port_id":"top_12","visible":false},{"port_id":"top_13","visible":false},{"port_id":"top_14","visible":false},{"port_id":"top_15","visible":false},{"port_id":"top_16","visible":false},{"port_id":"top_17","visible":false},{"port_id":"top_18","visible":false},{"port_id":"top_19","visible":false},{"port_id":"top_20","visible":false},{"port_id":"top_21","visible":false},{"port_id":"top_22","visible":false},{"port_id":"top_23","visible":false},{"port_id":"top_24","visible":false},{"port_id":"top_25","visible":false},{"port_id":"top_26","visible":false},{"port_id":"top_27","visible":false},{"port_id":"top_28","visible":false},{"port_id":"top_29","visible":false},{"port_id":"top_30","visible":false},{"port_id":"top_31","visible":false},{"port_id":"top_32","visible":false},{"port_id":"top_33","visible":false},{"port_id":"top_34","visible":false},{"port_id":"top_35","visible":false},{"port_id":"top_36","visible":false},{"port_id":"top_37","visible":false},{"port_id":"top_38","visible":false},{"port_id":"top_39","visible":false},{"port_id":"top_40","visible":false},{"port_id":"top_41","visible":false},{"port_id":"top_42","visible":false},{"port_id":"top_43","visible":false}],"right_ports":[{"port_id":"right_0","visible":false},{"port_id":"right_1","visible":false},{"port_id":"right_2","visible":false}],"bottom_ports":[{"port_id":"bottom_0","visible":false},{"port_id":"bottom_1","visible":false},{"port_id":"bottom_2","visible":false},{"port_id":"bottom_3","visible":false},{"port_id":"bottom_4","visible":false},{"port_id":"bottom_5","visible":false},{"port_id":"bottom_6","visible":false},{"port_id":"bottom_7","visible":false},{"port_id":"bottom_8","visible":false},{"port_id":"bottom_9","visible":false},{"port_id":"bottom_10","visible":false},{"port_id":"bottom_11","visible":false},{"port_id":"bottom_12","visible":false},{"port_id":"bottom_13","visible":false},{"port_id":"bottom_14","visible":false},{"port_id":"bottom_15","visible":false},{"port_id":"bottom_16","visible":false},{"port_id":"bottom_17","visible":false},{"port_id":"bottom_18","visible":false},{"port_id":"bottom_19","visible":false},{"port_id":"bottom_20","visible":false},{"port_id":"bottom_21","visible":false},{"port_id":"bottom_22","visible":false},{"port_id":"bottom_23","visible":false},{"port_id":"bottom_24","visible":false},{"port_id":"bottom_25","visible":false},{"port_id":"bottom_26","visible":false},{"port_id":"bottom_27","visible":false},{"port_id":"bottom_28","visible":false},{"port_id":"bottom_29","visible":false},{"port_id":"bottom_30","visible":false},{"port_id":"bottom_31","visible":false},{"port_id":"bottom_32","visible":false},{"port_id":"bottom_33","visible":false},{"port_id":"bottom_34","visible":false},{"port_id":"bottom_35","visible":false},{"port_id":"bottom_36","visible":false},{"port_id":"bottom_37","visible":false},{"port_id":"bottom_38","visible":false},{"port_id":"bottom_39","visible":false},{"port_id":"bottom_40","visible":false},{"port_id":"bottom_41","visible":false},{"port_id":"bottom_42","visible":false},{"port_id":"bottom_43","visible":false}],"status":0}],
			  "linkDataArray": [{"id":"55e97ba1c9942a0a287cebf5","from":"54916127c2a25c0518d14c11","to":"54916127c2a25c0518d14c11","category":"composition","text":null,"points":[],"visible":true,"is_relation_direction_alternative":false,"template_id":"5333e86c8ccee096c838fe91","from_port":"right_1","to_port":"bottom_9","status":0},{"id":"5624bd2ec9942a0b6c4d3a5c","from":"54916127c2a25c0518d14c11","to":"54916127c2a25c0518d14c11","category":"flow","text":null,"points":[],"visible":true,"is_relation_direction_alternative":false,"template_id":"5333e8938ccee096c838fe92","from_port":"right_2","to_port":"bottom_9","status":0},{"id":"56310b9bc9942a01d8bfdfbe","from":"549151fdd4e5740b1c6dc8cf","to":"54916127c2a25c0518d14c11","category":"composition","text":null,"points":[],"visible":true,"is_relation_direction_alternative":false,"template_id":"5333e86c8ccee096c838fe91","from_port":"right_1","to_port":"left_2","status":0},{"id":"5630f8d5c9942a01d8bfc80d","from":"547dd42ac2a25c0518d0a3ed","to":"547dd42ac2a25c0518d0a3ed","category":"composition","text":null,"points":[],"visible":true,"is_relation_direction_alternative":true,"template_id":"5333e86c8ccee096c838fe91","from_port":"right_1","to_port":"bottom_9","status":0},{"id":"561cb49ec9942a0b6c4be08a","from":"547dd42ac2a25c0518d0a3ed","to":"547dd42ac2a25c0518d0a3ed","category":"flow","text":null,"points":[],"visible":true,"is_relation_direction_alternative":false,"template_id":"5333e8938ccee096c838fe92","from_port":"right_2","to_port":"bottom_9","status":0},{"id":"54a11567a623990994a77773","from":"54916127c2a25c0518d14c11","to":"549150b4c2a25c0518d14ab5","category":"association","text":null,"points":[],"visible":true,"is_relation_direction_alternative":true,"template_id":"5333e8348ccee096c838fe90","from_port":"left_2","to_port":"right_1","status":0},{"id":"5628a143c9942a0b6c4fcba5","from":"549150b4c2a25c0518d14ab5","to":"54916127c2a25c0518d14c11","category":"association","text":null,"points":[],"visible":true,"is_relation_direction_alternative":false,"template_id":"5333e8348ccee096c838fe90","from_port":"right_1","to_port":"left_2","status":0},{"id":"549165e022972f071caa019a","from":"549151fdd4e5740b1c6dc8cf","to":"549150b4c2a25c0518d14ab5","category":"association","text":"","points":[],"visible":true,"is_relation_direction_alternative":true,"template_id":"5333e8348ccee096c838fe90","from_port":"left_22","to_port":"right_1","status":0}]};


renderChart();
              
            
!
999px

Console