This obfc.js example shows a flowchart about search in an array. Source codes and output of these codes are examined in this blog post.
Script codes for creating a flowchart:
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script type="text/javascript" src="/wp-content/uploads/obfc/obfc.min.js"> //External link obfc.min.js, also you can download and use in your web page </script> <script> prepare_SVG("demo"); var object1 = add_theObject(new Terminal(300, 50, 0.7, ["Start"], 20, "Search in an integer array")); var object2 = add_theObject(new Process(300, 150, 1, ["s_value= 5, pos: -1", "List={1, 3, 5, 7, 9}"], 10, "<b>Description can be entered here...</b>")); var object3 = add_theObject(new Preparation(300, 250, 1, ["i=0;i<List.length-1;i++"], 10, "<i>Loop</i>")); var object4 = add_theObject(new Decision(300, 380, 1, ["s_value==List[i]"], 10)); var object5 = add_theObject(new Process(150, 480, 0.8, ["pos=i"], 12, "<b>position value is changed</b>")); var object6 = add_theObject(new Display(300, 560, 0.8, ["Show Position"], 10)); var object7 = add_theObject(new Terminal(300, 645, 0.7, ["End"], 20)); var o_line1 = draw_theLine(new Line(object1, object2)); var o_line2 = draw_theLine(new Line(object2, object3)); var o_line3 = draw_theLine(new Line(object3, object4)); var o_line4 = draw_theLine(new Line(object4, object3, null, null, "No", 12)); var o_line5 = draw_theLine(new Line(object4, object5, -1, -1, "Yes", 12)); //var o_line6 = draw_theLine(new Line(object5, object3, 0, 2, null, null, "Find last position")); var o_line6 = draw_theLine(new Line(object5, object6, 1, 0, null, null, "Find and Break")); var o_line7 = draw_theLine(new Line(object3, object6)); var o_line8 = draw_theLine(new Line(object6, object7)); </script> |