Html5 генератор диаграмм рабочего процесса javascript

Я ищу генератор рабочего процесса в html5 javascript

У меня есть система с несколькими статусами, и этот статус следует за конкретным рабочим процессом, который может быть изменен пользователями.

Я ищу простую структуру, которая будет генерировать визуальное представление рабочего процесса

ex:

  • от начала до процесса
  • от решения до конца или от процесса до конца
  • Наконец, от решения до конца

Ответы

Ответ 1

Пройдите через mxGraph (www.jgraph.com), который является HTML5/JavaScript с резервными для браузеров HTML 4. Вы можете увидеть пример с использованием технологии www.draw.io

Ответ 2

Если вы ищете более сложное решение, в коммерческом сценарии, вы можете рассмотреть yFiles для HTML. Если ваша система очень проста, это может быть излишним, хотя и более простые решения, такие как jsPlumb, могут быть достаточными.

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

Для визуализации рабочего процесса, в частности, реализация алгоритма автоматического компоновки Sugiyama Layout полезна, когда необходимо упорядочить большее количество элементов рабочего процесса автоматически:

Sugiyama example rendering created by yFiles

В приведенном выше изображении добавлены плавники, которые очень распространены в более сложных диаграммах рабочих процессов. Алгоритм может автоматически компоновать фигуры, их соединения и полосы плавания. Вы можете увидеть это в действии в это приложение для живых образцов

Раскрытие информации: я работаю в компании, которая создает указанную библиотеку. На SO Я не представляю своего работодателя, мои комментарии, мысли и сообщения - мои собственные.

Ответ 3

Я пробовал несколько инструментов рабочего процесса, блок-схемы и диаграмм.

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

Это почти все функции, которые можно использовать для создания диаграмм рабочих процессов:

1) Богатый текст внутри прямоугольника.

2) Возможность настройки фигур.

3) Возможность добавления символов блок-схемы и исправления внутреннего кода.

4) Работает на Android, iOS, HTML5-браузерах.

5) Возможность добавлять различные типы линий для привязки к различным формам и объектам.

Лицензия MIT.

https://code.google.com/p/svg-edit/

Ответ 4

вот мои два цента.

Если вам нужна GPL и/или коммерческая версия, вы можете использовать Draw2d.org lib. Это SDK rater, чем готовое к использованию приложение. В этом случае интеграция или настройка.

  • чтение/запись JSON
  • запись PNG или GIF
  • ...