Flowchart.js نام لایبرری نوشته شده با زبان جاوا‌اسکریپت است که با استفاده از آن می‌توان فلوچارت‌هایی با فرمت SVG ترسیم کرد. استفاده از این لایبرری بسیار راحت است اما در عین حال می‌توان فلوچارت‌های نسبتاً پیچیده‌ای با استفاده از آن ترسیم کرد.
برای آنکه دمویی از این لایبرری مشاهده نمایید، صرفاً لازم است تا کدهای زیر را در یک فایل با پسوند html. قرار داده و آن را در یک مرورگر باز کنید:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>flowchart.js · Playground</title>
<style type="text/css">
.end-element { background-color : #FFCCFF; }
</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://flowchart.js.org/flowchart-latest.js"></script>
<!--<script src="../bin/flowchart-latest.js"></script>-->
<!--<script src="../release/flowchart-1.4.1.min.js"></script>-->
<script>
window.onload = function () {
var btn = document.getElementById("run"),
cd = document.getElementById("code"),
chart;
(btn.onclick = function () {
var code = cd.value;
if (chart) {
chart.clean();
}
chart = flowchart.parse(code);
chart.drawSVG('canvas', {
// 'x': 30,
// 'y': 50,
'line-width': 3,
'line-length': 50,
'text-margin': 10,
'font-size': 14,
'font': 'normal',
'font-family': 'Helvetica',
'font-weight': 'normal',
'font-color': 'black',
'line-color': 'black',
'element-color': 'black',
'fill': 'white',
'yes-text': 'yes',
'no-text': 'no',
'arrow-end': 'block',
'scale': 1,
'symbols': {
'start': {
'font-color': 'red',
'element-color': 'green',
'fill': 'yellow'
},
'end':{
'class': 'end-element'
}
},
'flowstate' : {
'past' : { 'fill' : '#CCCCCC', 'font-size' : 12},
'current' : {'fill' : 'yellow', 'font-color' : 'red', 'font-weight' : 'bold'},
'future' : { 'fill' : '#FFFF99'},
'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' }
}
});
$('[id^=sub1]').click(function(){
alert('info here');
});
})();
};
</script>
</head>
<body>
<div><textarea id="code" style="width: 100%;" rows="11">
st=>start: Start|past:>http://www.google.com[blank]
e=>end: Ende:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request
st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
</textarea></div>
<div><button id="run" type="button">Run</button></div>
<div id="canvas"></div>
</body>
</html>
این لایبرری اپن‌سورس است و بسته به نیاز خود اجازهٔ کپی، اِعمال تغییرات در آن و انتشار مجددش را بدون هرگونه محدودیتی خواهید داشت.
