HTML Workflow designer w/ Drag and Drop

Question

I have a need to build a workflow tool, allowing people to drag nodes onto a canvas, connect outlets of nodes to inputs of other nodes.. Zoom.. (An example I just found looks like the one covered in the 'automation' section here: http://bronto.com/platform/features)

Looking for suggestions on how to get started... Curious if there are frameworks/libraries anyone would recommend to make this easier, or just confirmation that I should just start whipping out Javascript to handle the drags/drops/line drawing/etc.

Answer 1

This question is quite old but in case anybody needs an updated answer, I would definitely give a try to the jQuery opensource project jsPlumb https://github.com/sporritt/jsPlumb.

Answer 2

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

I found one which i could then make a HTML5 workflow diagram with editor, 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.

6) Able to correctly drag and drop elements, lines, shapes and rich text.

7) Able to create your own elements (sticky notes, UML objects, row-lanes, document objects, etc.)

MIT Licensed.

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