Generowanie diagramu stanu Przeciągnij/upuść

Question

Chciałbym wygenerować diagram stanu, na przykład jak pokazano na poniższym obrazku.

Chcę, aby było to przyjazne dla użytkownika. Jeśli dowolny użytkownik chce takiego diagramu, może po prostu przeciągnąć/upuścić kółka/strzałki i połączyć je i umieścić opis (1,2,3 ..... a, b, c ...) itp. Powinien to być oparta na Internecie.

Nie jestem pewien, czy jest w tym przypadku biblioteka opensource/free.

Jak wygenerować taki schemat interaktywnie?

Wszelkie pomysły/sugestie są mile widziane.

Dziękuję.

Answer 1

O ile jestem świadomy jest rzeczywiście nie opensource/wolne biblioteka, która to robi.

Niektóre narzędzia internetowe istnieją, ale najczęściej używają konwersji tekstu na obraz, podobnej do tego, co robią yUML i Websequencediagrams.

Musisz napisać całą rzecz samodzielnie, chociaż coś takiego jak RaphealJS lub jQuery SVG może zrobić dla ciebie trochę ciężkiego liftingu w odniesieniu do renderowania wykresów.

Możesz zajrzeć pod Canviz i wwwsqldesigner, aby uzyskać inspirację.

Answer 2

Zapoznaj się z moją stroną internetową State Machine Diagram Editor. Dostępna jest również wygodniejsza wersja komputerowa.

Answer 3

Szukałem czegoś wzdłuż tych samych linii i znalazłem: JointJS. Wygląda to bardzo obiecująco dla twoich celów. Przykłady powinny pomóc Ci zacząć.

Answer 4

Finite State Machine Designer może być używany do generowania takich wykresów w pytaniu za pomocą kliknięcia/przeciągnięcia/upuszczenia.

Jest również open source, jeśli musisz go przedłużyć.