Blazor Diagram: High-Performance Diagramming Component

@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel
@using DiagramShapes = Syncfusion.Blazor.Diagram.Shapes
@using DiagramSegments = Syncfusion.Blazor.Diagram.Segments
<SfDiagramComponent Height="600px" Nodes="@NodeCollection" Connectors="@ConnectorCollection" NodeDefaults="@NodeDefaults" ConnectorDefaults="@ConnectorDefaults" ></SfDiagramComponent>
@code
{
    int connectorCount = 0;
    // Reference to diagram
    SfDiagramComponent diagram;
    // Define diagram's nodes collection
    public DiagramObjectCollection<Node> NodeCollection { get; set; }
    // Define diagram's connector collection
    public DiagramObjectCollection<Connector> ConnectorCollection { get; set; }

    protected override void OnInitialized()
    {
        InitDiagramModel();
    }

    private void InitDiagramModel()
    {
        NodeCollection = new DiagramObjectCollection<Node>();
        ConnectorCollection = new DiagramObjectCollection<Connector>();
        CreateNode("Start", 50, FlowShapes.Terminator, "Start");
        CreateNode("Init", 140, FlowShapes.Process, "var i = 0;'");
        CreateNode("Condition", 230, FlowShapes.Decision, "i < 10?");
        CreateNode("Print", 320, FlowShapes.PreDefinedProcess, "print(\'Hello!!\');");
        CreateNode("Increment", 410, FlowShapes.Process, "i++;");
        CreateNode("End", 500, FlowShapes.Terminator, "End");
        OrthogonalSegment segment1 = new OrthogonalSegment()
        {
            Type = DiagramSegments.Orthogonal,
            Length = 30,
            Direction = Direction.Right
        };
        OrthogonalSegment segment2 = new OrthogonalSegment()
        {
            Type = DiagramSegments.Orthogonal,
            Length = 300,
            Direction = Direction.Bottom
        };
        OrthogonalSegment segment3 = new OrthogonalSegment()
        {
            Type = DiagramSegments.Orthogonal,
            Length = 30,
            Direction = Direction.Left
        };
        OrthogonalSegment segment4 = new OrthogonalSegment()
        {
            Type = DiagramSegments.Orthogonal,
            Length = 200,
            Direction = Direction.Top
        };
        CreateConnector("Start", "Init");
        CreateConnector("Init", "Condition");
        CreateConnector("Condition", "Print");
        CreateConnector("Condition", "End", "Yes", segment1, segment2);
        CreateConnector("Print", "Increment", "No");
        CreateConnector("Increment", "Condition", null, segment3, segment4);

    }
    private void CreateConnector(string sourceId, string targetId, string label = default(string), OrthogonalSegment segment1 = null, OrthogonalSegment segment2 = null)
    {
        Connector diagramConnector = new Connector()
        {
            ID = string.Format("connector{0}", ++connectorCount),
            SourceID = sourceId,
            TargetID = targetId
        };

        diagramConnector.Type = Segments.Orthogonal;
        if (segment1 != null)
        {
            diagramConnector.Segments = new DiagramObjectCollection<ConnectorSegment>() { segment1, segment2 };
        }
        if (label != default(string))
        {
            var annotation = new PathAnnotation()
            {
                Content = label,
                Style = new TextShapeStyle() { Fill = "transparent" }
            };
            diagramConnector.Annotations = new DiagramObjectCollection<PathAnnotation>() { annotation };
        }

        ConnectorCollection.Add(diagramConnector);
    }

    private void NodeDefaults(IDiagramObject obj)
    {
        Node node = obj as Node;
        node.Width = 140;
        node.Height = 50;
        node.OffsetX = 300;
        node.Style = new ShapeStyle() { Fill = "#357BD2", StrokeColor = "white" };
    }
    private void ConnectorDefaults(IDiagramObject obj)
    {

        Connector connector = obj as Connector;
        connector.Type = DiagramSegments.Orthogonal;
        connector.TargetDecorator = new Decorator() { Shape = DecoratorShapes.Arrow, Width = 10, Height = 10 };
    }
    private void CreateNode(string id, double y, FlowShapes shape, string label, bool positionLabel = false)
    {
        ShapeAnnotation annotation = new ShapeAnnotation() { Content = label,
            Style = new TextShapeStyle()
            {
                Color = "white",
                Fill = "transparent"
            }
        };
        if (positionLabel)
        {
            annotation.Margin = new Margin() { Left = 25, Right = 25 };
        };

        Node diagramNode = new Node()
        {
            ID = id,
            OffsetY = y,
            Shape = new FlowShape() { Type = Shapes.Flow, Shape = shape },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>() { annotation }
        };
        NodeCollection.Add(diagramNode);
    }
}