example-shot.png

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.

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

If you are brave enough (1) to build the latest version from source control, we suggest you do so, because Graphviz4Net is evolving and you might be missing great features if you use the released version.

(1) no bravery required actually, just Visual Studio 2010 or MSBuild, all dependencies are in the repository.

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.

Note on coding style: the intention is to follow reasonable rules from StyleCop, that is naming rules, members' order rules, spaces between arithmetic operators, spaces instead of tabs, curly brackets, method's arguments on separate lines, if the line would be too long etc., but not mandatory API documentation for every member, for example.

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 sample
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

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

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

Last edited Aug 30, 2012 at 6:24 PM by stevesindelar, version 44