html5 javascript workflow diagram generator [closed]

Question

i am looking for a workflow generator in html5 javascript

i have a system that has several status and those status follows a particular workflow that can be altered by the users.

I looking for a simple framework that will generate a visual representation of the workflow

ex :

• from start to process
• from solution to end or from process to end
• finally from solution to end

Answer 1

Please go through mxGraph (www.jgraph.com) , which is HTML5 / JavaScript with fallback for HTML 4 browsers. You can see an example using the technology at www.draw.io

Answer 2

If you are looking for a more sophisticated solution, in a commercial scenario, you might want to consider yFiles for HTML. If your system is very simple, this might be overkill, though, and simpler solutions like jsPlumb may suffice.

The former library supports all kinds of user interaction and customization thereof, as well provides support for easy integration of your own shapes and visual representations.

For workflow visualization specifically, the automatic layout algorithm implementation of the Sugiyama Layout is helpful when a greater number of workflow items need to be arranged automatically:

In the above image, swimlanes have been added, which are very common in more complex workflow diagrams. The algorithm can arrange the shapes, their connections and the swim lanes automatically. You can see this in action in this live sample application

Disclosure: I work for the company that creates said library. On SO I do not represent my employer, my comments, thoughts and posts are my own.

Answer 3

i've tried several workflow, flowchart and diagramming tools.

I found one which i could then make a workflow diagram, load and save data to and from server.

This has almost all the features that can be used to make workflow diagrams:

1) Rich text inside a rectangle.

2) Ability to customise shapes.

3) Ability to add flow-chart symbols and fix back-end code.

4) Works on Android, iOS, HTML5 browsers.

5) Ability to add different kinds of lines to attach to different shapes and objects.

MIT Licensed.

https://code.google.com/p/svg-edit/

Answer 4

here are my two cent.

If you need a GPL and/or commercial version you can use the Draw2d.org lib. It is an SDK rater than a ready to use application. In this case an integration or customization is possible.

• reading/writing JSON
• writing PNG or GIF
• ...