Skip to content

1007098: GitHub repository link change and standard validation for code example #7517

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
KarkuvelRajan merged 4 commits into from
Feb 3, 2026
Merged

1007098: GitHub repository link change and standard validation for code example #7517

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b1e59e3
1007098: GitHub repository link change and standard validation for co…
BalaVigneshRaviChandran Feb 2, 2026
2d7ae50
Merge branch 'hotfix/hotfix-v32.1.19' into ES-1007098-UGCorrectionsHFPH3
KarkuvelRajan Feb 2, 2026
0595d38
Merge branch 'hotfix/hotfix-v32.1.19' into ES-1007098-UGCorrectionsHFPH3
KarkuvelRajan Feb 3, 2026
f3639ff
Merge branch 'hotfix/hotfix-v32.1.19' into ES-1007098-UGCorrectionsHFPH3
KarkuvelRajan Feb 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions blazor/diagram/connectors/segments/multiplesegments.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,19 @@ documentation: ug

## How to Create Connectors with Multiple Segments

Connectors can include a sequence of segment objects. To create a connector with multiple segments, define and add the segments to the [connector.Segments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorSegment.html) collection. The following code example illustrates how to create a connector with multiple segments.
Connectors can include a sequence of segment objects. To create a connector with multiple segments, define the segments with [ConnectorSegment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorSegment.html) class and add the segments to the [Segments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_Segments) collection. The following code example illustrates how to create a connector with multiple segments.

```cshtml
@using Syncfusion.Blazor.Diagram

<SfDiagramComponent Width="1000px" Height="500px" Connectors="@connectors">
<SfDiagramComponent Width="1000px" Height="500px" Connectors="@_connectors">
<SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
</SfDiagramComponent>

@code
{
//Defines diagram's connector collection.
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
private DiagramObjectCollection<Connector> _connectors = new DiagramObjectCollection<Connector>();

protected override void OnInitialized()
{
Expand Down Expand Up @@ -54,11 +54,11 @@ Connectors can include a sequence of segment objects. To create a connector with
},
};
//Add the connector into connectors' collection.
connectors.Add(connector1);
_connectors.Add(connector1);
}
}
```
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/MultipleSegments)
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Connectors/Segments/MultipleSegments.razor)

{% previewsample "https://blazorplayground.syncfusion.com/embed/LDheMXDnKoKLrXqe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Diagram with Multiple Segment](../../images/blazor-diagram-multiple-segment.png)" %}

Expand Down
66 changes: 35 additions & 31 deletions blazor/diagram/connectors/segments/orthogonal.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,22 @@ documentation: ug

## How to Create Orthogonal Segments

[Orthogonal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorSegmentType.html#Syncfusion_Blazor_Diagram_ConnectorSegmentType_Orthogonal) segments create segments that are perpendicular to each other. To create an orthogonal connector, set the connector Type to **Orthogonal** to create a default orthogonal segment and need to specify Type. The following code example illustrates how to create a default orthogonal segment.
[Orthogonal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorSegmentType.html#Syncfusion_Blazor_Diagram_ConnectorSegmentType_Orthogonal) segments create segments that are perpendicular to each other. To create an orthogonal connector, set the connector [Type]() to **Orthogonal** to create a default orthogonal segment and need to specify Type. The following code example illustrates how to create a default orthogonal segment.

```cshtml
@using Syncfusion.Blazor.Diagram

<SfDiagramComponent Width="1000px" Height="500px" Connectors="@connectors">
<SfDiagramComponent Width="1000px" Height="500px" Connectors="@_connectors">
</SfDiagramComponent>

@code
{
//Defines diagram's connector collection.
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
private DiagramObjectCollection<Connector> _connectors = new DiagramObjectCollection<Connector>();

protected override void OnInitialized()
{
Connector Connector = new Connector()
Connector connector = new Connector()
{
ID = "connector1",
SourcePoint = new DiagramPoint()
Expand All @@ -36,7 +36,7 @@ documentation: ug
},
Style = new ShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 },
TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
//Specify the segments type as Orthogonal.
//Specify the segments type as Orthogonal.
Type = ConnectorSegmentType.Orthogonal,
TargetDecorator = new DecoratorSettings()
{
Expand All @@ -49,11 +49,11 @@ documentation: ug
}
}
};
connectors.Add(Connector);
_connectors.Add(connector);
}
}
```
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/Orthogonal)
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Connectors/Segments/Orthogonal.razor)

{% previewsample "https://blazorplayground.syncfusion.com/embed/hZroijZnUeUFxqCq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Connector with Orthogonal Segment in Blazor Diagram](../../images/blazor-diagram-connector-with-orthogonal.png)" %}

Expand Down Expand Up @@ -116,8 +116,6 @@ The [Length](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Ort
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/VjryWZNdUofLzsmT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/Orthogonal)

N> Ensure the connector type and each segment type are both set to **Orthogonal**. There should be no contradiction between connector type and segment type.

