Tutorial: Build a Mind Map

1. Root and branches

using Beep.Skia;
using Beep.Skia.MindMap;

var manager = new DrawingManager();

var root = new CentralNode { X = 420, Y = 260, Width = 200, Height = 90, Title = "Product Strategy" };
var marketing = new TopicNode { X = 180, Y = 140, Width = 180, Height = 70, Title = "Marketing" };
var product = new TopicNode { X = 660, Y = 140, Width = 180, Height = 70, Title = "Product" };
var social = new SubTopicNode { X = 40, Y = 60, Width = 160, Height = 60, Title = "Social media" };

foreach (var node in new SkiaComponent[] { root, marketing, product, social })
    manager.AddComponent(node);

2. Connect and lay out

manager.ConnectComponents(root, marketing);
manager.ConnectComponents(root, product);
manager.ConnectComponents(marketing, social);

// Radial auto-layout repositions the graph around the root
var layout = new RadialLayout();
layout.Arrange(manager.GetComponents(), manager.GetLines());
manager.RequestRedraw();

3. Collapse a branch

MindMapVisibility.Apply hides the descendants of collapsed nodes and restores everything else; it returns how many items changed.

marketing.IsCollapsed = true;
int changed = MindMapVisibility.Apply(manager.GetComponents().ToList(), manager.GetLines());
Console.WriteLine($"{changed} node(s)/line(s) changed visibility");
manager.RequestRedraw();