Generar diagrama de estado Arrastrar/soltar

Question

Me gustaría generar un diagrama de estado, por ejemplo, como se muestra en la siguiente imagen.

Quiero hacer esto fácil de usar. Si cualquier usuario quiere ese diagrama, puede simplemente arrastrar/soltar los círculos/flechas y conectarlos y poner la descripción (1,2,3 ..... a, b, c ....) etc. Debe ser basado en web.

No estoy seguro de si hay una biblioteca de código abierto/libre para hacer esto.

¿Cómo generar dicho diagrama de forma interactiva?

Cualquier idea/sugerencia son bienvenidas.

Gracias.

Answer 1

Por lo que yo soy consciente de que es de hecho ninguna biblioteca de código abierto/libre que hace esto.

Existen algunas herramientas en línea, pero en su mayoría usan una conversión de texto a imagen similar a la que hacen yUML y Websequencediagrams.

Tendría que escribirlo todo usted mismo, aunque algo como RaphealJS o jQuery SVG podría hacer algo de trabajo pesado para usted en lo que respecta a la representación de los gráficos.

Es posible que desee echar un vistazo a Canviz y wwwsqldesigner en busca de inspiración.

Answer 2

Mire mi web basado en State Machine Diagram Editor. También existe una versión de escritorio más conveniente.

Answer 3

Estaba buscando algo en la misma línea y encontré: JointJS. Parece muy prometedor para sus propósitos. Los ejemplos deberían ayudarlo a comenzar.

Answer 4

Finite State Machine Designer se puede utilizar para generar diagramas como ese en la pregunta haciendo clic/arrastrar/soltar.

También es open source, en caso de que necesite extenderlo.