Blazor Diagram - Powerful, Feature-Rich Diagramming Component

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
@using DiagramShapes = Syncfusion.Blazor.Diagrams.Shapes
@using DiagramSegments = Syncfusion.Blazor.Diagrams.Segments
<SfDiagram  Height="600px" Nodes="@NodeCollection" Connectors="@ConnectorCollection" NodeDefaults="@NodeDefaults"
        ConnectorDefaults="@ConnectorDefaults"></SfDiagram>
@code
{
int connectorCount = 0;
// Reference to diagram
SfDiagram diagram;
// Defines diagram's nodes collection
public ObservableCollection<DiagramNode> NodeCollection { get; set; }
// Defines diagram's connector collection
public ObservableCollection<DiagramConnector> ConnectorCollection { get; set; }
// Defines default values for DiagramNode object
public DiagramNode NodeDefaults { get; set; }
// Defines default values for DiagramConnector object
public DiagramConnector ConnectorDefaults { get; set; }
protected override void OnInitialized()
{
    InitDiagramModel();
}

private void InitDiagramModel()
{
    InitDiagramDefaults();
    NodeCollection = new ObservableCollection<DiagramNode>();
    ConnectorCollection = new ObservableCollection<DiagramConnector>();
    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");
    DiagramConnectorSegment segment1 = new DiagramConnectorSegment()
    {
        Type = DiagramSegments.Orthogonal,
        Length = 30,
        Direction = Direction.Right
    };
    DiagramConnectorSegment segment2 = new DiagramConnectorSegment()
    {
        Type = DiagramSegments.Orthogonal,
        Length = 300,
        Direction = Direction.Bottom
    };
    DiagramConnectorSegment segment3 = new DiagramConnectorSegment()
    {
        Type = DiagramSegments.Orthogonal,
        Length = 30,
        Direction = Direction.Left
    };
    DiagramConnectorSegment segment4 = new DiagramConnectorSegment()
    {
        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), DiagramConnectorSegment segment1 = null, DiagramConnectorSegment segment2 = null)
{
    DiagramConnector diagramConnector = new DiagramConnector()
    {
        Id = string.Format("connector{0}", ++connectorCount),
        SourceID = sourceId,
        TargetID = targetId
    };

    if (label != default(string))
    {
        var annotation = new DiagramConnectorAnnotation()
        {
            Content = label,
            Style = new AnnotationStyle() { Fill = "white" }
        };
        diagramConnector.Annotations = new ObservableCollection<DiagramConnectorAnnotation>() { annotation };
    }

    if (segment1 != null)
    {
        diagramConnector.Segments = new ObservableCollection<DiagramConnectorSegment>() { segment1, segment2 };
    }

    ConnectorCollection.Add(diagramConnector);
}

private void InitDiagramDefaults()
{
    DiagramNodeAnnotation defaultAnnotation = new DiagramNodeAnnotation()
    {
        Style = new AnnotationStyle()
        {
            Color = "white",
            Fill = "transparent"
        }
    };
    NodeDefaults = new DiagramNode()
    {
        Width = 140,
        Height = 50,
        OffsetX = 300,
        Annotations = new ObservableCollection<DiagramNodeAnnotation>() { defaultAnnotation },
        Style = new NodeShapeStyle() { Fill = "#357BD2", StrokeColor = "white" }
    };

    ConnectorDefaults = new DiagramConnector()
    {
        Type = DiagramSegments.Orthogonal,
        TargetDecorator = new ConnectorTargetDecorator() { Shape = DecoratorShapes.Arrow, Width = 10, Height = 10 }
    };
}
private void CreateNode(string id, double y, FlowShapes shape, string label, bool positionLabel = false)
{
    DiagramNodeAnnotation annotation = new DiagramNodeAnnotation() { Content = label };
    if (positionLabel)
    {
        annotation.Margin = new NodeAnnotationMargin() { Left = 25, Right = 25 };
    };

    DiagramNode diagramNode = new DiagramNode()
    {
        Id = id,
        OffsetY = y,
        Shape = new DiagramShape() { Type = DiagramShapes.Flow, FlowShape = shape },
        Annotations = new ObservableCollection<DiagramNodeAnnotation>() { annotation }
    };
    NodeCollection.Add(diagramNode);
}
}