<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<title>flowchart.js · Playground</title>
<style
type="text/css">
.end-element
{
background-color :
#333;color:
#eee; }
</style>
<!-- <script src="../release/flowchart.min.js"></script> -->
<script>
window.onload
= function
() {
var
btn
= document.getElementById("run"),
cd1
=
document.getElementById("code1"),cd2
=
document.getElementById("code2"),
chart;
(btn.onclick
= function
() {
var
code
= cd1.value
+
cd2.value;
if
(chart) {
chart.clean(); }
chart
=
flowchart.parse(code);
chart.drawSVG('canvas',
{
// 'x': 30,
// 'y': 50,
'line-width':
2,
'maxWidth':
3,//ensures the flowcharts fits within a certian width
'line-length':
50,
'text-margin':
10,
'font-size':
14,
'font':
'normal',
'font-family':
'微软雅黑',
'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="code1"
style="display:
none;width:
100%;"
rows="11">
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request
</textarea>
<textarea
id="code2"
style="display:
none;width:
100%;"
rows="11">
start->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->end
c2(no)->op2->end
</textarea>
</div>
<div><button
id="run"
type="button">Run</button></div>
<div
id="canvas"></div>
</body>
</html>