HackMD
フローチャートを描こう
flowchart.js による記法。
st=>start: 作戦開始
e=>end: 作戦終了
cnd1=>condition: 日が暮れた？
cnd2=>condition: バスが使える？
op1=>operation: バスのライトで誘導
op2=>operation: 松明で誘導
cnd3=>condition: 海についた？
op3=>operation: セルリアンを船に載せる
op4=>operation: 船を移動
op5=>operation: セルリアンごと沈没
st->cnd1(yes)->cnd2(yes)->op1->cnd3(yes)->op3->op4->op5->e
cnd1(no)->cnd1
cnd2(no)->op2->cnd3
cnd3(no)->cnd2
次は mermaid 記法で。
graph TB
st(作戦開始)
e(作戦終了)
cnd1{日が暮れた?}
cnd2{バスが使える?}
op1[バスのライトで誘導]
op2[松明で誘導]
cnd3{海についた?}
op3[セルリアンを船に載せる]
op4[船を移動]
op5[セルリアンごと沈没]
st-->cnd1
cnd1-->|yes|cnd2
cnd1-->|no|cnd1
cnd2-->|yes|op1
cnd2-->|no|op2
op1-->cnd3
op2-->cnd3
cnd3-->|yes|op3
cnd3-->|no|cnd2
op3-->op4
op4-->op5
op5-->e
こっちはイマイチかなぁ。
では更に graphviz（DOT 言語） 記法で。
digraph graphname{
st [label="作戦開始"]
e [label="作戦終了"]
cnd1 [label="日が暮れた?", shape=diamond]
cnd2 [label="バスが使える?", shape=diamond]
op1 [label="バスのライトで誘導", shape=box]
op2 [label="松明で誘導", shape=box]
cnd3 [label="海についた?", shape=diamond]
op3 [label="セルリアンを船に載せる", shape=box]
op4 [label="船を移動", shape=box]
op5 [label="セルリアンごと沈没", shape=box]
st->cnd1
cnd1->cnd2 [label="yes"]
cnd1->cnd1 [label="no"]
cnd2->op1 [label="yes"]
cnd2->op2 [label="no"]
op1->cnd3
op2->cnd3
cnd3->op3 [label="yes"]
cnd3->cnd2 [label="no"]
op3->op4->op5->e
}
mermaid 記法よりは多少あつかいやすい？ けど，まぁ， flowchart.js が一番簡単で見た目もそこそこいい感じ，かな。
