- Saved searches
- Use saved searches to filter your results more quickly
- sdrdis/jquery.flowchart
- Name already in use
- Sign In Required
- Launching GitHub Desktop
- Launching GitHub Desktop
- Launching Xcode
- Launching Visual Studio Code
- Latest commit
- Git stats
- Files
- README.md
- About
- 10 Best Flowchart JavaScript Libraries To Visualize Your Workflow
- The Best Flowchart Library
- Table of contents:
- Best jQuery Flowchart Plugins
- Drag’n’drop Flow Chart Plugin With jQuery And jQuery UI — flowchart.js
- Simple SVG Flow Chart Plugin with jQuery — flowSVG
- Drag And Drop Flowchart Builder — Flowy.js
- jQuery Plugin To Generate SVG Based Flowchart Diagram
- Dynamic Tree View With Visual Connections — jsPlumbTree
- Best Vanilla JS Flowchart Libraries
- flowchart.js
- Dynamic Flow Chart Library with CreateJS – flowjs
- Drag And Drop Flowchart Builder – Drawflow
- Create Interactive Flowchart With JavaScript And Canvas – diagramflowjs
- Draw Flow Diagrams From Plain Text – Pinker.js
- More Resources:
- See Also:
Saved searches
Use saved searches to filter your results more quickly
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
JQuery plugin that allows you to draw a flow chart.
sdrdis/jquery.flowchart
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Sign In Required
Please sign in to use Codespaces.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Latest commit
Git stats
Files
Failed to load latest commit information.
README.md
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:
- 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.
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.
- Simone Gasparini — alias @simmyg89 — for bug fixes and code formatting.
- Guijin Ding — alias @dingguijin — for bug fixes.
- M. Fatih Marabaoğlu — alias @MFatihMAR — for adding the uncontained parameter and improving the grid system.
- Peter Vavro — alias @petervavro — for adding mouse events.
- Mike Branham — alias @Mike-Branham — for bug fixes in the demo page.
- @zhangbg — for compatibility with IE9, IE10 and IE11.
- @elvaron — for bug fixes and adding the getLinksFrom and getLinksTo methods.
- Ziyi Wang — alias @ziyiwang — for bug fixes.
- @dogbull — for adding the getDataRef method.
- Yaroslav Zenin — alias @yaroslav-zenin — for big fixes.
- @lflfm — for bug fixes and new demo page.
- @neoera — for adding multiple sub connector with array support.
- Dima Shemendiuk — alias @dshemendiuk — for adding vertical flowchart support and access to operators’s body.
- Ernani Azevedo — alias @ernaniaz — for adding the possibility to decide for each connector if there can be a single link and multiple links and for making the integration of features from the community much easier.
- 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:
- title
- body
- uncontained: (optional, default: false ) If true , the operator can be moved outside the container.
- class: css classes added to the operator DOM object. If undefined, default value is the same as defaultOperatorClass .
- inputs: Hash defining the box’s input connectors. The keys define the connectors ID and the values define each connector’s information as follow:
- label: Label of the connector. If the connector is multiple, ‘(:i)’ is replaced by the subconnector ID.
- multipleLinks: (optional) If true , allow multiple links to this connector.
- multiple: (optional) If true , whenever a link is created on the connector, another connector (called subconnector) is created. See the multiple connectors demo.
- 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 .
- operatorId: ID of the operator.
- operatorId: ID of the operator.
- linkId: ID of the link.
- operatorId: ID of the operator.
- operatorData: Data of the operator.
- fullElement: Hash containing DOM elements of the operator. It contains:
- operator: the DOM element of the whole operator.
- title: the DOM element of the operator’s title.
- connectorArrows: the DOM element of the connectors’ arrows.
- connectorSmallArrows: the DOM element of the connectors’ small arrows.
- operatorId: ID of the operator.
- linkId: ID of the link.
- linkData: Data of the link.
- linkId: ID of the link.
- forced: The link deletion can not be cancelled since it happens during an operator deletion.
- operatorId: ID of the operator.
- position: New position of the operator.
- changeType: What change did occur. Can be one of these strings:
- operator_create
- link_create
- operator_delete
- link_delete
- operator_moved
- operator_title_change
- operator_body_change
- operator_data_change
- link_change_main_color
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):
- Parameters:
- operatorId
- operatorData: Same as in data.operators .
- Description: Same as createOperator , but automatically sets the operator’s ID.
- Parameters:
- operatorData: Same as in data.operators .
- Parameters:
- operatorId
- Return: The operator ID if one is selected, null otherwise.
- Parameters:
- operatorId
- Parameters:
- operatorId
- className: Class name to add.
- Parameters:
- operatorId
- className: Class name to remove.
- Parameters:
- className: Remove class name from all operators.
- Parameters:
- operatorId
- title: The operator’s new title to be set.
- Parameters:
- operatorId
- body: The operator’s new body html to be set.
- Parameters:
- operatorId
- Parameters:
- operatorId
- Description: This method checks whether or not an operator with id equal to operatorId exists.
- Parameters:
- operatorId
- Description: This method replaces the operator’s data. Note that if new connectors are renamed / removed, the flowchart can remove links.
- Parameters:
- operatorId
- operatorData: Same as in data.operators .
getOperatorData(operatorId):
getConnectorPosition(operatorId, connectorId):
- Parameters:
- operatorId
- connectorId
- Parameters:
- operatorData: The operator’s data. Same as in data.operators .
- Parameters:
- operatorData: The operator’s data. Same as in data.operators .
- Parameters:
- operatorId: The operator’s Id.
- Parameters:
- operatorId: The operator’s Id.
- Parameters:
- operatorData: The operator’s data. Same as in data.operators .
- getData():
- Return: The flow chart’s data. Same structure as the data option.
- Parameters:
- data: Same structure as the data option.
- Return: The internal system flow chart’s data.
- Parameters:
- positionRatio: The ratio between the mouse position and the position of the DOM elements. Used when drag and dropping the operators. You should use it if you zoom the container. See the advanced demo.
- Return: The position ratio.
- Description: Deletes the link or operator selected.
About
JQuery plugin that allows you to draw a flow chart.
10 Best Flowchart JavaScript Libraries To Visualize Your Workflow
A flowchart is a type of diagram for representing a workflow or process that commonly consists of blocks (nodes), directional arrows, and various geometric figures.
It is typically used to visualize the relationships or interactions between people and systems, such as decision tree, organization chart, and much more.
The Best Flowchart Library
If you’re looking for an online flowchart marker. You’re at the right place.
The easiest way to visualize your workflow on the webpage is to use a JavaScript flowchart library.
This post rounds up some of the best jQuery plugins and Vanilla JavaScript libraries that make it easier to draw and render customizable flowcharts on your existing web project. Have fun with it.
Originally Published Oct 28 2020, updated Mar 14 2023
Table of contents:
Best jQuery Flowchart Plugins
Drag’n’drop Flow Chart Plugin With jQuery And jQuery UI — flowchart.js
flowchart.js is a jQuery & jQuery UI based flowchart plugin which enables you to create drag’n’drop flowchart boxes and connect between them with a custom line.
Simple SVG Flow Chart Plugin with jQuery — flowSVG
flowSVG is a jQuery diagram plugin that uses SVG.js to draw interactive and statistic flow charts for representing algorithms, workflows or processes.
Drag And Drop Flowchart Builder — Flowy.js
Flowy.js is a pretty nice and user-friendly flowchart builder to create responsive, professional flowchart using drag and drop.
jQuery Plugin To Generate SVG Based Flowchart Diagram
flowchart.js is a jQuery wrapper for Flowchart JS library that makes it easy to draw a vector based flowchart diagram using SVG and Raphaël.js.
Dynamic Tree View With Visual Connections — jsPlumbTree
A jQuery plugin that renders a collapsible and expandable tree structure representing the hierarchical relationship between various nodes.
Best Vanilla JS Flowchart Libraries
flowchart.js
A flowchart DSL and SVG render that runs in the browser and terminal. Nodes and connections are defined separately so that nodes can be reused and connections can be quickly changed. Fine grain changes to node and connection style can also be made right in the DSL.
Dynamic Flow Chart Library with CreateJS – flowjs
A JavaScript library built with CreateJS that allows you to render dynamic, animated flow charts using html5 canvas API.
Drag And Drop Flowchart Builder – Drawflow
A JavaScript library to dynamically generate a pretty flowchart via drag and drop.
Create Interactive Flowchart With JavaScript And Canvas – diagramflowjs
A JavaScript library to draw an interactive, editable flowchart representing workflows, decisions, complex process, and much more.
Draw Flow Diagrams From Plain Text – Pinker.js
A vanilla JavaScript library which renders a canvas based flow chart from plain text to represents a workflow, process, or decisions.
More Resources:
Want more jQuery plugins or JavaScript libraries to draw flowcharts on the page? Check out the jQuery Flowchart and JavaScript Flowchart sections.
See Also:
- Parameters:
- 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:
