Создать диаграмму состояния Drag / Drop

Question

Я хотел бы создать диаграмму состояний, например, как показано на рисунке ниже.

Я хочу сделать это удобным для пользователя.Если какой-либо пользователь хочет такую ​​диаграмму, он может просто перетащить / отпустить кружки / стрелки и соединить их и поместить описание (1,2,3 ..... a, b, c ....) и т. Д. Это должно быть веб-.

Я не уверен, есть ли для этого библиотека с открытым исходным кодом или свободная библиотека.

Как создать такую ​​диаграмму в интерактивном режиме?

Любые идеи и предложения приветствуются.*

Спасибо.

Answer 1

Я искал что-то в том же духе и нашел: JointJS .Это выглядит очень перспективным для ваших целей.Примеры должны помочь вам начать работу.

Answer 2

Насколько мне известно, действительно нет библиотеки с открытым исходным кодом / бесплатной библиотеки, которая бы это делала.

Некоторые онлайн-инструменты существуют, но они в основном используют преобразование текста в изображение, подобное тому, что yUML и веб-последовательности do.

Вы должны написать все сами, хотя что-то вроде RaphealJS или jQuery SVG может сделать некоторые тяжелые действия для вас в отношении рендеринга графиков.

Возможно, вы захотите взглянуть на Canviz и wwwsqldesigner для вдохновения.

Answer 3

Конечный Конструктор конечных автоматов можно использовать для создания диаграмм, подобных приведенным в вопросе, с помощью щелчка / перетаскивания / отбрасывания.

Это также с открытым исходным кодом , если вам нужно его расширить.

Answer 4

Посмотрите на мой веб-редактор State Machine Diagram . Более удобная настольная версия также существует.