Tutorial: Draw a Data Flow Diagram

1. Processes, stores and externals

using Beep.Skia;
using Beep.Skia.DFD;

var manager = new DrawingManager();

var customer = new DFDExternalEntityGaneSarson { X = 40, Y = 140, Width = 160, Height = 80, Label = "Customer" };
var order = new DFDProcessGaneSarson { X = 300, Y = 140, Width = 180, Height = 90, Label = "1. Take order" };
var store = new DFDDataStore { X = 580, Y = 150, Width = 180, Height = 70, Label = "D1 Orders" };

foreach (var node in new SkiaComponent[] { customer, order, store })
    manager.AddComponent(node);

2. Flows

manager.ConnectComponents(customer, order);
manager.GetLines().Last().Label1 = "order details";
manager.ConnectComponents(order, store);
manager.GetLines().Last().Label1 = "order record";

foreach (var line in manager.GetLines())
    line.RoutingMode = LineRoutingMode.Orthogonal;

3. Drill down a level

DFDLevelNavigator manages the level stack so the same canvas can show level 0 and the decomposition of a process.

var navigator = new DFDLevelNavigator();
navigator.Enter(manager, order);        // descend into "1. Take order"
// ... build the child level on the canvas ...
navigator.Up(manager);                  // return to the parent level