Tutorial: Plan a Project
Tasks, dependencies, critical path and Gantt
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
- Project management family — resources, budget, risk and issue nodes
- Keyboard and mouse — arrange and align the plan quickly
- Workflow engine — drive task states from automation