flowchart.js is a jQuery wrapper for the Flowchart JS library that makes it easy to draw a vector-based flowchart using SVG.

svg flowchart generator, html flowchart generator, dynamic flow chart in html, javascript to flowchart, javascript interactive flowchart, d3 flowchart example

[Drag And Drop] A Minimal Javascript Library to Create Flow Charts | Flowy.js

How to make use of it:

1. Load the jQuery library into the document.

<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/flowchart.min.js"></script>

2. Load the jQuery flowchart.js schema after the jQuery library.

<script src="jquery.flowchart.js"></script>

3. Create steps/conditions for the flowchart.

<div class="flowchart">
st=>start: Start:> [blank]
e=>end:>
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes or No?:> 
io=>inputoutput: catch something...
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
</div>

4. Connect to the plugin on the container and set up the flowchart.

$(".flowchart").flowChart({
  "line-color"    : "red",
  "element-color" : "red",
  "symbols"       : {
    "start"     : {
      "element-color" : "red",
      "fill"  : "red"
    }
  },
});

5. All settings are default.

"x": 0,
"y": 0,
"line-width" : 2,
"line-length" : 50,
"text-margin": 10,
"font-size": 14,
"font-color": "black",
"line-color": "black",
"element-color" : "black",
"fill": "white",
"yes-text": "yes",
"no-text": "no",
"arrow-end": "block",
"symbols": {
  "start": {
    "font-color": "black",
    "element-color": "black",
    "fill": "white"
  },
  
  "end": {
    "class": "end-element"
  }
},
"flowstate": {
  "past": {
    "fill": "#CCCCCC", 
    "font-size": 12
  },
  
  "current": {
    "fill": "black", 
    "font-color": "white", 
    "font-weight": "bold"
  },
  "future": {
    "fill": "white"
  },
  "request": {
    "fill": "blue"
  },
  "invalid": {
    "fill": "#444444"
  },
  "approved" : {
    "fill": "#58C4A3", 
    "font-size": 12, 
    "yes-text": "APPROVED", 
    "no-text": "n/a"
  },
  "rejected": {
    "fill": "#C45879", 
    "font-size": 12, 
    "yes-text": "n/a", 
    "no-text": "REJECTED"
  }
}

jQuery Plugin To Generate SVG Based Flowchart Diagram, jquery.flowchart.js Plugin/Github

See Demo And Download

Official Website(pandao): Click Here

This superior jQuery/javascript plugin is developed by pandao. For extra advanced usage, please go to the official website.