llearn
Version:
Bad-ass developers create awesome apps
57 lines (53 loc) • 1.42 kB
HTML
<html>
<header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.11.3/flowchart.min.js" ></script>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js"></script>
<style type="text/css" media="screen">
#editor {
margin: 0;
position: absolute;
top: 0;
bottom: 20px;
left: 0;
width: 200;
}
</style>
</header>
<body>
<table>
<tr>
<td width="200"><div id="editor"></div></td>
<td><div id="diagram"></div></td>
</tr>
</table>
</body>
</html>
<script>
// Editor
var editor = ace.edit("editor");
editor.getSession().setMode("ace/mode/text");
/*{flow_code}*/
// var flow = '' +
// '(Do flow)\n'+
// '[Task1]\n'+
// '[Task2]\n'+
// '[Task3]\n'+
// '(end)';
editor.setValue(flow);
editor.gotoLine(1);
// Javascript code
/*{diagram_code}*/
// var code = ''+
// 'a=>start: Do flow\n'+
// 't1=>operation: Task1\n'+
// 't2=>operation: Task2\n'+
// 't3=>operation: Task3\n'+
// 'z=>end: end\n'+
// 'a->t1\n'+
// 't1->t2\n'+
// 't2->t3\n'+
// 't3->z\n';
var diagram = flowchart.parse( code);
diagram.drawSVG('diagram');
</script>