html5 JavaScript diagramma flusso generatore

Question

Sto cercando un generatore di flusso di lavoro in html5 JavaScript

Ho un sistema che ha diversi status e quelli di stato segue un particolare flusso di lavoro che può essere alterato dagli utenti.

io alla ricerca di una struttura semplice che genererà una rappresentazione visiva del flusso di lavoro

es:

• dall'inizio alla elaborare
• dalla soluzione alla fine o dal processo per terminare
• infine dalla soluzione alla fine

Answer 1

Si prega di passare attraverso mxGraph (www.jgraph.com), che è HTML5/JavaScript con fallback per i browser HTML 4. È possibile visualizzare un esempio utilizzando la tecnologia in www.draw.io

Answer 2

Se si sta cercando una soluzione più sofisticata, in uno scenario commerciale, è possibile prendere in considerazione yFiles for HTML. Se il tuo sistema è molto semplice, questo potrebbe essere eccessivo, tuttavia, e soluzioni più semplici come jsPlumb potrebbero essere sufficienti.

La precedente libreria supporta tutti i tipi di interazione dell'utente e la relativa personalizzazione, oltre a fornire il supporto per una facile integrazione delle proprie forme e rappresentazioni visive.

Per la visualizzazione del flusso di lavoro specifico, l'implementazione automatica algoritmo layout del Sugiyama Layout è utile quando un numero maggiore di elementi di workflow devono essere disposti automaticamente:

Nell'immagine qui sopra, sono state aggiunte swimlanes , che sono molto comuni in diagrammi di flusso di lavoro più complessi. L'algoritmo può organizzare automaticamente le forme, le loro connessioni e le corsie di nuoto. È possibile vederlo in azione in this live sample application

Divulgazione: lavoro per la società che crea detta libreria. Su SO non rappresento il mio datore di lavoro, i miei commenti, pensieri e post sono miei.

Answer 3

Ho provato diversi strumenti per flusso di lavoro, diagrammi di flusso e diagrammi.

Ne ho trovato uno che potevo quindi creare un diagramma del flusso di lavoro, caricare e salvare dati da e verso il server.

Questo ha quasi tutte le caratteristiche che possono essere utilizzati per rendere i diagrammi di flusso di lavoro:

1) testo Rich all'interno di un rettangolo.

2) Possibilità di personalizzare le forme.

3) Possibilità di aggiungere i simboli del diagramma di flusso e correggere il codice di back-end.

4) Funziona su browser Android, iOS, HTML5.

5) Possibilità di aggiungere diversi tipi di linee da collegare a forme e oggetti diversi.

MIT Licenza.

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

Answer 4

qui sono i miei due cent.

Se è necessaria una versione GPL e/o commerciale, è possibile utilizzare la lib Draw2d.org. È un programma SDK piuttosto che un'applicazione pronta per l'uso. In questo caso è possibile un'integrazione o personalizzazione.

• lettura/scrittura JSON
• scrittura PNG o GIF
• ...