Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What options are available for the layout of directed or undirected graphs in .NET?

By graph here I mean something resembling these images:

The ideal solution would:

  • use only managed code
  • allow output to a bitmap image
  • allow output to WPF elements
  • include some kind of interactive surface for displaying the graph that supports zooming, panning and reorganisation of nodes

I'm also interested in hearing about projects that could potentially be used as the starting point for this kind of work. If it requires some development to achieve what I want, then I'm prepared to tackle it. The most complex portion of this goal seems to be obtaining the graph layout in a reasonable time frame.

like image 655
Drew Noakes Avatar asked Feb 26 '09 10:02

Drew Noakes


People also ask

What is directed and undirected graph in data structure?

Undirected graphs have edges that do not have a direction. The edges indicate a two-way relationship, in that each edge can be traversed in both directions. This figure shows a simple undirected graph with three nodes and three edges. Directed graphs have edges with direction.

What is the layout of a graph?

Layout of a graph Graph layout is used in graphical user interfaces of applications that need to display graph models. To lay out a graph means to draw the graph so that an appropriate, readable representation is produced. Essentially, it involves determining the location of the nodes and the shape of the links.

How do you create a directed graph in Python?

Add the nodes from any container (a list, dict, set or even the lines from a file or the nodes from another graph). In addition to strings and integers any hashable Python object (except None) can represent a node, e.g. a customized node object, or even another Graph. Edges: G can also be grown by adding edges.

What is a directed graph in data structure?

A directed graph is graph, i.e., a set of objects (called vertices or nodes) that are connected together, where all the edges are directed from one vertex to another. A directed graph is sometimes called a digraph or a directed network.


9 Answers

Use QuickGraph to output Dot files for GraphViz. I did that in a recent project, and it seems to work quite well. Look here for sample code for parsing .plain files, or use my project here as a reference for just outputing .png images.

like image 166
Jamie Penney Avatar answered Oct 04 '22 15:10

Jamie Penney


Microsoft Research provides a tool called MSAGL (Automatic Graph Layout, previously called GLEE) for .NET.

MSAGL is available here: http://research.microsoft.com/en-us/downloads/f1303e46-965f-401a-87c3-34e1331d32c5/default.aspx

Disclaimer: I haven't used the tool so I don't know whether it is suitable for you (and neither do I know about the licensing conditions, seems it is for non-commercial applications only). But at least it looks interesting.

like image 29
Dirk Vollmar Avatar answered Oct 04 '22 17:10

Dirk Vollmar


I am working in the NDepend team and I confirm: we switched from GraphViz to MsAgl in september 2008 and also the MsAgl license allows indeed commercial utilisation. Here are a few sample pictures of MsAgl graphs integrated in NDepend (everything is interactive, nodes are movable/selectable/removable/clickable, edges are editable/selectable/removable/clickable, the layout is zoomable, and also, while it could be cleaner the MsAgl API is clean enough to work with):

enter image description hereenter image description hereenter image description here

like image 20
Patrick from NDepend team Avatar answered Oct 04 '22 17:10

Patrick from NDepend team


Graphviz is still today, in my opinion, one of the best graph library there is. However, integrating it to .Net is a pain.

It is possible to call the command line tool to generate a shape output based on your graph input, then you read the output and lay the elements on a custom control that displays whatever shapes graphviz has calculated. It's very hacky but it's the best way our team have found of integrating graphviz with .Net a few years ago.

A better solution might exist today; at that time GLEE was still very embrionic and I haven't seen the progress Microsoft did since that time.

like image 45
Coincoin Avatar answered Oct 04 '22 15:10

Coincoin


I have used NodeXL, http://www.codeplex.com/NodeXL, which is a .Net 3.5 library (but also an Excel add-on). NodeXl is developed by Microsoft Research and pretty neat: it has visualization algorithms and some metrics but it is still in its early stages of development. If you have are a seasoned .Net developer then I would definitely take a look at it.

However, if you know Python then I would definitely recommend Networkx and its cousin pygraphviz which is an interface to Graphviz. I have used both and my productivity with Python / Networkx is way higher then when I was using NodeXL.

GLEE is Microsoft's closed source library that you only can use for free in non-commercial software while NodeXL is Microsoft's way of open source but you can use it freely in a product you develop.

like image 27
DrDee Avatar answered Oct 04 '22 17:10

DrDee


Just to make the list of options complete: Graphviz4Net is open-source implementation of what Coincoin has suggested in his answer.

like image 43
Steves Avatar answered Oct 04 '22 15:10

Steves


The boys at Mindscape have such a tool

With the imaginative name WPF Flow Diagrams

Also, check out Vertigo's Family.Show demo project, it has a simple form of this

like image 26
TFD Avatar answered Oct 04 '22 16:10

TFD


I have used MsAgl and it is pretty good. It also has viewers for both WinForms and WPF which may or may not be important to you. One does not have to use the viewers as they are quite loosely coupled to the graph layout engine.

It does not support everything that Graphviz does (notably in terms of some shape types). Also the documentation could be better but it is pretty solid if not the most polished MS product ever.

It does tick all of the items you mention as requirements, though the "on viewer" re-organization merely supports drag-moving nodes, re-routing edges and re-positioning labels. The graph does not respond to the movements of these elements by repositioning any other items.

like image 31
Raoul Avatar answered Oct 04 '22 17:10

Raoul


I have used this http://www.codeproject.com/Articles/484616/MVVM-Diagram-Designer it's an open source one, really easy to use. the code is explained really well.

like image 29
Gilad Avatar answered Oct 04 '22 16:10

Gilad