web-dev-qa-db-fra.com

visualisation du workflow de processus

J'essaie de visualiser certaines étapes de mon application. Voici le scénario:

  1. L'utilisateur A crée une tâche et l'attribue à l'utilisateur B
  2. L'utilisateur B démarre cette tâche et ajoute des pièces jointes à cette tâche
  3. L'utilisateur A accepte ces pièces jointes ou les rejette
  4. L'utilisateur B effectue certaines actions, puis il modifie le statut de cette tâche.
  5. L'utilisateur A accepte ces actions ou les rejette

Si tout va bien, le flux est simple:

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

mais à l'étape 3, l'utilisateur A rejette les pièces jointes, le processus revient à l'étape 2.

comme ça:

mockup

télécharger la source bmml

donc en gros je peux avoir plusieurs étapes et de chaque étape je peux passer à la suivante pour revenir à la précédente (de l'étape 5 à l'étape 2 par exemple)

Ma question est: Quelle serait la façon la plus claire de présenter visuellement le déroulement de toutes les étapes. et quelle bibliothèque javascript pourrait être utilisée pour ce faire, c'est-à-dire simple et rapide (je voudrais éviter de tout créer à partir de zéro et de réinventer la roue)

La deuxième partie de la question est un peu hors sujet (j'en suis conscient), mais peut-être que quelqu'un pourrait conseiller un outil de mise en œuvre potentiel, sinon, ne votez pas.

6
Misiu

Plutôt que d'essayer d'afficher cette piste d'audit dans un diagramme unique, très volumineux et compliqué, envisagez de le présenter sous forme de journal avec un diagramme simple pour chaque modification.

Dans mon filaire ci-dessous, je montre l'historique d'une seule tâche. Pour chaque enregistrement, je montre une brève description de qui a fait quoi, puis j'illustre le flux entre les étapes avec un diagramme de base.

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

8
Matt Obee

Peut-être utiliser une boucle pour symboliser que les étapes 2 et 3 pourraient être itératives?

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

2
Rich