以下の記事で紹介したとおり、Mermaidはかなり便利です。

参考：Hugoにテキストのみで図を描画できるMermaidを導入

今回は、Mermaidでフローチャートを作図してみます。

なお、紹介した以外のノードや関連線などは、公式サイトで紹介されています。英語だけど。

ノード

ノードは、フローを構成する部品であり、工程や分岐を示すもので、以下が基本形です。

```mermaid
flowchart LR
    id1[This is the text in the box]
```

ちなみに、Markdown記法にも対応しています。

```mermaid
%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
    markdown["`This **is** _Markdown_`"]
    newLines["`Line1
    Line 2
    Line 3`"]
    markdown --> newLines
```

分岐

以下は分岐の際に使うもの。

書き方は2通りあります。後者の方が簡単です。

```mermaid
flowchart TD
    A@{ shape: diamond, label: "分岐" }
```

```mermaid
flowchart TD
    A{分岐}
```

ループ(繰り返し)

ループ(繰り返し)の際に使うもの。

これも2通りの書き方があります。後者の方が簡単ですし、台形の形に見えるので覚えやすいです。

```mermaid
flowchart TD
    A@{ shape: trap-b, label: "ループ開始" }
```

```mermaid
flowchart TD
    A[/ループ開始\]
```

上に比べて大きく見えますが、まあ気にしないことにしましょう。

これも2通りの書き方があります。後者の場合は「\」と「/」を変更するだけです。

```mermaid
flowchart TD
    A@{ shape: trap-t, label: "ループ終了" }
```

```mermaid
flowchart TD
    A[\ループ終了/]
```

円

円は、開始や終了の際に利用します。

これも2通りの書き方があります。

```mermaid
flowchart LR
    A((開始))
```

```mermaid
flowchart TD
    A([開始])
```

関連線

関連線は、ノードからノードへの遷移を示す矢印のことで、テキストで「–>」と記述するだけでOKです。

```mermaid
flowchart TD
    Start --> Stop
```

矢印の向きの変更方法は以下のとおり。

• TB - Top to bottom
• TD - Top-down/ same as top to bottom
• BT - Bottom to top
• RL - Right to left
• LR - Left to right

「flowchart TD」を「flowchart LR」に変更するだけで以下のように変更できます。簡単すぎる👍

また、矢印でなく、単なる線にすることも可能。

```mermaid
flowchart LR
    Start --- Stop
```

線の上にテキストを置くことも可能。

```mermaid
flowchart LR
    A-- text -->B
```

点線や太い線にすることも可能。

```mermaid
flowchart LR
   A-.->B;
```

```mermaid
flowchart LR
   A ==> B
```

もちろん、テキストを加えることも可能。

```mermaid
flowchart LR
   A-. text .-> B
```

なお、アニメーションも可能です。利用用途は思いつきませんが🤣

```mermaid
flowchart LR
  A e1@==> B
  e1@{ animate: true }
```

フローチャートの実戦例

以上を踏まえて、フローチャートを作ってみると、以下のように描くことができます。

書き方は以下のとおり。めちゃくちゃ簡単、やはりMermaidは便利ですね👍

```mermaid
flowchart TD
  A([開始]) --> B{分岐}
  B --"yes"--> C[処理1]
  B --"no"--> D[処理2]
  C & D --> E[/ループ開始\]
  E --> F[処理3]
  F --> G[\ループ終了/]
  G --> H([終了])
```

参考：Flowcharts - Basic Syntax