diff --git a/blazor/diagram/how-to.md b/blazor/diagram/how-to.md
index f1f9b47978..2c0263a4e2 100644
--- a/blazor/diagram/how-to.md
+++ b/blazor/diagram/how-to.md
@@ -157,6 +157,140 @@ The [AddDiagramElementsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.B
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Methods/AddDiagramElements)
+## How to Add Swimlane Using the AddDiagramElementsAsync Method
+
+The following code example shows how to add a Swimlane and a Connector at runtime using binding properties after the diagram has been initialized, by calling the `AddDiagramElementsAsync` method.
+
+```
+@using Syncfusion.Blazor.Diagram
+
+
+
+@code
+{
+ private SfDiagramComponent diagram;
+ private DiagramObjectCollection nodeCollection = new DiagramObjectCollection();
+ private DiagramObjectCollection swimlaneCollection = new DiagramObjectCollection();
+ private DiagramObjectCollection NodesAndConnectors = new DiagramObjectCollection();
+
+ private async void OnCreated()
+ {
+ await AddSwimlaneAndConnector();
+ }
+
+ private async Task AddSwimlaneAndConnector()
+ {
+ Node clonedNode1 = (Node)NodesAndConnectors[0].Clone();
+ Node clonedNode2 = (Node)NodesAndConnectors[1].Clone();
+ Connector clonedConnector = (Connector)NodesAndConnectors[2].Clone();
+
+ // Create a swimlane
+ Swimlane swimlane = new Swimlane()
+ {
+ ID = "swimlane1",
+ OffsetX = 400,
+ OffsetY = 200,
+ Height = 200,
+ Width = 450,
+ Header = new SwimlaneHeader()
+ {
+ Annotation = new ShapeAnnotation() { Content = "Sales Process" },
+ Height = 50,
+ },
+ Lanes = new DiagramObjectCollection()
+ {
+ new Lane()
+ {
+ ID = "lane1",
+ Height = 100,
+ Header = new SwimlaneHeader()
+ {
+ Width = 30,
+ Annotation = new ShapeAnnotation() { Content = "Consumer" }
+ },
+ Children = new DiagramObjectCollection()
+ {
+ clonedNode1, clonedNode2
+ }
+ }
+ }
+ };
+
+ // Add swimlane to collection
+ swimlaneCollection.Add(swimlane);
+
+ // Add swimlane to diagram
+ await diagram.AddDiagramElementsAsync(swimlaneCollection);
+
+ clonedConnector.ID = "clonedConnector";
+ clonedConnector.SourceID = "node1";
+ clonedConnector.SourcePortID = "port1";
+ clonedConnector.TargetID = "node2";
+ clonedConnector.TargetPortID = "port2";
+
+ // Add connector to collection
+ nodeCollection.Add(clonedConnector);
+
+ // Add connector to diagram
+ await diagram.AddDiagramElementsAsync(nodeCollection);
+ }
+
+ protected override void OnInitialized()
+ {
+ Node node1 = new Node()
+ {
+ ID = "node1",
+ Height = 50,
+ Width = 50,
+ LaneOffsetX = 100,
+ LaneOffsetY = 30,
+ Ports = new DiagramObjectCollection()
+ {
+ new PointPort()
+ {
+ ID = "port1",
+ Visibility = PortVisibility.Visible,
+ Offset = new DiagramPoint() { X = 1, Y = 0.5 },
+ Height = 10,
+ Width = 10
+ }
+ }
+ };
+ NodesAndConnectors.Add(node1);
+
+ Node node2 = new Node()
+ {
+ ID = "node2",
+ Height = 50,
+ Width = 50,
+ LaneOffsetX = 250,
+ LaneOffsetY = 30,
+ Ports = new DiagramObjectCollection()
+ {
+ new PointPort()
+ {
+ ID = "port2",
+ Visibility = PortVisibility.Visible,
+ Offset = new DiagramPoint() { X = 0, Y = 0.5 },
+ Height = 10,
+ Width = 10
+ }
+ }
+ };
+ NodesAndConnectors.Add(node2);
+
+ Connector Connector = new Connector()
+ {
+ ID = "connector1",
+ SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
+ TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
+ Type = ConnectorSegmentType.Straight
+ };
+ NodesAndConnectors.Add(Connector);
+ }
+}
+```
+
## How to Clear Nodes and Connectors from the Diagram
The [Clear](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_Clear) method removes all elements from the diagram, including nodes, connectors, and groups. Use it to reset the canvas to a blank state before loading or creating a new set of elements.
diff --git a/blazor/diagram/swimlane/lane/lane.md b/blazor/diagram/swimlane/lane/lane.md
index d82ef45061..7d654c9fee 100644
--- a/blazor/diagram/swimlane/lane/lane.md
+++ b/blazor/diagram/swimlane/lane/lane.md
@@ -77,6 +77,8 @@ The following code example explains how to define a swimlane with lane.
```
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Lane/LaneCreation).
+>Note:If you set a fixed swimlane height and the combined height of the swimlane header and lanes is less than the swimlane’s height, an extra lane is automatically created to fill the remaining space. To avoid this, either remove the fixed swimlane height or ensure the header and lane heights together equal the swimlane height.
+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBoCNNwLozzxYUR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Lane](../Swimlane-images/Swimlane_Lane.PNG)" %}
## How to Create and Customize Lane Header