Generate State Diagram Drag/Drop

Question

I would like to generate state diagram, for example as shown in the picture below.

I want to make this user friendly. If any user wants such diagram then he can just drag/drop the circles/arrows and connect them and put description (1,2,3..... a,b,c....) etc. It should be web-based.

I am not sure if there is opensource/free library to do this.

How to generate such diagram interactively ?

Any idea/suggestions are most welcome.

Thank you.

Answer 1

I was looking for something along the same lines and found: JointJS. It looks like very promising for your purposes. The examples should help get you started.

Answer 2

As far as I'm aware there is indeed no opensource/free library that does this.

Some online tools exist, but they mostly use a text-to-image convertion similar to what yUML and Websequencediagrams do.

You'd have to write the whole thing yourself, although something like RaphealJS or jQuery SVG could do some of the heavy lifting for you in regards to rendering the graphs.

You might want to take a look at Canviz and wwwsqldesigner for inspiration.

Answer 3

Finite State Machine Designer can be used to generate diagrams like that in the question with clicking/dragging/dropping.

It's also open source, should you need to extend it.

Answer 4

Have look at my web based State Machine Diagram Editor. A more convenient desktop version also exists.