A Pen by FavorMylikes on CodePen.
Created
August 15, 2019 19:18
-
-
Save FavorMylikes/6a34b9a96a132c92245cebad2005af98 to your computer and use it in GitHub Desktop.
flowchart_editor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <div style:"text-align: center;"><textarea id="code" style="width: 100%;display:none;" rows="11"> | |
| renter_0=>operation: 没住过 | |
| renter_1=>operation: 面试申请者啦 | |
| renter_2=>parallel: 面试通过 | |
| 暂时搬不过来的话 | |
| 需要先交定金 | |
| renter_3=>operation: 已支付定金 | |
| 保留床位 | |
| renter_4=>operation: 现住客 | |
| renter_6=>operation: 曾住客 | |
| action_0=>subroutine: 申请面试 | |
| action_1=>subroutine: 定金支付|clickable:>http://lifelab-space.mikecrm.com/q7vetg2 | |
| action_2=>subroutine: 退宿 | |
| 享有400元送别资金|clickable:>http://lifelab-space.mikecrm.com/Sp7bZiA | |
| action_3=>subroutine: 延期 | |
| action_4=>subroutine: 房租及租金缴纳完毕|clickable:>http://lifelab-space.mikecrm.com/xperQLK | |
| action_5=>subroutine: 面试 | |
| action_6=>condition: 投票 | |
| renter_0->action_0 | |
| action_0->renter_1 | |
| renter_1->action_5 | |
| action_5->renter_2 | |
| renter_2(path1,right)->action_1 | |
| renter_2(path2,bottom)->action_4 | |
| action_1->renter_3 | |
| renter_3(left)->action_4 | |
| action_4->renter_4 | |
| renter_4->action_3 | |
| action_3->renter_4 | |
| renter_4->action_2 | |
| action_2->renter_6 | |
| renter_6(right)->action_6 | |
| action_6(yes,top)->renter_2 | |
| action_6(no,right)->action_5 | |
| </textarea></div> | |
| <div style="display:none;"><button id="run" type="button">Run</button></div> | |
| <div style="text-align: center;"> | |
| <div id="canvas" ></div> | |
| </div> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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', { | |
| // 'x': 30, | |
| // 'y': 50, | |
| 'line-width': 3, | |
| 'maxWidth': 3, //ensures the flowcharts fits within a certian width | |
| 'line-length': 50, | |
| 'text-margin': 10, | |
| 'font-size': 14, | |
| 'font': 'normal', | |
| 'font-family': 'Helvetica', | |
| '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', | |
| }, | |
| 'end': { | |
| 'class': 'end-element' | |
| } | |
| }, | |
| 'flowstate': { | |
| 'clickable':{ 'fill' : '#52bffa'},'delay' : {'arrow-text' : '暂时无法搬过来，先面试了' } | |
| ,'now' : {'arrow-text' : '我现在就能住进来' } | |
| } | |
| }); | |
| $('[id^=sub1]').click(function() { | |
| alert('info here'); | |
| }); | |
| })(); | |
| }; | |
| function myFunction(event, node) { | |
| console.log("You just clicked this node:", node); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.0/raphael-min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> | |
| <script src="https://flowchart.js.org/flowchart-latest.js"></script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment