You will build: a small project plan, compute the critical path, and add a Gantt timeline. Time: about 15 minutes. Prerequisites: Beep.Skia and Beep.Skia.PM.

1. Tasks with durations

Each TaskNode carries its duration and scheduling data; the calculators read them straight from the canvas.

using Beep.Skia;
using Beep.Skia.PM;

var manager = new DrawingManager();

var design = new TaskNode { X = 60, Y = 60, Width = 180, Height = 60, Label = "Design", Duration = 5 };
var build = new TaskNode { X = 300, Y = 60, Width = 180, Height = 60, Label = "Build", Duration = 10 };
var test = new TaskNode { X = 540, Y = 60, Width = 180, Height = 60, Label = "Test", Duration = 6 };
var launch = new MilestoneNode { X = 780, Y = 60, Width = 140, Height = 60, Label = "Launch" };

foreach (var node in new SkiaComponent[] { design, build, test, launch })
    manager.AddComponent(node);

2. Dependencies

manager.ConnectComponents(design, build);
manager.ConnectComponents(build, test);
manager.ConnectComponents(test, launch);

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

3. Critical path

The calculator walks the dependency graph and reports the project duration plus the tasks with no slack.

var calculator = new CriticalPathCalculator();
var schedule = calculator.Compute(manager.GetComponents(), manager.GetLines());

Console.WriteLine($"Project duration: {schedule.ProjectDuration} days");
foreach (var task in schedule.CriticalTasks)
    Console.WriteLine($"critical: {task.Label}");

4. Gantt timeline

Drop a Gantt node on the canvas and it lays out one row per task with the critical path highlighted.

var gantt = new GanttTimelineNode { X = 60, Y = 220, Width = 860, Height = 260 };
manager.AddComponent(gantt);
gantt.Build(manager.GetComponents().OfType<TaskNode>());
manager.RequestRedraw();

Next steps