This time I will share jQuery Plugin and tutorial about SVG Based Workflow Diagram Plugin With jQuery – workflowChart.js, hope it will help you in programming stack.
workflowChart.js is a simple, lightweight jQuery plugin which uses svg.js to draw a SVG based workflow diagram to visualize how tasks will flow between nodes.
How to use it:
1. Include the necessary jQuery and SVG.js JavaScript libraries on the html page.
1 |
<script src="jquery-3.0.0.slim.min.js"></script> |
2 |
<script src="svg.min.js"></script> |
2. Download and include the workflowChart.js script after jQuery library.
1 |
<script src="workflowChart.js"></script> |
3. Create a container you want to place the workflow diagram.
4. Initialize the plugin and add you custom data containing IDs, node titles, parent nodes, links to the workflow diagram.
01 |
$('.workflow').workflowChart({ |
03 |
{id: 1, title: 'Node 1', parent: null, optional: false}, |
04 |
{id: 2, title: 'Node 2', parent: 1, optional: false}, |
05 |
{id: 3, title: 'Node 3', parent: 2, optional: true, link: '#'}, |
06 |
{id: 4, title: 'Node 4', parent: 2, optional: false, link: '#'}, |
07 |
{id: 5, title: 'Node 5', parent: 4, optional: false, link: '#'}, |
08 |
{id: 6, title: 'Node 6', parent: 5, optional: false, link: '#'} |
5. Optional settings to customize the workflow diagram.
1 |
$('.workflow').workflowChart({ |
This awesome jQuery plugin is developed by limuxy. For more Advanced Usages, please check the demo page or visit the official website.
