Mermaidを使ってフローチャートを書こう。

Mermaidでフローチャートを書いてみよう

Mermaidについては以下の記事を参照ください。

Markdownで図は書けるのかMarkdownを使っていると、少し図を入れたいなどと思うことがあります。ありものの図であれば画像ファイル化して埋め込めばいいのですが、自分で作る図となるとそうはいきません。ちなみに、図といってもフローチャ...

今回はMermaidを使ってフローチャートを書いてみます。

Flowchart（フローチャート）の書き方

フローチャートは処理の流れを図にしたものです。

以下のサンプルをもとに説明していきます。

    ```mermaid
    flowchart LR
        id1((開始)) --> 処理1
        処理1 --> id2{分岐}
        id2{分岐} -- yes --> 処理2
        id2{分岐} --no--> 処理3
        処理2 --> 処理3
        処理3 --> id3((終了))
    ```

    ```mermaid

まずは、「ここからMermaidを書くぞ」の記載です。
これはMarkdownのコードを書く書式と同じで、コード名を「mermaid」とするだけです。

    flowchart LR

次に「Mermaid」の中の「flowchart」だと指定します。
「flowchart」に続いて記載している「LR」は「左から右に」という意味で、ここを「TD」にすると「トップからダウン」つまり「上から下に」という意味になり、図の描画方法が変わります。

        id1((開始)) --> 処理1
        処理1 --> id2{分岐}
        id2{分岐} -- yes --> 処理2
        id2 --no--> 処理3
        処理2 --> 処理3
        処理3 --> id3((終了))

ここが、目に見える部分です。

図形

「id1((開始))」は「丸の中に「開始」という文字を入れる」という意味で「(( ))」が丸を表しています。id1というのは図形の固有の名前です。

同様に「id2{分岐}」は「ひし形の中に「分岐」という文字を入れる」という意味で「{ }」がひし形を表しています。id2は同様に図形の固有の名前です。

図形の固有の名前（例では id1, id2）は一度定義してしまえば、名前だけで記載できます。
（事前にすべて定義しておくことも可能です。）

例の場合「id2{分岐}」の次の行で「id2」としていますが、これは同じものを示しています。そのため、同じ場所から線が生えています。

「処理1」などとそのまま文字を記載すると「四角」で囲われます。

図形の一覧をまとめておきました。

記号	書き方	例
四角	四角
丸	((丸))
ひし形	{ひし形}
角丸四角	(角丸四角)
角丸四角2	([角丸四角2])
サブルーティン	[[サブルーティン]]
円柱	[(円柱)]
非対称形状	>非対称形状]
六角形	{{六角形}}
平行四辺形	[/平行四辺形/]
平行四辺形2	[\平行四辺形2\]
台形	[/台形\]
台形2	[\台形2/]
二重丸	(((二重丸)))

接続

ここまでわかるとあとは接続です。

接続は「–>」で「左の図形から右の図形に向けて矢印をつなげる」となります。
「>」を省略した「–」ではただ単につなげるだけになります。

線に文字をつけたい場合は「–文字–>」とすると文字が入ります。

線も少し種類があるので、まとめておきます。

線	書き方	例
直線	—
直線文字入り	— 文字 —
矢印	–>
矢印文字入り	— 文字 –>
点線矢印	-.->
点線矢印文字入り	-. 文字 .->
太矢印	==>
太矢印文字入り	== 文字 ==>
透明	~~~