Customize Edge Appearance

Style properties can enhance how edges represent relationship between nodes. FlexDiagram allows the customization of their appearance through the C1.Chart.ArrowStyle enumeration.Available Arrow Styles:

ArrowStyle.None
ArrowStyle.Normal
ArrowStyle.Tee
ArrowStyle.Diamond
ArrowStyle.Generalization

Change ArrowStyle appearance by using the following code:

diagram.Edges.Add(new Edge()
{
    Source = startNode,
    Target = processNode,
    TargetArrow = ArrowStyle.Normal
});

Style Edges in FlexDiagram

The Edge class represents a connection between two nodes and provides properties to customize stroke color, fill color, dash patterns, and thickness.

Property	Description
StrokeColor	Specifies the edge line color.
FillColor	Specifies the interior color of the edge.
StrokeDashPattern	Defines dashed or dotted line patterns.
StrokeWidth	Sets the line thickness.

Edge Styling Example

The following example demonstrates how to create an edge, assign source and target nodes, apply a style, and add a tooltip:

// Create nodes
var startNode = new Node() { Text = "Start" };
var endNode = new Node() { Text = "End" };

// Create edge and configure style
var edge = new Edge()
{
    Source = startNode,
    Target = endNode,
    Tooltip = "Connects Start to End"
};

// Apply edge style
edge.Style = new ChartStyle()
{
    StrokeColor = Color.DarkBlue,
    StrokeWidth = 2.0f,
    StrokeDashPattern = new float[] { 3, 2 },
    FillColor = Color.Transparent
};

// Add nodes and edge to the diagram
diagram.Nodes.Add(startNode);
diagram.Nodes.Add(endNode);
diagram.Edges.Add(edge);