Jquery.flowchart

Javascript jQuery plugin that allows you to draw a flow chart.

View project on GitHub

Description

jquery.flowchart.js is an open source javascript jquery ui plugin that allows you to draw and edit a flow chart.

Here are the main functionalities provided so far:
  • Draw boxes (called operators) and connections between them.
  • Methods are provided so that the end-user can edit the flow chart by adding / moving / removing operators, creating / removing connections between them.
  • The developper can save / load the flowchart.
  • Operators and links can be customized using CSS and the plugin parameters.
  • Some methods allow you to add advanced functionalities, such as a panzoom view or adding operators using drag and drop. Take a look at the advanced demo

The complete API doc can be found in the README.

jquery.flowchart is under MIT license

It has been created by Sébastien Drouyer, alias @sdrdis

Examples

Basic operator

This is a basic operator with two input connectors and three output connector. You can move the operator by dragging it from its title.

Two operators

Now, there is two operators. With the user interface, you can add a link between the two by clicking on the "Output 1" connector and then clicking to a input connector. You can do it again and connect the output connector to another input connector. Since the multipleLinksOnOutput option is set to false, the previous link is destroyed. You can still drag the operators when they are linked...

Create flow chart with a link

Here, a link has been added during the initialization. You can still remove it if you create a link from "Output 1" using the interface.

Create vertical flow chart

The flowchart can also be displayed vertically.

Read-only flow chart

Here, canUserEditLinks and canUserMoveOperators have both been set to false making the chart read-only and preventing operators to move.

Dynamically add operators and delete operators / links

Two buttons have been added allowing to dynamically create operators and delete the selected item.

Multiple connectors

When a link is added on a multiple connector, another connector (called subconnector) will be dynamically created.

Callbacks

Last events: 


  
Showing events triggered.



          
          
          
          
          
          
          
          
          
          
          


  
Get / set flowchart data

  

  
  
  
  
  

    
  


  
In addition to the create and delete buttons, two buttons has been added allowing you to get and set the flowchart's data.



          
          
          
          
          
          
          
          
          
          
          
          
          
          
          


  
Rename operator / change link color

  

  
  
  

    
  

  

  
In addition to the create and delete buttons, two buttons has been added allowing you to get and set the flowchart's data.



          
          
          
          
          
          
          
          
          
          


  
Advanced : panzoom view and operator creation using drag and drop

  

    

  

  

    

    Operators (drag and drop them in the flowchart):
    

    

      
1 input

      
1 output

      
1 input & 1 output

      
1 in & 2 out

      
2 in & 1 out

      
2 in & 2 out

    

  

  

  
In addition to the create and delete buttons, two buttons has been added allowing you to get and set the flowchart's data.