How to easily draw graphs in WPF?

Question

I need to draw graphs representing finite state machines. I tried to use Graph#. It's cool, but it lacks some things. There is no documentation, which makes it very difficult to use, I cannot draw loops (edges from a vertex to itself) using its custom WPF control and labeling edges is also not implemented. Is there any other library o adviced way of drawing graphs in WPF?

Functionality I need:

edge labeling
loop (cyclic) edges
vertex labeling
drawing single/double circles around vertices - vertices should be represented either as circle (or double circle) with a label inside

Any ideas?

EDIT:

I got some propositions, for which I am grateful. However, I think I have not made my thought clear. I need this kind of graph:

All tools suggested as far are not suitable for this or maybe I don't know how to apply them in this situation.

Try Dynamic Data Display - it definitely has loop functionality http://dynamicdatadisplay.codeplex.com/ — Rachel Gallen, May 10 '13 at 10:11
there are some other options here http://stackoverflow.com/questions/545513/what-is-the-best-way-to-make-a-graph-in-wpf-or-in-general-that-would-apply-to — Rachel Gallen, May 10 '13 at 10:13
@RachelGallen Could you tell me how to draw graphs of edge-connected vertices using Dynamic Data Display? The documentation is poor and I can't tell from the tutorials how to do this kind of stuff. Silverlight version doesn't work for me, the WPF one - I don't know how to use. — pmichna, May 15 '13 at 17:15

score 78 · Answer 1 · edited Jun 20 '20 at 09:12

Option 1: Microsoft Automatic Graph Layout

Free

http://research.microsoft.com/en-us/projects/msagl/

GitHub

https://github.com/Microsoft/automatic-graph-layout.git

Winforms >> WPF

It's WinForms, but it can be imported into WPF with a few lines of code.

Option 2: QuickGraph - A 100% C# graph library with Graphviz Support

Free

http://quickgraph.codeplex.com/

This library is 100% C#. Don't be misled by the line "Graphviz Support", this means that it uses C# code to import the output from Graphviz. No C++ code in sight.

http://www.codeproject.com/Articles/5603/QuickGraph-A-C-graph-library-with-Graphviz-Sup

Has a NuGet package.

Under development from 2003 to 2011 (8 years!!).

Option 3: GraphSharp

Free

http://graphsharp.codeplex.com/

