Awesome

GoDiagram — .NET Library for Interactive Diagrams

GoDiagram is a .NET library for creating interactive diagrams, charts, and graphs. It is based on the GoJS JavaScript diagramming library, also from Northwoods Software.

Get Started with GoDiagram

GoDiagram is a flexible library that can be used to create a number of different kinds of interactive diagrams, including data visualizations, drawing tools, and graph editors. GoDiagram includes a number of built in layouts including tree layout, force directed, radial, and layered digraph layout, and a number of custom layout examples.

Read more about GoDiagram at godiagram.com.

This repository contains the sources for all samples and extensions. You can use the GitHub repository to quickly search through the sample sources.

In your project, we recommend referencing the library via NuGet as it will more reliably add toolbox items and necessary references:

Minimal Sample

Graphs are constructed by creating one or more templates, with desired properties data-bound, and adding model data.

  ...

  private void Setup() {
    _Diagram = diagramControl1.Diagram;

    _Diagram.UndoManager.IsEnabled = true;  // enable undo & redo

    // define a simple Node template
    _Diagram.NodeTemplate =
      new Node("Auto")  // the Shape will go around the TextBlock
        .Add(
          new Shape("RoundedRectangle") {
              StrokeWidth = 0,  // no border
              Fill = "white"  // default fill is white
            }
            // Shape.Fill is bound to Node.Data.Color
            .Bind("Fill", "Color"),
          new TextBlock {
              Margin = 8, // some room around the text
              Font = new Font("Segoe UI", 14, FontWeight.Bold),
              Stroke = "#333"
            }
            // TextBlock.Text is bound to Node.Data.Key
            .Bind("Text", "Key")
        );

    // but use the default Link template, by not setting Diagram.LinkTemplate

    // create the model data that will be represented by Nodes and Links
    _Diagram.Model = new Model {
      NodeDataSource = new List<NodeData> {
        new NodeData { Key = "Alpha", Color = "lightblue" },
        new NodeData { Key = "Beta", Color = "orange" },
        new NodeData { Key = "Gamma", Color = "lightgreen" },
        new NodeData { Key = "Delta", Color = "pink" }
      },
      LinkDataSource = new List<LinkData> {
        new LinkData { From = "Alpha", To = "Beta" },
        new LinkData { From = "Alpha", To = "Gamma" },
        new LinkData { From = "Beta", To = "Beta" },
        new LinkData { From = "Gamma", To = "Delta" },
        new LinkData { From = "Delta", To = "Alpha" }
      }
    };
  }

  // define the model data
  public class Model : GraphLinksModel<NodeData, string, object, LinkData, string, string> { }
  public class NodeData : Model.NodeData {
    public string Color { get; set; }
  }
  public class LinkData : Model.LinkData { }

  ...

The above diagram and model code creates the following graph.

minimal

License

See nwoods.com for our licenses.