1. Type this following web source code in website editor:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>flowchart.js · Playground</title>
<style type="text/css">
.end-element { fill : #FFCCFF; }
</style>
<!-- raphael/2.3.0 -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
<!-- jquery/1.11.0 -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- flowchart/1.18.0 -->
<script src="http://flowchart.js.org/flowchart-latest.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');
$('[id^=sub1]').click(function(){
alert('info here');
});
})();
};
function myFunction(event, node) {
console.log("You just clicked this node:", node);
}
</script>
</head>
<body>
<div><textarea id="code" style="width: 100%;" rows="11">st=>start: Start|past
en=>end: End
op1=>operation: Lamp Doesn't Work|past
op2=>operation: Plug In Lamp|current
op3=>operation: Replace Bulb|current
op4=>operation: Buy New Lamp|current
cond1=>condition: Lamp
Pluged In?|approved
cond2=>condition: Bulb Burned Out?|rejected
st->op1->cond1
cond1(yes)->cond2
cond1(no)->op2->en
cond2(true)->op3->en
cond2(false)->op4(right)->en
st@>op1({"stroke":"black","stroke-width":6,"arrow-end":"classic-wide-long"})@>cond1({"stroke":"Black","stroke-width":6,"arrow-end":"classic-wide-long"})@>cond2({"stroke":"Black","stroke-width":6,"arrow-end":"classic-wide-long"})@>op2({"stroke":"Black","stroke-width":6,"arrow-end":"classic-wide-long"})@>en({"stroke":"Black","stroke-width":6,"arrow-end":"classic-wide-long"})
cond1@>op2({"stroke":"Black","stroke-width":6,"arrow-end":"classic-wide-long"})
cond2@>op3({"stroke":"Black","stroke-width":6,"arrow-end":"classic-wide-long"})@>en({"stroke":"Black","stroke-width":6,"arrow-end":"classic-wide-long"})
cond2@>op4({"stroke":"Black","stroke-width":6,"arrow-end":"classic-wide-long"})@>en({"stroke":"Black","stroke-width":6,"arrow-end":"classic-wide-long"})
</textarea></div>
<div><button id="run" type="button">Run</button></div>
<div id="canvas"></div>
</body>
</html>
2. Save file as FlowChartJSSample1.html
3. Open file FlowChartJSSample1.html in Google Chrome browser.
Output
Notes To see the more clear picture, click on the picture.
Related Post
Notes To see the more clear picture, click on the picture.
Tidak ada komentar:
Posting Komentar