# diagram-shapes

> Diagram gallery displays Basic, Flow, and BPMN shape collections for selection.

**Framework:** aspnet-core  **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/aspnet-core/diagram-shapes.json
```

**Install Package(s)**

```bash
dotnet add package Syncfusion.AspNetCore.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.cshtml

```cshtml
@page
@using Syncfusion.EJ2;

    <div class="control-section">
        <ejs-diagram id="container" dragEnter="dragEnter" width="100%" height="700px" created="nodesCreated">
            <e-diagram-snapsettings constraints="None"></e-diagram-snapsettings>
        </ejs-diagram>
    </div>

    <script type="text/javascript">

        var basicShapeModel = [
            {
                shape: { type: 'Text', content: 'Basic Shapes' },
                constraints: ej.diagrams.NodeConstraints.PointerEvents,
                style: { fontSize: 16, fill: 'None', fontFamily: 'sans-serif', bold: true, strokeWidth: 0 },
            },
            {
                shape: { type: 'Basic', shape: 'Rectangle' }, annotations: [
                    { content: 'Rectangle' }
                ]
            },
            {
                shape: { type: 'Basic', shape: 'Ellipse' }, annotations: [
                    { content: 'Ellipse' }
                ]
            },
            {
                shape: { type: 'Basic', shape: 'Triangle' }, annotations: [
                    { content: 'Triangle' }
                ]
            }
        ];
        function nodesCreated(obj, diagram) {
            var nodes = getNodes();
            var diagram = document.getElementById("container").ej2_instances[0];
            for (var i = 0; i < nodes.length; i++) {
                diagram.add(nodes[i]);
            }
            diagram.fitToPage();
        }

        function dragEnter(args) {
            var obj = args.element;
            if (obj) {
                var oWidth = obj.width;
                var oHeight = obj.height;
                var ratio = 100 / obj.width;
                obj.width = 100;
                obj.height *= ratio;
                obj.offsetX += (obj.width - oWidth) / 2;
                obj.offsetY += (obj.height - oHeight) / 2;
                obj.style = { fill: '#357BD2', strokeColor: 'white' };
            }
        }



        function getNodes() {
            var nodes1 = basicShapeModel;
            var offsetx = 60;
            var offsety = 50;
            var count = 1;
            for (var i = 0; i < nodes1.length; i++) {
                var node = nodes1[i];
                node.width = 40;
                node.height = 40;
                node.offsetX = offsetx;
                node.offsetY = offsety;
                if (!(node.shape.type === "Text")) {
                    node.annotations[0].verticalAlignment = 'Top';
                    node.annotations[0].offset = { y: 1 };
                    node.annotations[0].margin = { top: 10 };

                    offsetx = offsetx + 90;
                    if (count % 10 === 0) {
                        offsety = offsety + 100;
                        offsetx = 60;
                    }
                    count++;
                }
                if (node.shape.type === 'Text') {
                    offsetx = 60;
                    offsety = offsety + 50;
                    count = 1;
                    node.width = 150;
                    node.height = 50;
                    node.offsetX = 90;
                    if (!(node.shape.content === 'Basic Shapes')) {
                        node.offsetX = 90;
                        node.offsetY = offsety + 50;
                        offsety = offsety + 100;
                    }
                }
            }
            return nodes1;
        }
    </script>
```