Flowchart for the Web [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.

Closed 7 years ago.

Improve this question

I am perfectly aware that "SO is not a place to ask for a tool" so I did my own search and did find a few tools, but, since I need a few specific features - I do believe that combined expertise and experience of SO users could be very useful to what I am looking for. Which is: a library to be able to build/display on a Web page a flow chart similar to this:

As I mentioned I've seen jsPlumb and a few others, but it takes too much time to research individual features of each, so I hope someone who has experience could suggest the best choice. The features I am looking for:

1. Browser support IE8+, Chrome, FF
2. Ability to add/edit/delete chart items on the fly either visually or programmaticaly
3. Ability to update backend (ASP.NET/SQL Server) with chart data
4. Ability to have flexible connectors (like from Button 3 to State 1 in the example above)
5. Ability to load chart data and have items auto-arrange into default/optimal layout
6. Possible library to have a non-free/commercial option (this is a stupid one, but this is what the business side is asking for, they're wary of free products)

I'll possible get quite a few downvotes for this question, but I am willing to chance it, hoping that someone could suggest a good flowcharting library that fits my needs.

Answer 1

As naughty as your question is, mxGraph is the only diagramming library with full IE8- support (down to IE 6). And that's with full functionality, try draw.io on IE 8.

1) Yes, and Opera, Safari, iOS 5+, Android 4+, Windows 8 touch, ChromeOS. 2) Yes 3) We have a full graph model implementation on the server in .NET, it's easier to integrate that a JavaScript only solution. 4) Yes 5) Yes 6) Yes

And yes, I work on the product.

Answer 2

Let's see how yFiles for HTML compares:

1. Browser support IE9+, Chrome, FF, (and more) (IE8 is a no-go, since HTML-5 is required and IE8 simply does not support that level, neither on the visualization, nor on the Javascript level).
2. There is a very rich API that can be used to programmatically change any aspect of the model and view. The default editing capabilities allow for all standard edit operations, custom ones can easily be added.
3. yFiles for HTML 1.1 comes as a pure client side application, so currently server connectivity needs to be added by the programmer. Since the library is server-agnostic it can be made to work with any server technology - samples included in the package.
4. Flexible connectors are in fact the default: Any number of bends and labels can be added to connectors, which connect to two ports. Both types of items can be configured and customized to a very high degree.
5. An outstanding feature of the library are the versatile automatic layout algorithms. In general it is not possible to get "optimal" layouts, but the (heuristic, at least most of them) algorithms are considered "best-of-breed".
6. The library is a commercial library, only.

Whether the library actually fits your needs depends on a lot of factors. Unless (1) is a blocker for you, I think yFiles might be a good candidate. You can try it by evaluating it from its homepage.

I recreated your sample in the online editor and used the following simple code configuration to create an automatic layout:

var ihl = new yfiles.hierarchic.IncrementalHierarchicLayouter()
ihl.automaticEdgeGrouping = true
ihl.backloopRouting = true
ihl.layoutOrientation = yfiles.layout.LayoutOrientation.LEFT_TO_RIGHT
ihl.integratedEdgeLabeling = true

// animate and apply the layout
graphControl.morphLayout(ihl, yfiles.system.TimeSpan.fromSeconds(1), null)

This is what I got:

Note: You did not ask for a plugin-free solution, but I answered your question as if you did. If plugins like Flash, Silverlight, or Applets are acceptable, then the sibling yFiles products for the respective platforms might also be an option. They work on all browsers that support those plugins, so even the oldest IE versions are supported.

Disclaimer: I work for the company who creates that library, however I do not represent my employer here at SO/SE. My thoughts, comments, and posts are my own.

Answer 3

GenMyModel is now supporting flowchart diagramming:

You could view and fork this sample here