Flowchart Sample

by Abhishek Kumar

HTML

<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="https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.17.1/flowchart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.17.1/flowchart.min.js.map"></script>
<div class="flowchart">
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes or No?:>http://www.google.com 
io=>inputoutput: catch something...
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
</div>

JavaScript

$(".flowchart").flowChart({
  "x": 0,
  "y": 0,
  "line-width": 2,
  "line-length": 50,
  "text-margin": 10,
  "font-size": 14,
	"font-family": "Rubik",
  "font-color": "black",
  "line-color": "crimson",
  "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"
    }
  }
});