how do i create a weka type interface

Question

I am very new in web-ui design. I mostly work on machine learning aspects.. One of the tools which I use a lot is weka. http://decisiontrees.net/wp-content/uploads/2012/03/weka.png

So.. basically.. here you create a pipe flow but with intermediate steps.

And then you connect intermediate steps thru arrows..

And then you press start...

And it executes that series of steps.

As an exercise.. I am just trying to put up an interface...which does something like this

[Process A] [Process B] [Process C] Process D] [Process E].....and so on

I click on Process A button above and then there is this "workarea' where when i click again.. it shows up Process A.. then I click on Process B and click it again on this workarea and [Process B] shows up.. and then I connect Process A with Process B..

and on.

[Process A ] -- > [Process B] --> [Process C]

       [Start]

When I press start..

I want to just have an alert (like " I reached Process A".. " I reached process B" ??)

Any suggestions..

I am not able to articulate well (hence having trouble googling as well).. but hopefully that image link will try to give you an idea.

Thanks

Answer 1

Made some research:

These ones look neat (with nice demos):

http://www.jgraph.com/

http://thejit.org/

http://jsplumb.org/ -> this one has an impressive interactive state machina demo. Maybe suits what you want.

Found there:

JavaScript flowchart / flow diagram lib