SVG Based Workflow Diagram Plugin With jQuery - workflowChart.js

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.

<script src="jquery-3.0.0.slim.min.js"></script>
<script src="svg.min.js"></script>

2. Download and include the workflowChart.js script after jQuery library.

<script src="workflowChart.js"></script>

3. Create a container you want to place the workflow diagram.

<div class="workflow">
</div>

4. Initialize the plugin and add you custom data containing IDs, node titles, parent nodes, links to the workflow diagram.

$('.workflow').workflowChart({
  data: [
    {id: 1, title: 'Node 1', parent: null, optional: false},
    {id: 2, title: 'Node 2', parent: 1, optional: false},
    {id: 3, title: 'Node 3', parent: 2, optional: true, link: '#'},
    {id: 4, title: 'Node 4', parent: 2, optional: false, link: '#'},
    {id: 5, title: 'Node 5', parent: 4, optional: false, link: '#'},
    {id: 6, title: 'Node 6', parent: 5, optional: false, link: '#'}
  ]
})

5. Optional settings to customize the workflow diagram.

$('.workflow').workflowChart({
  height: 160,
  textSize: 20,
  circleSize: 20,
  chartColor: '#45B6AF',
  textColor: '#000
})

---

This awesome jQuery plugin is developed by limuxy. For more Advanced Usages, please check the demo page or visit the official website.