78 views
--- 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 ``` ```flow 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 ``` ```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 } ``` ```graphviz 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`