Generate Drag and Drop Status Diagram

Question

I would like to create a state diagram, for example, as shown in the figure below.

I want to make this user friendly. If any user wants such a diagram, he can simply drag / drop circles / arrows and link them and put a description (1,2,3 ..... a, b, c ....), etc. It must be web .

I am not sure if there is an openource / free library for this.

How to create such a chart online?

Any idea / suggestions are welcome.

Thanks.

Answer 1

As far as I know, there is no openource / free library that does this.

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

You will have to write everything yourself, although something like RaphealJS or jQuery SVG can do some of the hard work for you regarding chart rendering.

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

Answer 2

I searched for something along the same lines and found: JointJS . This looks very promising for your purposes. Examples will help you get started.

Answer 3

The final machine designer can be used to create diagrams like this in a push / drag / drop question.

It is also open source if you need to expand it.

Answer 4

Check out my State Machine Diagram Editor website. There is also a more convenient desktop version.