msgraph hierarchical layout contains edges of irregular shape

Question

Please help me with mxgraph.
In a hierarchical layout I draw edges from side of shape (from SHAPE_RHOMBUS). It looks weird - edges contain unnecessary kinks and they are of irregular shape. Please see the screenshot. Weird edges
Maybe there is some property I do not know about in order the graph looked correctly? Thank you in advance.

  initGraph() {
const container = this.graphContainer.nativeElement;
if (!mx.mxClient.isBrowserSupported()) {
  mx.mxUtils.error('Browser is not supported!', 200, false);
} else {
  this.graphContainer.nativeElement.innerHTML = '';

  const graph = new mx.mxGraph(container);
  this.graph = graph;

  graph.setTooltips(true);
  graph.setConnectable(true);
  graph.setPortsEnabled(false);
  graph.setAllowDanglingEdges(false);
  graph.setDisconnectOnMove(false);

  this.parent = graph.getDefaultParent();

  let style = graph.getStylesheet().getDefaultEdgeStyle();
  this.graph.getStylesheet().putCellStyle('myedge', style);

  style = this.graph.getStylesheet().getDefaultVertexStyle();
  style[mx.mxConstants.STYLE_SHADOW] = true;
  style[mx.mxConstants.STYLE_SHAPE] = mx.mxConstants.SHAPE_RECTANGLE;
  style[mx.mxConstants.STYLE_GRADIENTCOLOR] = 'white';
  style[mx.mxConstants.STYLE_FOLDABLE] = false;
  style[mx.mxConstants.STYLE_OVERFLOW] = 'hidden';
  this.graph.getStylesheet().putCellStyle('vtx-default', style);

  style = [];
  style[mx.mxConstants.STYLE_SHAPE] = mx.mxConstants.SHAPE_ELLIPSE;
  this.graph.getStylesheet().putCellStyle('vtx-circle', style);

  style = [];
  style[mx.mxConstants.STYLE_SHAPE] = mx.mxConstants.SHAPE_DOUBLE_ELLIPSE;
  this.graph.getStylesheet().putCellStyle('vtx-doublecircle', style);

  style = [];
  style[mx.mxConstants.STYLE_SHAPE] = mx.mxConstants.SHAPE_RHOMBUS;
  this.graph.getStylesheet().putCellStyle('vtx-rhombus', style);

  let ports = new Array();
  ports['w'] = {x: 0, y: 0.5, perimeter: true, constraint: 'west'};
  ports['e'] = {x: 1, y: 0.5, perimeter: true, constraint: 'east'};
  ports['n'] = {x: 0.5, y: 0, perimeter: true, constraint: 'north'};
  ports['s'] = {x: 0.5, y: 1, perimeter: true, constraint: 'south'};

  mx.mxShape.prototype.getPorts = function() {
    return ports;
  };
  graph.getConnectionConstraint = function(edge, terminal, source) {
    let key = (source) ? mx.mxConstants.STYLE_SOURCE_PORT : mx.mxConstants.STYLE_TARGET_PORT;
    let id = edge.style[key];
    if (id != null) {
      let p = ports[id];
      let c =  new mx.mxConnectionConstraint(new mx.mxPoint(p.x, p.y), p.perimeter);
      return c;
    }
    return null;
  };

  const parent = this.parent;
  graph.getModel().beginUpdate();
  try {
    // Adding vertices
    for (const bl of this.appInstance.blocks) {
      ...
      this.graph.insertVertex(currentParent,
      ...
    }

    // Adding edges
    for (const fl of this.appInstance.flows) {
        ...
        edgeStyle += 'sourcePort=e;targetPort=n';
        ...
        edgeStyle += 'sourcePort=w;targetPort=n';
        ...
      this.graph.insertEdge(src?.getParent(), null, edgeText, src as mxCell, dst as mxCell, edgeStyle);
    }
  } finally {
    const layoutTop = new mx.mxHierarchicalLayout(graph, mx.mxConstants.DIRECTION_NORTH);
    layoutTop.interRankCellSpacing = 50;
    layoutTop.execute(parent, parent.children);
    graph.getModel().endUpdate();
  }
}