### How to Edit Orthogonal Segments
Expand All @@ -128,43 +126,43 @@ N> Ensure the connector type and each segment type are both set to **Orthogonal*
```cshtml
@using Syncfusion.Blazor.Diagram

<SfDiagramComponent @ref="Diagram" Width="1000px" Height="500px" Connectors="@connectors">
<SfDiagramComponent @ref="_diagram" Width="1000px" Height="500px" Connectors="@_connectors">
</SfDiagramComponent>

@code
{
//Reference the diagram
SfDiagramComponent Diagram;
private SfDiagramComponent _diagram;
//Initialize the diagram's node collection.
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
private DiagramObjectCollection<Connector> _connectors = new DiagramObjectCollection<Connector>();

protected override void OnInitialized()
{
Connector Connector = new Connector()
// Enable the segment editing.
Connector connector = new Connector()
{
ID = "Connector2",
Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
Type = ConnectorSegmentType.Orthogonal,
SourcePoint = new DiagramPoint { X = 400, Y = 100 },
TargetPoint = new DiagramPoint { X = 500, Y = 200 }
};
connectors.Add(Connector);
_connectors.Add(connector);
}
}
```

A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/OrthogonalSegmentEditing)
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Connectors/Segments/OrthogonalSegmentEditing.razor)

{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLIijXxgIHDFceR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Editing Orthogonal connector segment in Blazor Diagram](../../images/blazor-diagram-edit-orthogonal-segment.gif)" %}

## How to Customize Orthogonal Segment Thumb Shape

The Orthogonal connector can have multiple segments between the source and target points. By default, segment thumbs are rendered as **circles**. They can be customized globally or per connector using the [SegmentThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html) class.

To change the segment thumb shape for all Orthogonal connectors, configure the `SegmentThumbSettings` property of the SfDiagramComponent and set the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html#Syncfusion_Blazor_Diagram_SegmentThumbSettings_Shape) property to the desired shape.
To change the segment thumb shape for all Orthogonal connectors, configure the [ConnectorSegmentThumb](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ConnectorSegmentThumb) property of the SfDiagramComponent and set the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html#Syncfusion_Blazor_Diagram_SegmentThumbSettings_Shape) property to the desired shape.

To customize the segment thumb shape for a specific connector, first disable the [InheritSegmentThumbShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_InheritSegmentThumbShape) constraint. Then, configure the `SegmentThumbSettings` property of the Connector class, specifying the desired shape using the `Shape` property of the `SegmentThumbSettings` class.
To customize the segment thumb shape for a specific connector, first disable the [InheritSegmentThumbShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_InheritSegmentThumbShape) constraint. Then, configure the [SegmentThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_SegmentThumbSettings) property of the Connector class, specifying the desired shape using the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SegmentThumbSettings.html#Syncfusion_Blazor_Diagram_SegmentThumbSettings_Shape) property of the `SegmentThumbSettings` class.

The following predefined shapes are available for segment thumbs:

Expand All @@ -187,28 +185,31 @@ The following code example illustrates how to customize the orthogonal segment t

```cshtml
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent @ref="Diagram" Width="1000px" Height="500px" Connectors="@connectors">

<SfDiagramComponent @ref="_diagram" Width="1000px" Height="500px" Connectors="@_connectors">
</SfDiagramComponent>

@code
{
SfDiagramComponent Diagram;
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
private SfDiagramComponent _diagram;
private DiagramObjectCollection<Connector> _connectors = new DiagramObjectCollection<Connector>();

protected override void OnInitialized()
{
Connector Connector = new Connector()
Connector connector = new Connector()
{
ID = "Connector2",
Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
Type = ConnectorSegmentType.Orthogonal,
SourcePoint = new DiagramPoint { X = 400, Y = 100 },
TargetPoint = new DiagramPoint { X = 500, Y = 200 },
SegmentThumbSettings = new SegmentThumbSettings() {Shape = SegmentThumbShapes.IndentedArrow}
SegmentThumbSettings = new SegmentThumbSettings() { Shape = SegmentThumbShapes.IndentedArrow }
};
connectors.Add(Connector);
_connectors.Add(connector);
}
}
```
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/OrthogonalThumbShape).
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Connectors/Segments/OrthogonalThumbShape.razor).

{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhSMNXRqeQwfDfv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Editing Orthogonal Segment in Blazor Diagram](../../images/OrthogonalThumbSettings.png)" %}

Expand All @@ -218,28 +219,31 @@ The following code example illustrates how to customize the orthogonal segment t

```cshtml
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent @ref="Diagram" Width="1000px" Height="500px" Connectors="@connectors" ConnectorSegmentThumb="@segmentThumbSettings">

<SfDiagramComponent @ref="_diagram" Width="1000px" Height="500px" Connectors="@_connectors" ConnectorSegmentThumb="@_segmentThumbSettings">
</SfDiagramComponent>

@code
{
SfDiagramComponent Diagram;
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
SegmentThumbSettings segmentThumbSettings = new SegmentThumbSettings(){Shape = SegmentThumbShapes.Fletch};
private SfDiagramComponent _diagram;
private DiagramObjectCollection<Connector> _connectors = new DiagramObjectCollection<Connector>();
private SegmentThumbSettings _segmentThumbSettings = new SegmentThumbSettings() { Shape = SegmentThumbShapes.Fletch };

protected override void OnInitialized()
{
Connector Connector = new Connector()
Connector connector = new Connector()
{
ID = "Connector2",
Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb | ConnectorConstraints.InheritSegmentThumbShape,
Type = ConnectorSegmentType.Orthogonal,
SourcePoint = new DiagramPoint { X = 400, Y = 100 },
TargetPoint = new DiagramPoint { X = 500, Y = 200 }
};
connectors.Add(Connector);
_connectors.Add(connector);
}
}
```
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/OrthogonalThumbSetting)
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Connectors/Segments/OrthogonalThumbSetting.razor)

{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVoMjNdUevUbNDK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Editing Orthogonal Segment in Blazor Diagram](../../images/OrthogonalThumbSettings1.png)" %}

Expand Down