{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "diagram-shapes",
  "framework": "aspnet-core",
  "type": "registry:component",
  "component": "Diagram",
  "variant": "shapes",
  "dependencies": [
    "Syncfusion.AspNetCore.Diagram"
  ],
  "description": "Diagram gallery displays Basic, Flow, and BPMN shape collections for selection.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/aspnet-core/llms.txt",
    "skillPack": "syncfusion/aspnetcore-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/aspnet-core/diagram-shapes.md"
  },
  "files": [
    {
      "target": "src/components/diagram-shapes/diagram.cshtml",
      "content": "@page\r\n@using Syncfusion.EJ2;\r\n\r\n    <div class=\"control-section\">\r\n        <ejs-diagram id=\"container\" dragEnter=\"dragEnter\" width=\"100%\" height=\"700px\" created=\"nodesCreated\">\r\n            <e-diagram-snapsettings constraints=\"None\"></e-diagram-snapsettings>\r\n        </ejs-diagram>\r\n    </div>\r\n\r\n    <script type=\"text/javascript\">\r\n\r\n        var basicShapeModel = [\r\n            {\r\n                shape: { type: 'Text', content: 'Basic Shapes' },\r\n                constraints: ej.diagrams.NodeConstraints.PointerEvents,\r\n                style: { fontSize: 16, fill: 'None', fontFamily: 'sans-serif', bold: true, strokeWidth: 0 },\r\n            },\r\n            {\r\n                shape: { type: 'Basic', shape: 'Rectangle' }, annotations: [\r\n                    { content: 'Rectangle' }\r\n                ]\r\n            },\r\n            {\r\n                shape: { type: 'Basic', shape: 'Ellipse' }, annotations: [\r\n                    { content: 'Ellipse' }\r\n                ]\r\n            },\r\n            {\r\n                shape: { type: 'Basic', shape: 'Triangle' }, annotations: [\r\n                    { content: 'Triangle' }\r\n                ]\r\n            }\r\n        ];\r\n        function nodesCreated(obj, diagram) {\r\n            var nodes = getNodes();\r\n            var diagram = document.getElementById(\"container\").ej2_instances[0];\r\n            for (var i = 0; i < nodes.length; i++) {\r\n                diagram.add(nodes[i]);\r\n            }\r\n            diagram.fitToPage();\r\n        }\r\n\r\n        function dragEnter(args) {\r\n            var obj = args.element;\r\n            if (obj) {\r\n                var oWidth = obj.width;\r\n                var oHeight = obj.height;\r\n                var ratio = 100 / obj.width;\r\n                obj.width = 100;\r\n                obj.height *= ratio;\r\n                obj.offsetX += (obj.width - oWidth) / 2;\r\n                obj.offsetY += (obj.height - oHeight) / 2;\r\n                obj.style = { fill: '#357BD2', strokeColor: 'white' };\r\n            }\r\n        }\r\n\r\n\r\n\r\n        function getNodes() {\r\n            var nodes1 = basicShapeModel;\r\n            var offsetx = 60;\r\n            var offsety = 50;\r\n            var count = 1;\r\n            for (var i = 0; i < nodes1.length; i++) {\r\n                var node = nodes1[i];\r\n                node.width = 40;\r\n                node.height = 40;\r\n                node.offsetX = offsetx;\r\n                node.offsetY = offsety;\r\n                if (!(node.shape.type === \"Text\")) {\r\n                    node.annotations[0].verticalAlignment = 'Top';\r\n                    node.annotations[0].offset = { y: 1 };\r\n                    node.annotations[0].margin = { top: 10 };\r\n\r\n                    offsetx = offsetx + 90;\r\n                    if (count % 10 === 0) {\r\n                        offsety = offsety + 100;\r\n                        offsetx = 60;\r\n                    }\r\n                    count++;\r\n                }\r\n                if (node.shape.type === 'Text') {\r\n                    offsetx = 60;\r\n                    offsety = offsety + 50;\r\n                    count = 1;\r\n                    node.width = 150;\r\n                    node.height = 50;\r\n                    node.offsetX = 90;\r\n                    if (!(node.shape.content === 'Basic Shapes')) {\r\n                        node.offsetX = 90;\r\n                        node.offsetY = offsety + 50;\r\n                        offsety = offsety + 100;\r\n                    }\r\n                }\r\n            }\r\n            return nodes1;\r\n        }\r\n    </script>"
    }
  ]
}