Graphviz4Net

Project Description
Graphviz4Net provides WPF control that is capable of generating "nice looking" graph layouts with sub-graphs, curved edges with arrows, edges between sub-graphs and more. Nodes, edges and all other elements in the graph are fully customizable and can contain any other WPF controls (e.g., click-able buttons). Besides this WPF control, Graphviz4Net also provides .NET API for generating input and consuming the output of the Graphviz command line tool. We are also working on a Silverlight support, preview of it is already in the VCS.

Installation
Graphviz4Net depends on command line tool called 'dot' that is part of the Graphviz project (http://www.graphviz.org/). Installation of Graphviz under Windows is pretty straightforward.

Usage
The preview release contains an example of the usage of the WPF control, which is quite easy. The documentation for the Graphviz to .NET API is under construction. In the meantime one can use the documentation comments in the source code.

Future Work & Contribution
Possible enhancements: The WPF control could be portable to Silverlight with only a few changes to the source code. Implementation of LayoutBuilder for other GUI platforms than WPF, for instance, Windows Forms, Gtk#, HTML and CSS (with ASP.NET control), ... If you want to take part in this project, send me an e-mail, or just make a fork.

Fell free to leave us any feedback or suggestions in Discussions section. It will be appreciated.

Alternatives to Graphviz4Net
Graph# - graph layout framework with support for WPF. Graph# uses custom algorithms hence it does not depend on Graphviz, but at the moment it does not support curved edges and sub-graphs.
graphviznet - GraphViz .NET wrapper. It provides more advanced and complete API to GraphViz, but actual visualization of the result generated by GraphViz is left to users of this library.
Dot2Silverlight - similar project that provides Silverlight control. However, it does not support sub-graphs.

CODE:
var graph = new Graph<Person>();
var a = new Person { Name = "Jonh", Avatar = "./Avatars/avatar1.jpg" };
var b = new Person { Name = "Michael", Avatar = "./Avatars/avatar2.gif" };
graph.AddVertex(a);
graph.AddVertex(b);
graph.AddEdge(new Edge<Person>(a, b, new DiamondArrow()) { Label = "Boss" });

XAML:
<Window.Resources>
  <DataTemplate DataType="{x:Type Example:Person}">
    <Border BorderBrush="Black" BorderThickness="1" Padding="0" CornerRadius="5">
      <StackPanel Orientation="Horizontal">
        <Image Source="{Binding Avatar}" Width="32" Height="32" Margin="5" VerticalAlignment="Top"/>
        <StackPanel Orientation="Vertical" Margin="2">
          <TextBlock Text="{Binding Name}"/>
          <!-- ... -->
  </DataTemplate>
  
  <DataTemplate DataType="{x:Type Example:DiamondArrow}">
    <Canvas Width="6" Height="11">
      <Polygon Points="3,0 6,5 3,10 0,5" Stroke="Black" StrokeThickness="1" Fill="Black"/>
    </Canvas>
  </DataTemplate>

  <DataTemplate DataType="{x:Type ViewModels:EdgeViewModel}">
    <Path Data="{Binding Data}" Stroke="Black" StrokeThickness="1"/>
  </DataTemplate>
</Window.Resources>

<WPF:GraphLayout Graph="{Binding Graph}"/>

DOT PARSING:
var graph = AntlrParserAdapter<string>.GetParser().Parse("digraph { ... }");
Console.WriteLine(graph.Vertices.First().Position);

For more information on how to use Graphviz4Net see the documentation.

Additional Screenshots


Graphviz4Net was used in Patters4Net project to generate interactive UML-like class diagrams that stress design patterns.


This is a screen shot of new version of demo available in the latest release.