title: How to determine which side of connection is connected in mxgraph
body: <p>I have problem something like this a decision has 3 side <code>Input, Yes, No</code>. I want to determine the arrow is connected to which of them.</p>
  <p>Here is how I'm going to connect</p>
  <p><a href="https://i.stack.imgur.com/Y0QOL.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y0QOL.gif" alt="enter image description here" /></a></p>
  <p>Connected from Yes</p>
  <p><a href="https://i.stack.imgur.com/JIGtk.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JIGtk.gif" alt="enter image description here" /></a></p>
  <p><strong>Question:</strong> how to know connection is connected to whether <code>Input,Yes,No</code> sides</p>
  <p><strong>Note:</strong> if problem can be solved with builtin Rhombus then solution is most welcome</p>
  <p>here is codepen link:
  <a href="https://codepen.io/eabangalore/pen/eYvVGOg?editors=1010" rel="nofollow noreferrer">https://codepen.io/eabangalore/pen/eYvVGOg?editors=1010</a></p>
  <p>Here is code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var graph;
  function initCanvas(){
    graph = new mxGraph(document.getElementById('graph-wrapper'));
    var graphStr = `&lt;mxGraphModel&gt;&lt;root&gt;&lt;mxCell id="0"/&gt;&lt;mxCell id="1" parent="0"/&gt;&lt;div xmlns="http://www.w3.org/1999/xhtml" data-v-38092c6f="" data-id="60f14502305ed03160da1fd0" data-name="Upload" class="workflow-bins-item" draggedattached="true" triggerortaskid="8c47f506-d34f-4851-a31a-c66facd957f2" style="background: rgb(1, 98, 247); color: white;" id="2"&gt;Upload&lt;mxCell xmlns="" style="fillColor=none;strokeColor=none" vertex="1" customWorkflowType="bins" cell_id="60f14502305ed03160da1fd0" triggerOrTaskId="8c47f506-d34f-4851-a31a-c66facd957f2" parent="1"&gt;&lt;mxGeometry x="80" y="90" width="145" height="59" as="geometry"/&gt;&lt;/mxCell&gt;&lt;/div&gt;&lt;div xmlns="http://www.w3.org/1999/xhtml" class="decision-rhombus" data-id="c51a6443-afcc-8705-6557-b1748094c920" draggedattached="true" triggerortaskid="null" id="3"&gt;&lt;span  value="Decision" class="decision-rhombus-name--center show-rhombus"&gt;Decision&lt;/span&gt;&lt;span title="Input" class="decision-rhombus--left decision-color show-rhombus"&gt;Input&lt;/span&gt;&lt;span title="Yes" class="decision-rhombus--right decision-color show-rhombus"&gt;Yes&lt;/span&gt;&lt;span title="No" class="decision-rhombus--bottom decision-color show-rhombus"&gt;No&lt;/span&gt;&lt;mxCell xmlns="" style="fillColor=none;strokeColor=none" vertex="1" customWorkflowType="decisions" cell_id="c51a6443-afcc-8705-6557-b1748094c920" parent="1"&gt;&lt;mxGeometry x="290" y="83" width="162" height="73" as="geometry"/&gt;&lt;/mxCell&gt;&lt;/div&gt;&lt;/root&gt;&lt;/mxGraphModel&gt;
  `
    
    var doc = mxUtils.parseXml(graphStr);
      var codec = new mxCodec(doc);
    codec.decode(doc.documentElement, graph.getModel());
    // render as HTML node always. You probably won't want that in real world though
    graph.convertValueToString = function(cell) {
      return cell.value;
    }
    
    graph.setConnectable(true);
    graph.setAllowDanglingEdges(false);
    
    graph.refresh();
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#graph-wrapper{
    background: #333;
    //background:gray;
      width: 100%;
      height: 528px;
  }
  
     .decision-rhombus {
          background: gray;
          clip-path: polygon(0 50%, 50% 100%,100% 50%,50% 0);
          width: 162px;
          display: inline-block;
          margin: 5px;
          height: 73px;
          position: relative !important;
          color: #fff;
          font-size: 11px;
          cursor: default;
      }
  
      .decision-rhombus &gt; span{
        position:absolute;
      }
  
      .decision-rhombus--left{
          left: 17px;
          top: 30px;
      }
  
      .decision-rhombus--right{
          left: 137px;
          top: 29px;
      }
  
      .decision-rhombus--bottom{
          left: 76px;
          top: 52px;
      }
      .decision-rhombus-name--center {
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 90px; 
          height: 16px; 
          position: absolute;
          border: none; 
          background: transparent; 
          color: #fff; 
          text-align: center;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          user-select: none;
          outline: none;
          font-size: 12px;
      }
      .hide-rhombus{
          display: none;
      }
      .show-rhombus{
          display: inherit;
      }
      .decision-color{
          color: #d1d1d1;
      }
  
  .workflow-bins-item {
  /*     border-radius: 28px; */
      justify-content: center;
  /*     padding-top: 5px; */
      display: flex;
      /* margin-left: 20px; */
  /*     margin-top: 20px; */
  /*     padding: 3px 17px; */
      min-height: 35px;
      /* min-width: 34px; */
      min-width: 111.203px;
      flex-direction: column;
      align-items: center;
      font-size: 12px;
      max-width: 111.203px;
      white-space: pre-wrap;
       background: gray !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!--
    Copyright (c) 2006-2013, JGraph Ltd
    
  --&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Rhombus with connection input,yes,no&lt;/title&gt;
  
      &lt;!-- Sets the basepath for the library if not in same directory --&gt;
        &lt;script type="text/javascript"&gt;
          mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
        &lt;/script&gt;
  
        &lt;!-- Loads and initializes the library --&gt;
        &lt;script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"&gt;&lt;/script&gt;
  
      &lt;!-- Example code --&gt;
  &lt;/head&gt;
  
  &lt;!-- Calls the main function after the page has loaded. Container is dynamically created. --&gt;
  &lt;body onload="initCanvas()"&gt;
    
       &lt;div id="graph-wrapper"&gt;
  
       &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Please help me thanks in advance!!</p>