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.

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);