Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
テキスト形式でフローチャートを作図する例 - flowchart.js
<!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>
@yuasatakayuki

This comment has been minimized.

Copy link
Owner Author

yuasatakayuki commented Jan 28, 2016

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.html

https://adrai.github.io/flowchart.js/ にある説明を見ながらノードの形状やテキストラベル、ノード同士の接続をテキスト形式で記述すると、きれいなフローチャートが自動的に作図されます。VisioやPowerPointを使った煩雑な作図作業から解放されましょう。
flowchart_sample

@Wacky515

This comment has been minimized.

Copy link

Wacky515 commented May 1, 2017

お世話になります。
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
You can’t perform that action at this time.