mermaid.js

mermaid.jsで簡単フローチャート

最初に

mermaid.jsが便利なのでおすすめしたかった
ほぼ
https://mermaidjs.github.io/flowchart.html
を写したもの
環境はATOM+atom-mermaid
(右クリック→Mermaid Preview→画像の上で右クリックで画像を保存できる)

方向

上→下のフローチャート

graph TD
    始まり --> 終わり

mer1.png

左→右のフローチャート

graph LR
    始まり --> 終わり

mer2.png

ちょっと丸く

graph LR
    id1(丸くする)

mer3.png

graph LR
    id1((もっと丸))

mer4.png

ダイヤ

graph LR
    id1{ダイヤ}

mer5.png

矢印

矢印を線にする

graph LR
    始まり --- 終わり

mer6.png

矢印を点線に

graph LR;
   ドットに-.->なるよ;

mer7.png

太矢印

graph LR
   太い ==> 太いよ

mer8.png

文字付き矢印

graph LR
    始まり-->|途中|終わり

mer9.png

その他

文字中に記号を使いたいとき

graph LR
        A["!?!?"] -->B["……"]

[""]で囲む。
mer10.png

最終的に…

こういうフローチャートができる。
mer11.png

graph LR
        A["ひき肉、<br>卵、玉ねぎ"] -->B(("パン粉"))
        A["ひき肉、<br>卵、玉ねぎ"] -->C(("豆腐"))
        B(("パン粉"))-->|焼く|D(ハンバーグ)
        C(("豆腐"))-->|焼く|E(豆腐ハンバーグ)