Javascript jQuery plugin that allows you to draw a flow chart. Take a look at the demo: http://sebastien.drouyer.com/jquery.flowchart-demo/
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:
This project is part of a bigger one, UltIDE which allows you to have a complete interface managing a flowchart and custom properties. Though it is still WIP, you are welcome to give it a try and contribute. A screenshot is shown below.
jquery.flowchart.js is under MIT license.
http://sebastien.drouyer.com/jquery.flowchart-demo/
canUserEditLinks (default: true): Can the user add links by clicking on connectors. Note that links can be removed during the process if multipleLinksOnInput
of multipleLinksOnOutput
are set to false.
canUserMoveOperators (default: true): Can the user move operators using drag and drop.
data (default: {}
): Initialization data defining the flow chart operators and links between them.
operators: Hash defining the operators in your flow chart. The keys define the operators ID and the value define each operator's information as follow:
top (in px)
left (in px)
type: (optional) The type of the operator. See data.operatorTypes
.
properties:
false
) If true
, the operator can be moved outside the container.defaultOperatorClass
.true
, allow multiple links to this connector.true
, whenever a link is created on the connector, another connector (called subconnector) is created. See the multiple connectors demo.inputs
.links: Hash defining the links between your operators in your flow chart. The keys define the link ID and the value define each link's information as follow:
fromOperator: ID of the operator the link comes from.
fromConnector: ID of the connector the link comes from.
fromSubConnector: (optional) If it is a multiple connector, which subconnector is it.
toOperator: ID of the operator the link goes to.
toConnector: ID of the connector the link goes to.
toSubConnector: (optional) If it is a multiple connector, which subconnector is it.
color: Color of the link. If undefined, default value is the same as defaultLinkColor
.
operatorTypes: (optional) Hash allowing you to define common operator types in order to not repeat the properties key. Key define the operator's type ID and the value define the properties (same structure as data.operators.properties
).
verticalConnection (default: false): Allows to build vertical-connected flowcharts. WARNING: When using vertical connectors, avoid using multiple connectors, because it will break layout.
distanceFromArrow (default: 3): Distance between the output connector and the link.
defaultLinkColor (default: '#3366ff'): Default color of links.
defaultSelectedLinkColor (default: 'black'): Default color of links when selected.
defaultOperatorClass (default: 'flowchart-default-operator'): Default class of the operator DOM element.
linkWidth (default: 11): Width of the links.
grid (default: 20): Grid of the operators when moved. If its value is set to 0, the grid is disabled.
multipleLinksOnInput (default: false): Allows multiple links on the same input connector.
multipleLinksOnOutput (default: false): Allows multiple links on the same output connector.
linkVerticalDecal (default: 0): Allows to vertical decal the links (in case you override the CSS and links are not aligned with their connectors anymore).
onOperatorSelect (default: function returning true): Callback method. Called when an operator is selected. It should return a boolean. Returning false
cancels the selection. Parameters are:
onOperatorUnselect (default: function returning true): Callback method. Called when an operator is unselected. It should return a boolean. Returning false
cancels the unselection.
onOperatorMouseOver (default: function returning true): Callback method. Called when the mouse pointer enters an operator. It should return a boolean. Returning false
cancels the selection. Parameters are:
onOperatorMouseOut (default: function returning true): Callback method. Called when the mouse pointer leaves an operator. It should return a boolean. Returning false
cancels the unselection.
onLinkSelect (default: function returning true): Callback method. Called when a link is selected. It should return a boolean. Returning false
cancels the selection. Parameters are:
onLinkUnselect (default: function returning true): Callback method. Called when a link is unselected. It should return a boolean. Returning false
cancels the unselection.
onOperatorCreate (default: function returning true): Callback method. Called when an operator is created. It should return a boolean. Returning false
cancels the creation. Parameters are:
onOperatorDelete (default: function returning true): Callback method. Called when an operator is deleted. It should return a boolean. Returning false
cancels the deletion. Parameters are:
onLinkCreate (default: function returning true): Callback method. Called when a link is created. It should return a boolean. Returning false
cancels the creation. Parameters are:
onLinkDelete (default: function returning true): Callback method. Called when a link is deleted. It should return a boolean. Returning false
cancels the deletion. Parameters are:
onOperatorMoved (default: function): Callback method. Called when an operator is moved. Parameters are:
onAfterChange (default: function): Callback method. Called after changes have been done (operator creation for instance). Parameters are:
All callbacks (options with a name that begins with "on") have their event counterpart. For instance, the callback
onOperatorSelect(operatorId)
has an equivalent event that can be handled using
$(flowchartEl).on('operatorSelect', function(el, operatorId, returnHash) { /* your code here */ })
, where
flowchartEl
is the DOM element of the flowchart.
If onOperatorSelect
doesn't return false
, the event operatorSelect
is triggered, and the final return value
will be returnHash['result']
. The behaviour is similar for all callbacks.
createOperator(operatorId, operatorData):
data.operators
.addOperator(operatorData):
createOperator
, but automatically sets the operator's ID.data.operators
.deleteOperator(operatorId):
getSelectedOperatorId():
null
otherwise.selectOperator(operatorId):
unselectOperator():
addClassOperator(operatorId, className):
removeClassOperator(operatorId, className):
removeClassOperators(className):
setOperatorTitle(operatorId, title):
setOperatorBody(operatorId, body):
getOperatorTitle(operatorId):
getOperatorBody(operatorId):
doesOperatorExists(operatorId):
operatorId
exists.setOperatorData(operatorId, operatorData):
data.operators
.getOperatorData(operatorId):
data.operators
.getConnectorPosition(operatorId, connectorId):
getOperatorCompleteData(operatorData):
data.operators
.class
for instance).getOperatorElement(operatorData):
data.operators
.getLinksFrom(operatorId):
getLinksTo(operatorId):
getOperatorFullProperties(operatorData):
data.operators
.property
key. Otherwise, the property
key extended with the operator's type properties.createLink(linkId, linkData):
data.links
.addLink(linkData):
createLinks
, but automatically sets the link's ID.data.links
.deleteLink(linkId):
getSelectedLinkId():
null
otherwise.selectLink(linkId):
unselectLink()
setLinkMainColor(linkId, color):
getLinkMainColor(linkId):
colorizeLink(linkId, color):
setLinkMainColor
. It can be used to temporarly highlight a link for instance.uncolorizeLink(linkId):
redrawLinksLayer():
getData():
data
option.setData(data):
data
option.getDataRef():
setPositionRatio(positionRatio):
getPositionRatio():
deleteSelected():