Depends on QuickGraph (which is 100% C#).
Supports async/await (nice!).

Demo

https://sachabarbs.wordpress.com/2010/08/31/pretty-cool-graphs-in-wpf/

Notes

This one worked really well, was up and running in a couple of hours. It also supports DataTemplates, so each node can have any look and feel that you want.

Option 4: Graphviz4net

Free

http://graphviz4net.codeplex.com/

Option 5: GoDiagram

$$$

http://www.nwoods.com/products/godiagram/index.html

Option 6: A Graph Tree Drawing Control for WPF

Free

http://www.codeproject.com/Articles/29518/A-Graph-Tree-Drawing-Control-for-WPF

No suitable. It's a tree layout.

Option 7: Using WPF to Visualize a Graph with Circular Dependencies

Free

http://www.codeproject.com/Articles/43776/Using-WPF-to-Visualize-a-Graph-with-Circular-Depen

Option 8: GraphViz

Free

http://www.graphviz.org/Download..php

This is not C#, and uses non-managed code. There are C# wrappers for it, however.

Opensourced by AT&T, see "AT&T Researchers — Inventing the Science Behind the Service", and "research home > portfolio > software tools": http://www.research.att.com/software_tools?fbid=NEk8_gxLLEc

Source

http://www.graphviz.org/Download_source.php

They also open sourced Rserve!

Option 9: Shields.GraphViz

Free

Wrapper for GraphViz.

https://github.com/timothy-shields/graphviz

Option 10: NetworkView: A WPF custom control for visualizing and editing networks, graphs and flow-charts

Free

http://www.codeproject.com/Articles/182683/NetworkView-A-WPF-custom-control-for-visualizing-a

This library allows the user to create connections between nodes, which is probably a bit of an overkill.

Example

https://channel9.msdn.com/coding4fun/blog/Noodling-Network-Nodes-Diagraming-with-the-NetworkView-custom-WPF-control

It's all MVVM.

Option 11: Gephi - The Open Graph Viz Platform

Free

See http://gephi.github.io/

Not a WPF graphing library, but provides great examples of how really nice graphs can look. The tutorial is excellent.

Option 12: Telerik

$$$

http://www.telerik.com/products/wpf/diagrams.aspx

Option 13: Infragistics

$$$

http://www.infragistics.com/samples/wpf/network-node/overview http://www.infragistics.com/samples/wpf/network-node/relationship-between-nodes http://www.infragistics.com/samples/wpf/network-node/custom-node-style

Option 14: WPF Diagram Designer

Free

Not so much graphing tool, but it does show you how to move, resize and rotate objects of any type on a canvas.

http://www.codeproject.com/Articles/22952/WPF-Diagram-Designer-Part-1

Option 15: MVVM Diagram Designer

Free

And, somebody reimplemented this in MVVM: Not so much graphing tool, but it does show you how to move, resize and rotate objects of any type on a canvas.

http://www.codeproject.com/Articles/484616/MVVM-Diagram-Designer

Option 16: yWorks - The Diagramming company

$$$

https://www.yworks.com/en/products_yfiles_practicalinfo_gallery.html https://www.yworks.com/en/products_yfileswpf_about.html

Option 17: MindFusion

$$$

http://www.mindfusion.eu/features-wpfdiagram.html http://www.mindfusion.eu/

Option 18: Dot2WPF

Free

A WPF control for viewing DOT graphs.

http://www.codeproject.com/Articles/18870/Dot-WPF-a-WPF-control-for-viewing-Dot-graphs

Option 19: SyncFusion

$$$

https://www.syncfusion.com/products/wpf/diagram

Option 20: AddFlow

$$$

https://www.componentsource.com/product/addflow-wpf-standard

Option 21: Lassalle

$$$

http://www.lassalle.com/

Option 22: Dynamic Data Display

http://dynamicdatadisplay.codeplex.com/

Option 23: Nevron

$$$

https://www.nevron.com/

Only for WinForms, but can be imported into WPF. However, each individual item cannot be templated, which is a big advantage of WPF solutions.

Google Search Terms

"workflow wpf graphing"
"wpf graphing library"
"wpf state machine library"

score 9 · Accepted Answer · answered Jun 18 '13 at 14:18

9

Graphviz + GraphViz C# Wrapper are exactly what I was looking for.

answered Jun 18 '13 at 14:18

pmichna

4,800
13
53
90

Alexander Smirnov · Answer 3 · 2013-11-14T19:44:55.583

5

I think you can easily implement all of your requirements with GraphX library for WPF. It is based on Graph# and have detailed docs. http://panthernet.ru/en/projects-en/graphx-en

It supports edge labeleing and self-looped edges along with the edge and vertex templates. If you have any questions you can ask in the Discussions section on the site.

edited Nov 14 '13 at 19:44

answered Jun 18 '13 at 10:11

Alexander Smirnov

1,573
12
23

I think I'll choise your project, thank you for making free version of it. Спасибо. – Aberro Mar 15 '19 at 14:25
... Or not. It seems that your solution doesn't support multiple (different) connection nodes per vertex, which is, sadly, quite crucial for me. – Aberro Mar 17 '19 at 21:07
Not sure what do you mean, but GraphX supports many connection nodes including static ones. You just have to configure it (see examples app). – Alexander Smirnov Mar 19 '19 at 08:34
I mean connections like in this example: https://www.codeproject.com/Articles/182683/NetworkView-A-WPF-custom-control-for-visualizing-a Besides, I need strong MVVM support, but, AFAIK, in your project I've seen that this pattern is at least partly violated. Overall, I think that NetworkView from link above is better suited for my needs out of the box. – Aberro Mar 19 '19 at 14:29

score 4 · Answer 4 · edited May 23 '17 at 12:18

In a similar question on bipartite graphs which you can read here I got the recommendation on NetworkView

It has loops, vertex labeling, a custom vertex visualisation that you can easily edit to be circles. Think it has no edge labelling, though. Just give it a try.

At least it is a very good start if you decide to do it on your own.

You probably want to have a look on the Codeproject article "Visualize a graph with circular dependencies"

score 4 · Answer 5 · answered Jun 18 '13 at 11:59

If this is in a commercial scenario, you should also take a look at yWorks' yFiles.

It has all the features you are looking for and its most outstanding feature is the capability to automatically arrange your diagrams. If you have a bigger state machine or even create the state-machine in code, this will help you clearly arrange even large diagrams automatically. Also for the labels there are automatic label placement algorithms, which find placements for the labels so that they do not overlap with each other or with other unrelated elements.

You can see the library live in action in this Youtube Video, but you can also play immediately with the Silverlight live demos online or just evaluate the library and play with the sample sources.

Disclaimer: I works for yWorks, but on SO I do not represent my employer.

score 2 · Answer 6 · edited Jun 20 '20 at 09:12

2

Here are some options:

VisiFire
Silverlight Chart Controls running on WPF
WPF Toolkit
Telerik

I hope you find what you need. The ones who cost money also have a free trail available. You can get some pretty nice results with telerik or visifire!

edited Jun 20 '20 at 09:12

Community

1
1

answered May 10 '13 at 14:47

Chris

3,329
1
30
44

Telerik is really nice. – GodsCrimeScene May 10 '13 at 14:57
Yes it is. Verry fancy controls. Too bad the trail sometimes adds extra text (info) to your page/app. – Chris May 10 '13 at 15:10
1

@Chris Telerik may be nice, but I can't see how I can use this for my project. Which one of these - http://www.telerik.com/help/wpf/radchart-features-chart-types-2d-charts.html - can draw vertices and connect them with edges? I need something like this: http://static.max99x.com/school/automata-editor1.png. – pmichna May 15 '13 at 17:53
This is what networkview does already. Please have a look on my answer – Mare Infinitus May 15 '13 at 19:54
2

-1 The question was about graphs, no charts; it shouldn't be the top answer. – Zarat Sep 19 '14 at 13:24
You should revisit the english language before downgrading someone's post. You grammar nazi! http://en.wikipedia.org/wiki/Wikipedia:Graphs_and_charts – Chris Sep 19 '14 at 13:35
The downvote has nothing to do with nitpicking the meaning of words. I came across this question when searching for similar functionality as the OP, this answer didn't provide information relevant to the question, so this shouldn't be the top answer. – Zarat Sep 25 '14 at 19:49
My appologies, i did not read the edit on this post. This was not there when i posted this answer. I see your point. – Chris Sep 26 '14 at 08:41

How to easily draw graphs in WPF?

6 Answers6

Option 1: Microsoft Automatic Graph Layout

GitHub

Winforms >> WPF

Visualizing Nodes and Edges with Microsoft Automatic Graph Layout

Examples

FAQ

Option 2: QuickGraph - A 100% C# graph library with Graphviz Support

Option 3: GraphSharp

Demo

Notes

Option 4: Graphviz4net

Option 5: GoDiagram

Option 6: A Graph Tree Drawing Control for WPF

Option 7: Using WPF to Visualize a Graph with Circular Dependencies

Option 8: GraphViz

Source

Option 9: Shields.GraphViz

Option 10: NetworkView: A WPF custom control for visualizing and editing networks, graphs and flow-charts

Example

Option 11: Gephi - The Open Graph Viz Platform

Option 12: Telerik

Option 13: Infragistics

Option 14: WPF Diagram Designer

Option 15: MVVM Diagram Designer

Option 16: yWorks - The Diagramming company

Option 17: MindFusion

Option 18: Dot2WPF

Option 19: SyncFusion

Option 20: AddFlow

Option 21: Lassalle

Option 22: Dynamic Data Display

Option 23: Nevron

Google Search Terms

Linked