FlowChart Diagram Family

Overview

Base Control: FlowchartControl : MaterialControl
Namespace: Beep.Skia.FlowChart

The FlowchartControl is the root control for this diagram family. It inherits MaterialControl and provides shared port management, styling, and template methods for all nodes in the family.

This family contains 36 node types.

Node Types

Connection Points

Every node in this family exposes connection points (ports) for linking to other nodes. Port positions are computed lazily by LayoutPorts(), which runs when MarkPortsDirty() flags the layout as stale after a move or resize.

Connection Conventions

When building diagrams with this family, follow these conventions:

• Top ports are inputs; bottom ports are outputs
• DecisionNode uses Yes (right) and No (bottom) ports
• StartEndNode uses NodeType enum (Start/Stop)
• Flow lines default to orthogonal routing with arrowheads

Usage Example

Complete example showing creation, node placement, and connection:

// Create a FlowChart control
var fc = new FlowchartControl
{
    X = 100, Y = 50,
    Width = 600, Height = 400
};
drawingManager.AddComponent(fc);

// Add nodes
var start = new StartEndNode { X = 250, Y = 60, NodeType = NodeType.Start };
var process = new ProcessNode { X = 250, Y = 130, Text = "Process Data" };
var decision = new DecisionNode { X = 250, Y = 200, Text = "Valid?" };
var stop = new StartEndNode { X = 250, Y = 280, NodeType = NodeType.Stop };

drawingManager.AddComponent(start);
drawingManager.AddComponent(process);
drawingManager.AddComponent(decision);
drawingManager.AddComponent(stop);

// Connect
drawingManager.ConnectComponents(start.OutPoints[0], process.InPoints[0]);
drawingManager.ConnectComponents(process.OutPoints[0], decision.InPoints[0]);
drawingManager.ConnectComponents(decision.OutPoints[0], stop.InPoints[0]);

Code Generation

FlowchartCodeGenerator turns a flowchart into structured code. It walks the graph from the start node and emits nested constructs for loops, decisions and sub-processes:

var generator = new FlowchartCodeGenerator();
string code = generator.Generate(drawingManager, CodeLanguage.CSharp);
File.WriteAllText("generated.cs", code);

Simulation

FlowchartSimulator executes the flowchart step by step without running the workflow engine. It tracks the current node, a step count and a readable trace, and lets the host choose branches at decision nodes:

var simulator = new FlowchartSimulator();
simulator.Reset(drawingManager.GetComponents().ToList(), drawingManager.GetLines());

simulator.BranchSelector = (node, edges) => edges.FirstOrDefault();

simulator.Run(maxSteps: 500);
Console.WriteLine(string.Join(" -> ", simulator.Trace));