How to Add Multiple Ports to All Sides of a Node in Syncfusion's Blazor Diagram Component?

By setting the Offset values, you can easily add ports to specific positions on all sides of a node in the Syncfusion® Blazor Diagram component. This approach allows users to create complex diagrams with customizable connectivity options, enhancing interactivity and functionality.

The Offset property is used to align the ports based on fractions. 0 represents the top/left corner, 1 represents the bottom/right corner, and 0.5 represents half of the width/height.

The following table shows the relationship between the shape port position and path port offset (fraction values).

Offset values	Output
(0,0)
(0,0.5)
(0,1)
(0.5,0)
(0.5,0.5)
(0.5,1)
(1,0)
(1,0.5)
(1,1)

Implementation Steps:

1. Create a Blazor Server Application
Begin by creating a Blazor Server application. Follow the instructions here to set up your project.

2. Add the Diagram Component
Include the SfDiagramComponent in your Blazor page and bind it to a collection of nodes.

@using Syncfusion.Blazor.Diagram

<SfDiagramComponent Height="600px" Nodes="@nodes" /> 

3.Configure a Node with Ports
Create a node and define ports for all four sides (top, bottom, left, and right) by setting their Offset values. Below is the complete code for adding multiple ports to a node.

@code {
   DiagramObjectCollection<Node> nodes;

   protected override void OnInitialized()
   {
       nodes = new DiagramObjectCollection<Node>();

       // Create a node and add ports to all sides.
       Node node = new Node()
       {
           OffsetX = 250,
           OffsetY = 250,
           Width = 100,
           Height = 100,
           Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
           Ports = new DiagramObjectCollection<PointPort>()
           {
               // Port on the left side.
               new PointPort()
               {
                   ID = "leftPort",
                   Offset = new DiagramPoint() { X = 0, Y = 0.5 },
                   Visibility = PortVisibility.Visible,
                   Style = new ShapeStyle() { Fill = "gray", StrokeColor = "black" },
                   Width = 12,
                   Height = 12,
                   Shape = PortShapes.Square
               },
               // Port on the right side.
               new PointPort()
               {
                   ID = "rightPort",
                   Offset = new DiagramPoint() { X = 1, Y = 0.5 },
                   Visibility = PortVisibility.Visible,
                   Style = new ShapeStyle() { Fill = "gray", StrokeColor = "black" },
                   Width = 12,
                   Height = 12,
                   Shape = PortShapes.Square
               },
               // Port on the top side.
               new PointPort()
               {
                   ID = "topPort",
                   Offset = new DiagramPoint() { X = 0.5, Y = 0 },
                   Visibility = PortVisibility.Visible,
                   Style = new ShapeStyle() { Fill = "gray", StrokeColor = "black" },
                   Width = 12,
                   Height = 12,
                   Shape = PortShapes.Square
               },
               // Port on the bottom side.
               new PointPort()
               {
                   ID = "bottomPort",
                   Offset = new DiagramPoint() { X = 0.5, Y = 1 },
                   Visibility = PortVisibility.Visible,
                   Style = new ShapeStyle() { Fill = "gray", StrokeColor = "black" },
                   Width = 12,
                   Height = 12,
                   Shape = PortShapes.Square
               }
           }
       };

       // Add the node to the collection.
       nodes.Add(node);
   }
} 

Explanation:

Port Configuration:

• Ports are added to the Ports collection of the node.
• Each port has an Offset value to position it on one side of the node:
  1. X = 0, Y = 0.5: Left side
  2. X = 1, Y = 0.5: Right side
  3. X = 0.5, Y = 0: Top side
  4. X = 0.5, Y = 1: Bottom side
• The Visibility property ensures the ports are visible.
• Styles (Fill, StrokeColor, Width, Height, Shape) customize the port’s appearance.

For more details, please refer to this UG.

You can download a complete working sample here.

Conclusion:

This guide explains how to add multiple ports to all sides of a node in the Syncfusion® Blazor Diagram component by setting Offset values for each port.

You can refer to our Blazor Diagram feature tour page to learn about its other groundbreaking features, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor Diagram example to understand how to create and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor Diagram and other Blazor components.

If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!