Quick Start Tutorial

Creating a Diagram

Start with a DrawingManager. It owns the components, connections, selection and viewport. You draw it onto any SKCanvas — an SKSurface here, or the surface supplied by a host control:

using Beep.Skia;
using Beep.Skia.Flowchart;
using SkiaSharp;

using var surface = SKSurface.Create(new SKImageInfo(1200, 800));
var canvas = surface.Canvas;
canvas.Clear(SKColors.White);

var drawingManager = new DrawingManager
{
    ShowGrid = true,
    GridSpacing = 20,
    SnapToGrid = true
};

ShowGrid, GridSpacing and SnapToGrid control the alignment grid. The drawing manager owns the viewport transformation, so zooming and panning are handled for you.

Adding Components

Beep.Skia ships 293 component types across 16 diagram families. Flowchart nodes derive from FlowchartControl: use ProcessNode for steps and DecisionNode for branches. Every component exposes X, Y, Width and Height; flowchart nodes add Label, CustomFillColor and CustomStrokeColor:

var startNode = new ProcessNode
{
    Label = "Start",
    X = 200, Y = 100, Width = 140, Height = 60,
    CustomFillColor = SKColors.LightGreen,
    CustomStrokeColor = SKColors.DarkGreen
};
drawingManager.AddComponent(startNode);

var inputNode = new ProcessNode
{
    Label = "Receive Order",
    X = 200, Y = 220, Width = 160, Height = 70,
    CustomFillColor = SKColors.LightBlue,
    CustomStrokeColor = SKColors.DarkBlue
};
drawingManager.AddComponent(inputNode);

var processNode = new ProcessNode
{
    Label = "Validate Order",
    X = 200, Y = 350, Width = 170, Height = 70,
    CustomFillColor = SKColors.LightYellow,
    CustomStrokeColor = SKColors.DarkGoldenrod
};
drawingManager.AddComponent(processNode);

var decisionNode = new DecisionNode
{
    Label = "Valid?",
    X = 200, Y = 480, Width = 130, Height = 80
};
drawingManager.AddComponent(decisionNode);

var endNode = new ProcessNode
{
    Label = "End",
    X = 200, Y = 620, Width = 140, Height = 60,
    CustomFillColor = SKColors.LightCoral,
    CustomStrokeColor = SKColors.DarkRed
};
drawingManager.AddComponent(endNode);

Connecting Nodes

ConnectComponents links two components and creates the ConnectionLine with automatically assigned ports. Enumerate the lines with GetLines() to style them; color, stroke width, arrowheads, labels and routing mode are all configurable:

var errorNode = new ProcessNode
{
    Label = "Report Error",
    X = 500, Y = 500, Width = 150, Height = 60,
    CustomFillColor = SKColors.LightPink,
    CustomStrokeColor = SKColors.DarkRed
};
drawingManager.AddComponent(errorNode);

drawingManager.ConnectComponents(startNode, inputNode);
drawingManager.ConnectComponents(inputNode, processNode);
drawingManager.ConnectComponents(processNode, decisionNode);
drawingManager.ConnectComponents(decisionNode, endNode);
drawingManager.ConnectComponents(decisionNode, errorNode);

foreach (var line in drawingManager.GetLines())
{
    line.LineColor = SKColors.Gray;
    line.Paint.StrokeWidth = 2;
    line.ShowEndArrow = true;
    line.RoutingMode = LineRoutingMode.Orthogonal;
}

var yes = drawingManager.GetLines()
    .First(l => l.Start.Component == decisionNode && l.End.Component == endNode);
yes.LineColor = SKColors.Green;
yes.Label1 = "Yes";

var no = drawingManager.GetLines()
    .First(l => l.Start.Component == decisionNode && l.End.Component == errorNode);
no.LineColor = SKColors.Red;
no.Label1 = "No";

drawingManager.RequestRedraw();

Routing modes are Straight, Orthogonal and Curved. Orthogonal produces clean right-angle paths suitable for flowchart diagrams.

Running the Application

On Windows, the flagship SkiaHostControl already wires the canvas, input handling, palette, property grid, zoom and export together. Drop it on a form and talk to its DrawingManager:

using Beep.Skia.Flowchart;
using Beep.Skia.Winform.Controls;
using SkiaSharp;

public class DiagramForm : Form
{
    private readonly SkiaHostControl _host = new() { Dock = DockStyle.Fill };

    public DiagramForm()
    {
        Text = "Beep.Skia FlowChart Demo";
        Size = new Size(1200, 800);
        Controls.Add(_host);
        BuildDiagram();
    }

    private void BuildDiagram()
    {
        var manager = _host.DrawingManager;

        var start = new ProcessNode
        {
            Label = "Start",
            X = 200, Y = 100, Width = 140, Height = 60,
            CustomFillColor = SKColors.LightGreen,
            CustomStrokeColor = SKColors.DarkGreen
        };
        manager.AddComponent(start);

        var receive = new ProcessNode
        {
            Label = "Receive Order",
            X = 200, Y = 220, Width = 160, Height = 70,
            CustomFillColor = SKColors.LightBlue,
            CustomStrokeColor = SKColors.DarkBlue
        };
        manager.AddComponent(receive);

        var decision = new DecisionNode
        {
            Label = "Valid?",
            X = 200, Y = 350, Width = 130, Height = 80
        };
        manager.AddComponent(decision);

        var error = new ProcessNode
        {
            Label = "Report Error",
            X = 500, Y = 350, Width = 150, Height = 60,
            CustomFillColor = SKColors.LightPink,
            CustomStrokeColor = SKColors.DarkRed
        };
        manager.AddComponent(error);

        manager.ConnectComponents(receive, decision);
        manager.ConnectComponents(decision, error);

        var decisionLine = manager.GetLines()
            .First(l => l.Start.Component == decision);
        decisionLine.LineColor = SKColors.Red;
        decisionLine.Label1 = "No";
        decisionLine.RoutingMode = LineRoutingMode.Orthogonal;

        manager.RequestRedraw();
    }

    [STAThread]
    public static void Main()
    {
        ApplicationConfiguration.Initialize();
        Application.Run(new DiagramForm());
    }
}

Run the project and the host gives you drag-and-drop placement, selection, a component palette, a property grid, zoom/pan and export (ExportToPng, ExportToSvg, ExportToPdf). To persist a diagram, serialize manager.ToDto() with System.Text.Json and restore it with manager.LoadFromDto(dto).

Next Steps

Now that you have built your first diagram, explore the broader capabilities of Beep.Skia:

• Explore Diagram Families — 16 families including UML, network topology, ERD, BPMN and org charts
• Custom Styling — Apply Material Design 3.0 themes or set CustomFillColor / CustomStrokeColor per node
• Serialization — Persist diagrams with DrawingManager.ToDto() / LoadFromDto() and System.Text.Json
• Workflow Automation — Run the diagram as a workflow with the workflow engine
• Undo/Redo — Full edit history through HistoryManager
• Custom Nodes — Extend SkiaComponent to create domain-specific node types and editors

For architectural details, read the Architecture Overview.