Connection Animation
Data-flow visuals, status indicators and ERD multiplicity markers on connection lines
Connection lines are not just static strokes: they can visualize flow direction, throughput, status and cardinality. All of it is configured per line through ConnectionLine (or any IConnectionLine implementation).
Table of Contents
Animation Styles
Seven FlowAnimationStyle values ship with the framework. Each is a self-contained effect drawn along the line path, from the classic moving dots to directional arrows:
| Style | Visual | Best for |
|---|---|---|
Dots | Glowing circles moving along the path (default) | General data flow, presentations |
Dashes | Dashes travelling along the line | Simple, low-noise flow indication |
Wave | Pulsing wave distortion along the stroke | Signals and continuous streams |
Gradient | Moving color gradient | Emphasizing direction on thick lines |
Particles | Particles with trailing tails | High-throughput or turbulent flow |
Pulse | Glowing pulse travelling end to end | Event or trigger propagation |
Arrows | Arrow shapes flowing along the line | Pipelines and staged processing |
Animation is opt-in per line: set IsDataFlowAnimated = true and choose a style with AnimationStyle. The lighter IsAnimated flag is for generic line animation without data-flow semantics.
Data-Flow Configuration
| Property | Type | Description |
|---|---|---|
IsDataFlowAnimated | bool | Enables the animated data-flow rendering. |
AnimationStyle | FlowAnimationStyle | Which of the seven effects to draw. |
FlowDirection | DataFlowDirection | None, Forward, Backward or Bidirectional. Controls the travel direction. |
DataFlowSpeed | float | Pixels per second; default 100. |
DataFlowParticleSize | float | Size of the moving element in pixels; default 4. |
DataFlowColor | SKColor | Color of the animated element; defaults to SKColors.Blue. |
Because the effect depends on time, a line with animation requests frames while visible. Static diagrams should leave animation off — see the Performance Guide.
Status Indicators
Lines can report execution state, which the renderer draws as a colored indicator on the line:
| Property | Type | Description |
|---|---|---|
ShowStatusIndicator | bool | Draws the status marker when true. |
Status | LineStatus | None, Working, Running, Warning or Error. |
StatusColor | SKColor | Color of the marker; defaults to SKColors.DimGray. |
Schema validation reuses the same mechanism: when a connection's expected schema does not match the produced schema, the line is flagged LineStatus.Warning with an amber indicator (see the ETL family).
Arrows, Dashes and Multiplicity
| Property | Type | Description |
|---|---|---|
ShowStartArrow / ShowEndArrow | bool | Arrowheads at each end; both default to true. |
ArrowSize | float | Arrowhead size; default 10. |
DashPattern | float[] | Optional dash pattern applied to the stroke. |
StartMultiplicity / EndMultiplicity | ERDMultiplicity | ERD crow's-foot markers at each end. |
ERDMultiplicity values: Unspecified, ZeroOrOne (circle + bar), OneOnly (double bar), OneOrMany (bar + crow's foot), ZeroOrMany (circle + crow's foot), Many (crow's foot) and One (single bar).
Putting It Together
drawingManager.ConnectComponents(sourceNode, targetNode);
var line = drawingManager.GetLines().Last();
// Animated data flow
line.IsDataFlowAnimated = true;
line.AnimationStyle = FlowAnimationStyle.Particles;
line.FlowDirection = DataFlowDirection.Forward;
line.DataFlowColor = SKColors.DeepSkyBlue;
line.DataFlowSpeed = 140f;
line.DataFlowParticleSize = 5f;
// Status + styling
line.ShowStatusIndicator = true;
line.Status = LineStatus.Running;
line.LineColor = SKColors.SlateGray;
line.Paint.StrokeWidth = 2.5f;
line.ArrowSize = 12f;
line.ShowEndArrow = true;
// ERD cardinality
line.StartMultiplicity = ERDMultiplicity.ZeroOrMany;
line.EndMultiplicity = ERDMultiplicity.OneOnly;
drawingManager.RequestRedraw();