web-dev-qa-db-fra.com

générateur de diagramme de flux de travail javascript html5

je cherche un générateur de flux de travail en html5 javascript

j'ai un système qui a plusieurs statuts et ce statut suit un flux de travail particulier qui peut être modifié par les utilisateurs. 

Je recherche un cadre simple qui générera une représentation visuelle du flux de travail

ex: 

  • du début au processus 
  • de solution à fin ou de processus à fin 
  • enfin de solution en bout
javascripthtml5workflowdiagram
12
Pascal

Veuillez consulter mxGraph ( www.jgraph.com ), qui est HTML5/JavaScript avec repli pour les navigateurs HTML 4. Vous pouvez voir un exemple utilisant la technologie sur www.draw.io

10
KesaVan

Si vous recherchez une solution plus sophistiquée, dans un scénario commercial, envisagez de prendre en compte yFiles for HTML . Si votre système est très simple, cela peut être excessif, cependant, et des solutions plus simples comme jsPlumb peuvent suffire.

L'ancienne bibliothèque prend en charge tous les types d'interaction utilisateur et de personnalisation, ainsi que l'intégration facile de vos propres formes et représentations visuelles. 

Pour la visualisation de flux de travail en particulier, la mise en œuvre automatique de Sugiyama Layout par un algorithme de présentation est utile lorsqu'un nombre plus important d'éléments de flux de travail doit être organisé automatiquement:

Sugiyama example rendering created by yFiles

Dans l’image ci-dessus, des couloirs ont été ajoutés, ce qui est très courant dans les diagrammes de flux de travail plus complexes. L'algorithme peut organiser les formes, leurs connexions et les couloirs de nage automatiquement. Vous pouvez le voir en action dans cet exemple d'application en direct } _

Disclosure: Je travaille pour la société qui crée ladite bibliothèque. Sur SO, je ne représente pas mon employeur. Mes commentaires, réflexions et messages sont les miens.

4
Sebastian

j'ai essayé plusieurs outils de flux de travail, organigrammes et diagrammes.

J'ai trouvé un que je pourrais ensuite faire un diagramme de flux de travail, charger et enregistrer des données vers et depuis le serveur.

Cela a presque toutes les fonctionnalités qui peuvent être utilisées pour créer des diagrammes de workflow:

1) Texte riche à l'intérieur d'un rectangle.

2) Possibilité de personnaliser les formes.

3) Possibilité d’ajouter des symboles d’organigramme et de corriger le code de back-end.

4) Fonctionne sur les navigateurs Android, iOS, HTML5.

5) Possibilité d'ajouter différents types de lignes à attacher à différentes formes et objets.

MIT sous licence. 

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

3
buttercup

voici mes deux cent.

Si vous avez besoin d'une version GPL et/ou commerciale, vous pouvez utiliser Draw2d.org lib . Il s'agit d'une version du SDK plutôt que d'une application prête à l'emploi. Dans ce cas, une intégration .__ ou une personnalisation est possible.

  • lecture/écriture JSON
  • écriture PNG ou GIF
  • ...
1
Draw2D touch