# diagram-shapes

> Diagram displays a configured collection of shapes with created-event initialization and bound interaction constraints.

**Framework:** blazor  **Component:** Diagram  **Variant:** shapes

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/blazor/diagram-shapes.json
```

**Install Package(s)**

```bash
dotnet add package Syncfusion.Blazor.Diagram
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/diagram-shapes/Diagram.razor

```razor
@page "/diagram/shapes"
@using Syncfusion.Blazor.Diagram

<SfDiagramComponent @ref="@diagram"  Height="530px" Created="OnCreated" Nodes="@NodeCollection" @bind-Constraints="@diagramConstraints">
    <SnapSettings Constraints=SnapConstraints.None>
    </SnapSettings>
</SfDiagramComponent>
@code
{
    SfDiagramComponent? diagram;
    //Defines diagrams's nodes collection
    public DiagramObjectCollection<Node>? NodeCollection = new DiagramObjectCollection<Node>();
    DiagramConstraints diagramConstraints = DiagramConstraints.None;
    protected override void OnInitialized()
    {
        NodeCollection = new DiagramObjectCollection<Node>();
        #region Basic Shapes
        AddShapeText("Basic Shapes", NodeConstraints.PointerEvents);
        AddBasicShapes("rectLabel", "Rectangle", NodeBasicShapes.Rectangle, false);
        AddBasicShapes("ellipseLabel", "Ellipse", NodeBasicShapes.Ellipse, true);
        #endregion
        UpdateValues();
    }
    private void AddShapeText(string textContent, NodeConstraints constraints)
    {
        Node node = new Node()
        {
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
            {
                new ShapeAnnotation
                {
                    Content = textContent,
                }
            },
            Style = new TextStyle() { FontSize = 16, Fill = "None", FontFamily = "sans-serif", Bold = true, StrokeWidth = 0 },
            Constraints = constraints
        };
        NodeCollection!.Add(node);
    }
    private void AddBasicShapes(string id, string shapeText, NodeBasicShapes shapes, bool CheckAspectRatio)
    {
        Node node = new Node()
        {
            Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.NodeShapes.Basic, Shape = shapes },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
            {
                new ShapeAnnotation
                {
                    Content = shapeText, ID = id,
                }
            },
        };
        if (CheckAspectRatio)
        {
            node.Constraints = node.Constraints | NodeConstraints.AspectRatio;
        }
        NodeCollection!.Add(node);
    }
    private void OnCreated()
    {
        FitOptions mobileoptions = new FitOptions() { Mode = FitMode.Both, Region = DiagramRegion.Content };
        diagram!.FitToPage(mobileoptions);
    }
    private void UpdateValues()
    {
        int offsetx = 60;
        int offsety = 50;
        int count = 1;
        for (int i = 0; i < NodeCollection!.Count; i++)
        {
            Node node = NodeCollection[i];
            node.Width = 40;
            node.Height = 40;
            node.Constraints = NodeConstraints.None;
            if (node.Shape!.Type == Syncfusion.Blazor.Diagram.NodeShapes.Flow)
            {
                if (node.Shape is FlowShape)
                {
                    FlowShape? shapeType = node.Shape as FlowShape;
                    if (shapeType!.Shape == NodeFlowShapes.Process || shapeType.Shape == NodeFlowShapes.Terminator)
                    {
                        node.Height = 20;
                    }
                    else if (shapeType.Shape == NodeFlowShapes.Decision)
                    {
                        node.Height = 35;
                    }
                    else if (shapeType.Shape == NodeFlowShapes.Document || shapeType.Shape == NodeFlowShapes.DirectData ||
                      shapeType.Shape == NodeFlowShapes.MultiDocument || shapeType.Shape == NodeFlowShapes.PreDefinedProcess)
                    {
                        node.Height = 30;
                    }
                }
            }
            if (node.Annotations![0].Content != "Basic Shapes" && node.Annotations[0].Content != "Flow Shapes")
            {
                if (node.Annotations.Count > 0)
                {
                    node.Annotations[0].VerticalAlignment = VerticalAlignment.Top;
                    node.Annotations[0].Offset = new DiagramPoint() { X = 0.5, Y = 1 };
                    node.Annotations[0].Margin = new DiagramThickness() { Top = 10 };
                }
                node.OffsetX = offsetx;
                node.OffsetY = offsety;
                offsetx = offsetx + 90;
                if (count % 12 == 0)
                {
                    offsety = offsety + 100;
                    offsetx = 60;
                }
                count++;
            }
            if (node.Annotations[0].Content == "Basic Shapes" || node.Annotations[0].Content == "Flow Shapes")
            {
                node.Annotations[0].Style!.Bold = true;
                node.Annotations[0].Style!.FontSize = 16;
                offsetx = 60;
                offsety += 20;
                node.OffsetX = offsetx;
                node.OffsetY = offsety;
                offsety = offsety + 50;
                count = 1;
                node.Width = 150;
                node.Height = 50;
                node.OffsetX = 90;
            }
        }
    }
    private void AddFlowShapes(string id, string shapeText, NodeFlowShapes shapes)
    {
        Node terminatNode = new Node()
        {
            Shape = new FlowShape() { Type = Syncfusion.Blazor.Diagram.NodeShapes.Flow, Shape = shapes },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>() 
            {
                new ShapeAnnotation { Content = shapeText,ID = id }
            }
        };
        NodeCollection!.Add(terminatNode);
    }
}
```