---
robots: noindex, nofollow
lang: ja
dir: ltr
breaks: false
---

# フローチャートを描こう

[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

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

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
}

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] が一番簡単で見た目もそこそこいい感じ，かな。

[flowchart.js]: http://flowchart.js.org/
[graphviz]: http://www.graphviz.org/ "Graphviz | Graphviz - Graph Visualization Software"
[mermaid]: http://knsv.github.io/mermaid/ "mermaid - Generation of diagrams and flowcharts from text in a similar manner as markdown."

###### tags: `flowchart` `graph` `hackmd` `markdown`