Shapes

    .Shapes(shapes =>
    {
        shapes.Add()
            .Id("1")
            .Type(FlowchartShapeType.Terminator)
            .Content(c => c.Text("Start"))
            .Fill(f => f.Color("#CFE2FF"))
            .Stroke(s => s.Color("#9EC5FE").Width(4))
            .X(218)
            .Y(50)
            .Width(300)
            .Height(100);

        shapes.Add()
            .Id("2")
            .Type(FlowchartShapeType.Process)
            .Content(c => c.Text("Define Requirements"))
            .Fill(f => f.Color("#E2D9F3"))
            .Stroke(s => s.Color("#C5B3E6").Width(4))
            .Width(150)
            .Height(100)
            .X(268)
            .Y(218);
      })
```}

### JavaScript

Call the `diagram.addShape();` method which renders a rectangle in the upper-left corner of the Diagram surface. To change the initial position, call the `addShape()` method with an additional `Point` parameter.

    var Point = kendo.dataviz.diagram.Point;
    diagram.addShape(new Point(100,220));

To specify additional properties for the Diagram, use the `options` parameter. The following example demonstrates how to set the background color of the shape.

    diagram.addShape(new Point(100,220), { background: "red" });

The `addShape()` method also accepts a `shape` instance and enables you to add a new shape.

    var Point = kendo.dataviz.diagram.Point;
    var shapeInstance = new kendo.diagram.Shape();
    var shape = diagram.addShape(shape);
    shape.position(new Point(100,220));

## Adding Connections

To add connections between shapes, use the Connections collection.
```Razor HtmlHelper
    .Connections(connections =>
    {
        connections.Add()
            .From(f=>f.Id("1"))
            .To(t=>t.Id("2"))
            .Content(c => c.Text("Yes").FontWeight("bold"))
            .FromConnector("right");
     })
```}

If you prefer the JavaScript approach, use the `connect()` method.

    var Point = kendo.dataviz.diagram.Point;
    var shape1 = diagram.addShape(new Point(100,100));
    var shape2 = diagram.addShape(new Point(300,100));
    var connection = diagram.connect(shape1, shape2);

## See Also

* [Using the API of the Diagram HtmlHelper for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/diagram/api)
* [Worklfow Diagram (Demo)](https://demos.telerik.com/aspnet-mvc/diagram/workflow-diagram)
* [Server-Side API](/api/diagram)