<div id="diagram"></div>
<script>
  var Shape = kendo.dataviz.diagram.Shape;
  $("#diagram").kendoDiagram();
  var diagram = $("#diagram").data("kendoDiagram");

  var shape = new Shape({
    id: 1,
    x: 20,
    y: 20,
    fill: "#c0f0fc",
    connectors: [
      {
        name: "top"
      },
      {
        name: "Upstream",
        position: function(shp) {
          return shp._transformPoint(shp.bounds().bottomRight());
        }
      }]
  });
  diagram.addShape(shape);
</script>

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: {
            text: "Shape with Named Connectors"
        },
        connectors: [
            { name: "top" },
            { name: "right" },
            { name: "bottom" },
            { name: "left" }
        ]
    }]
});
</script>

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: {
            text: "Custom Positioned Connectors"
        },
        connectors: [{
            position: function(shape) {
                return new kendo.dataviz.diagram.Point(
                    shape.bounds().center().x,
                    shape.bounds().y
                );
            }
        }]
    }]
});
</script>