<!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>