Created
January 28, 2016 12:27
-
-
Save yuasatakayuki/6dec1a2194f04903481a to your computer and use it in GitHub Desktop.
テキスト形式でフローチャートを作図する例 - flowchart.js
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset='utf-8'> | |
| </head> | |
| <body> | |
| <script src="raphael-min.js"></script> | |
| <script src="flowchart-latest.js"></script> | |
| <div id="diagram"></div> | |
| <script> | |
| var str=(function(){/* | |
| st=>start: 機器ABC立ち上げ手順開始 | |
| e=>end: 機器ABC立ち上げ手順終了 | |
| pcu_ena=>operation: PCU On/Off Enable | |
| pcu_dis=>operation: PCU On/Off Disable | |
| pcu_on=>operation: PCUからABC電源ON | |
| cond_current=>condition: ABCの消費電力確認 | |
| 電流値が範囲内？ | |
| TBD〜TBD mA | |
| cond_hkcountup=>condition: テレメトリのカウンタ確認 | |
| カウントアップ？ | |
| cond_temp=>condition: ABCの温度確認 | |
| 温度が範囲内？ | |
| TBD〜TBD ℃ | |
| send_nop=>operation: NOP送信 | |
| cond_nop=>condition: NOP受信確認 | |
| RCV_CNT 1増加？ | |
| laser_on=>operation: ABC計測開始(レーザーON) | |
| cond_current2=>condition: ABCの消費電力確認 | |
| 電流値が範囲内？ | |
| TBD〜TBD mA | |
| cond_xy=>condition: 計測値確認 | |
| X/Yは毎秒更新？ | |
| pcu_off=>operation: PCUからABC電源OFF | |
| cond_check_err=>condition: エラー有無確認 | |
| ERROR==1？ | |
| record_error_status=>operation: 【ABC担当の作業】 | |
| ERROR_FIFOの値を記録 | |
| send_clear_err=>operation: エラークリア送信 | |
| manual_ope=>operation: ABC担当が指示する | |
| ステップから作業継続 | |
| fill_record_form=>operation: 【ABC担当の作業】 | |
| テレメトリ記録表を記入 | |
| ★他機器の運用を並行して実施★ | |
| st->pcu_ena->pcu_on->cond_current | |
| cond_current(yes)->cond_hkcountup | |
| cond_current(no)->pcu_off | |
| cond_hkcountup(yes)->cond_temp | |
| cond_hkcountup(no)->cond_check_err | |
| cond_temp(yes)->cond_nop | |
| cond_nop(yes)->laser_on->cond_current2 | |
| cond_nop(no)->cond_check_err | |
| cond_check_err(yes)->record_error_status->send_clear_err | |
| cond_check_err(no)->manual_ope | |
| send_clear_err->manual_ope | |
| cond_temp(no)->pcu_off | |
| cond_current2(yes)->cond_xy | |
| cond_current2(no)->pcu_off | |
| cond_xy(yes)->pcu_dis | |
| cond_xy(no)->pcu_off | |
| pcu_off->pcu_dis->fill_record_form->e | |
| */}).toString().split('*')[1]; | |
| console.log("input str:"); | |
| console.log(str); | |
| var diagram = flowchart.parse(str); | |
| diagram.drawSVG('diagram', { | |
| "line-width": 2, | |
| 'scale': 0.7, | |
| "fill": "#eee" | |
| }); | |
| </script> | |
| </body> | |
| </html> |
お世話になります。
http://github.com/DmitryBaranovskiy/raphael/raw/maser/raphael-min.js
に接続できないようですがraphael-min.jsはどこにあるのでしょうか？
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
raphael-min.jsとflowchart-latest.jsをダウンロードして、同じフォルダに置いてからHTMLファイルをブラウザで開いてみてください。
mkdir flowchart cd flowchart curl -O http://adrai.github.io/flowchart.js/flowchart-latest.js curl -O http://github.com/DmitryBaranovskiy/raphael/raw/maser/raphael-min.js curl -O https://gist.githubusercontent.com/yuasatakayuki/6dec1a2194f04903481a/raw/6a670c1c53b19a84f4e23433f961faa69509e002/flowchart_sample.html open flowchart_sample.htmlhttps://adrai.github.io/flowchart.js/ にある説明を見ながらノードの形状やテキストラベル、ノード同士の接続をテキスト形式で記述すると、きれいなフローチャートが自動的に作図されます。VisioやPowerPointを使った煩雑な作図作業から解放されましょう。
