Diagram

Description

A flow-chart surface with draggable nodes and auto-routed arrows

Diagram is a pannable dotted canvas holding boxes you connect with Connect(from, to). The arrows are computed and drawn on a background canvas, so they follow the nodes as they are dragged. AutoArrange() positions the nodes from their sizes and how they are connected, which is usually enough for a graph you did not lay out by hand.

Nodes are created with DiagramNode(text) and carry Background, Foreground and Text. Nodes(params) replaces the set, Add / Remove / Clear change it afterwards.

DotSpacing(pixels) sets how dense the background grid is and NoDots() removes it entirely. NotDraggable() pins the nodes where they are, for a diagram meant to be read rather than rearranged.

Sample

A small pipeline

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var ingest    = DiagramNode("Ingest");
            var enrich    = DiagramNode("Enrich");
            var index     = DiagramNode("Index");
            var search    = DiagramNode("Search");

            enrich.Background = Theme.Colors.Blue500;
            enrich.Foreground = Theme.Colors.White;

            var component = Diagram()
               .Nodes(ingest, enrich, index, search)
               .Connect(ingest, enrich)
               .Connect(enrich, index)
               .Connect(index,  search)
               .AutoArrange();

            document.body.style.overflow = "hidden";
            MountToBody(component.WS().H(100.percent()));
        }
    }
}

API reference

public partial class Diagram : IComponent, ISpecialCaseStyling

public Diagram()

public HTMLElement StylingContainer

public bool PropagateToStackItemParent

public Diagram Nodes(params Node[] nodes)

public Diagram Add(Node node)

public Diagram Remove(Node node)

public Diagram Clear()

public Diagram Connect(Node from, Node to)

public Diagram DotSpacing(int pixels)

public Diagram NoDots()

public Diagram NotDraggable()

public Diagram AutoArrange()

public HTMLElement Render()

private void RunAutoArrange()

public partial class Diagram

See also

• Workflow diagrams in docs — the static, Markdown-authored equivalent.
• Task Board — draggable cards in columns, when the layout is a board rather than a graph.
• Components overview