Example of Ports in Blazor Diagram Component

Diagram / Getting Started / Ports

This sample visualizes the process of publishing a book using connection points. Connection points are static points over the shapes used to create connections between the shapes. Customizing the size and appearance of the connection points is illustrated in this example.

Properties
Visibility
Shape
Stroke Width
Size
Fill Color
Stroke Color
Connection Direction

This example shows how to add connection points to shapes. The Ports property of the node defines the static connection ports. The Offset, HorizontalAlignment, VerticalAlignment, and Margin properties of the port define its position.

The Style property is used to customize its appearance. The Visibility property can be used to define when the connection ports should be visible.

The ConnectionDirection property controls the direction for connections to the port. By default, the direction of the connection is automatically assigned based on the port's position and the direction of the connector's other endpoint. But the connection-direction can be set with a specific direction.

Transform your Blazor web apps today with Syncfusion® Blazor components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
Documentation
Forum
Blog
Knowledge Base
Copyright © 2001 - 2025 Syncfusion® Inc.