{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "diagram-shapes",
  "framework": "blazor",
  "type": "registry:component",
  "component": "Diagram",
  "variant": "shapes",
  "dependencies": [
    "Syncfusion.Blazor.Diagram"
  ],
  "description": "Diagram displays a configured collection of shapes with created-event initialization and bound interaction constraints.",
  "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/blazor/llms.txt",
    "skillPack": "syncfusion/blazor-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/blazor/diagram-shapes.md"
  },
  "files": [
    {
      "target": "src/components/diagram-shapes/Diagram.razor",
      "content": "@page \"/diagram/shapes\"\n@using Syncfusion.Blazor.Diagram\n\n<SfDiagramComponent @ref=\"@diagram\"  Height=\"530px\" Created=\"OnCreated\" Nodes=\"@NodeCollection\" @bind-Constraints=\"@diagramConstraints\">\n    <SnapSettings Constraints=SnapConstraints.None>\n    </SnapSettings>\n</SfDiagramComponent>\n@code\n{\n    SfDiagramComponent? diagram;\n    //Defines diagrams's nodes collection\n    public DiagramObjectCollection<Node>? NodeCollection = new DiagramObjectCollection<Node>();\n    DiagramConstraints diagramConstraints = DiagramConstraints.None;\n    protected override void OnInitialized()\n    {\n        NodeCollection = new DiagramObjectCollection<Node>();\n        #region Basic Shapes\n        AddShapeText(\"Basic Shapes\", NodeConstraints.PointerEvents);\n        AddBasicShapes(\"rectLabel\", \"Rectangle\", NodeBasicShapes.Rectangle, false);\n        AddBasicShapes(\"ellipseLabel\", \"Ellipse\", NodeBasicShapes.Ellipse, true);\n        #endregion\n        UpdateValues();\n    }\n    private void AddShapeText(string textContent, NodeConstraints constraints)\n    {\n        Node node = new Node()\n        {\n            Annotations = new DiagramObjectCollection<ShapeAnnotation>()\n            {\n                new ShapeAnnotation\n                {\n                    Content = textContent,\n                }\n            },\n            Style = new TextStyle() { FontSize = 16, Fill = \"None\", FontFamily = \"sans-serif\", Bold = true, StrokeWidth = 0 },\n            Constraints = constraints\n        };\n        NodeCollection!.Add(node);\n    }\n    private void AddBasicShapes(string id, string shapeText, NodeBasicShapes shapes, bool CheckAspectRatio)\n    {\n        Node node = new Node()\n        {\n            Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.NodeShapes.Basic, Shape = shapes },\n            Annotations = new DiagramObjectCollection<ShapeAnnotation>()\n            {\n                new ShapeAnnotation\n                {\n                    Content = shapeText, ID = id,\n                }\n            },\n        };\n        if (CheckAspectRatio)\n        {\n            node.Constraints = node.Constraints | NodeConstraints.AspectRatio;\n        }\n        NodeCollection!.Add(node);\n    }\n    private void OnCreated()\n    {\n        FitOptions mobileoptions = new FitOptions() { Mode = FitMode.Both, Region = DiagramRegion.Content };\n        diagram!.FitToPage(mobileoptions);\n    }\n    private void UpdateValues()\n    {\n        int offsetx = 60;\n        int offsety = 50;\n        int count = 1;\n        for (int i = 0; i < NodeCollection!.Count; i++)\n        {\n            Node node = NodeCollection[i];\n            node.Width = 40;\n            node.Height = 40;\n            node.Constraints = NodeConstraints.None;\n            if (node.Shape!.Type == Syncfusion.Blazor.Diagram.NodeShapes.Flow)\n            {\n                if (node.Shape is FlowShape)\n                {\n                    FlowShape? shapeType = node.Shape as FlowShape;\n                    if (shapeType!.Shape == NodeFlowShapes.Process || shapeType.Shape == NodeFlowShapes.Terminator)\n                    {\n                        node.Height = 20;\n                    }\n                    else if (shapeType.Shape == NodeFlowShapes.Decision)\n                    {\n                        node.Height = 35;\n                    }\n                    else if (shapeType.Shape == NodeFlowShapes.Document || shapeType.Shape == NodeFlowShapes.DirectData ||\n                      shapeType.Shape == NodeFlowShapes.MultiDocument || shapeType.Shape == NodeFlowShapes.PreDefinedProcess)\n                    {\n                        node.Height = 30;\n                    }\n                }\n            }\n            if (node.Annotations![0].Content != \"Basic Shapes\" && node.Annotations[0].Content != \"Flow Shapes\")\n            {\n                if (node.Annotations.Count > 0)\n                {\n                    node.Annotations[0].VerticalAlignment = VerticalAlignment.Top;\n                    node.Annotations[0].Offset = new DiagramPoint() { X = 0.5, Y = 1 };\n                    node.Annotations[0].Margin = new DiagramThickness() { Top = 10 };\n                }\n                node.OffsetX = offsetx;\n                node.OffsetY = offsety;\n                offsetx = offsetx + 90;\n                if (count % 12 == 0)\n                {\n                    offsety = offsety + 100;\n                    offsetx = 60;\n                }\n                count++;\n            }\n            if (node.Annotations[0].Content == \"Basic Shapes\" || node.Annotations[0].Content == \"Flow Shapes\")\n            {\n                node.Annotations[0].Style!.Bold = true;\n                node.Annotations[0].Style!.FontSize = 16;\n                offsetx = 60;\n                offsety += 20;\n                node.OffsetX = offsetx;\n                node.OffsetY = offsety;\n                offsety = offsety + 50;\n                count = 1;\n                node.Width = 150;\n                node.Height = 50;\n                node.OffsetX = 90;\n            }\n        }\n    }\n    private void AddFlowShapes(string id, string shapeText, NodeFlowShapes shapes)\n    {\n        Node terminatNode = new Node()\n        {\n            Shape = new FlowShape() { Type = Syncfusion.Blazor.Diagram.NodeShapes.Flow, Shape = shapes },\n            Annotations = new DiagramObjectCollection<ShapeAnnotation>() \n            {\n                new ShapeAnnotation { Content = shapeText,ID = id }\n            }\n        };\n        NodeCollection!.Add(terminatNode);\n    }\n}"
    }
  ]
}