mermaid サンプルなど フローチャート編

## はじめに

ここでは mermeid の flowchart 記述で

* 書いていて気づいたこと、引っかかったこと
* 動作（描画）確認してみたこと
* サンプル（過去に書いたもの）

などを載せていきます。

備忘・記録の面が強いので説明はあまりありません。
随時更新の予定

記述環境：[VS Code](https://code.visualstudio.com/) + [Markdown Preview Enhanced](https://shd101wyy.github.io/markdown-preview-enhanced/#/ja-jp/)

**Mermaid公式関連**

* https://mermaid.js.org/
    * [Syntax Flowchart](https://mermaid.js.org/syntax/flowcharttml)
* [Mermaid Live Editor](https://mermaid.live/)

ちょっと試してみたいという場合には Mermaid Live Editor が便利

## 図形一覧

* 一覧作成時バージョン : v11.4.1

v11.3.0以降で使える拡張図形も含む。

### 拡張図形の補足

拡張図形の書き方は `id@{shape: 図形名, label: "表示文字"}`

* `shape: ` というようにコロンの後ろにはスペースが必要
* shape, label の順番は規定なし。shapeだけ、labelだけという記述も可能
* 同一idの図形の属性を複数書いた場合は上書きされていくので、従来型で書いておいてshapeだけあとで指定も可能

```mermaid
---
title : 拡張図形の記述例
---
flowchart

%% 従来の書き方
id1-a(従来)

%% 拡張図形の書き方
id1-b@{shape: rounded, label: "拡張で記述"}
id2@{label: "拡張図形", shape: doc }

%% 図形名と表示文字を別に指定
id3[従来＋拡張]
id3@{shape: delay}

%% shapeなし＝デフォルト図形
id4@{label: "shapeなし"}

%% labelなし＝idが表示
id5@{shape: card}

%% label指定しても表示されない図形
id6@{shape: bolt, label: "ラベル表示がない図形"}
```
```
---
title : 拡張図形の記述例
---
flowchart

%% 従来の書き方
id1-a(従来)

%% 拡張図形の書き方
id1-b@{shape: rounded, label: "拡張で記述"}
id2@{label: "拡張図形", shape: doc }

%% 図形名と表示文字を別に指定
id3[従来＋拡張]
id3@{shape: delay}

%% shapeなし＝デフォルト図形
id4@{label: "shapeなし"}

%% labelなし＝idが表示
id5@{shape: card}

%% label指定しても表示されない図形
id6@{shape: bolt, label: "ラベル表示がない図形"}
```

### 図形名あり一覧

図形の下に図形名を記載。
拡張でないものには、1行目に従来の記述、2行目に図形名を記載。

図形名にはAliasもあるが、ここでは１つだけを記載。

補記）
※従来記述は（見やすくするため）間に全角スペースを入れて記述。
※2か所、labelでエラーになるため、labelでは閉じ角括弧の前に半角スペースあり。
　*1-1 (さ) : `[\　\]`　*1-2 (し) : `[/　\]`

```mermaid
flowchart LR
s((0))
--> a0-1[ あ　あ]
--> a0-2( い　い)
--> a0-3([う　う])
--> a0-4[[え　え]]
--> a0-5[(お　お)]
--> c1a((1))
l0a(( ))
~~~ l0-1@{shape: text, label: "[  　  ] <br> rect"}
~~~ l0-2@{shape: text, label: "(  　  ) <br> rounded"}
~~~ l0-3@{shape: text, label: "([ 　 ]) <br> stadium"}
~~~ l0-4@{shape: text, label: "[[ 　 ]] <br> subproc"}
~~~ l0-5@{shape: text, label: "[( 　 )] <br> cyl"}
~~~ l1a(( ))

c1b((1))
--> a1-1((か　か))
--> a1-2> き　き]
--> a1-3{ く　く}
--> a1-4{{け　け}}
--> a1-5[/こ　こ/]
--> c2a((2))
l1b(( ))
~~~ l1-1@{shape: text, label: "(( 　 )) <br> circle" }
~~~ l1-2@{shape: text, label: "#gt; 　 ] <br> odd" }
~~~ l1-3@{shape: text, label: "{ 　 } <br> diamond" }
~~~ l1-4@{shape: text, label: "{{ 　 }} <br> hex" }
~~~ l1-5@{shape: text, label: "[/ 　 /] <br> lean-r" }
~~~ l2a(( ))

c2b((2))
--> a2-1[\ さ　さ\]
--> a2-2[/ し　し\]
--> a2-3[\ す　す/]
--> a2-4(((せ　せ)))
--> a2-5@{label: "そ　そ", shape: text }
--> c3a((3))

 l2-1["[\ 　 \ ]<br> lean-l<br>*1-1"]
 l2-2["[/ 　 \ ]<br> trap-b<br>*1-2"]

l2b(( ))
~~~ l2-1@{shape: text }
~~~ l2-2@{shape: text }
~~~ l2-3@{shape: text, label: "[\\ 　 /] <br> trap-t" }
~~~ l2-4@{shape: text, label: "((( 　 ))) <br> dbl-circ" }
~~~ l2-5@{shape: text, label: "<br>text" }
~~~ l3a(( ))
```
```mermaid
flowchart LR
c3b((3))
--> a3-1@{label: "た　た", shape: notch-rect }
--> a3-2@{label: "ち　ち", shape: lin-rect }
--> a3-3@{label: "つ　つ", shape: doc }
--> a3-4@{label: "て　て", shape: delay }
--> a3-5@{label: "と　と", shape: comment }
--> c4a((4))
l3b(( ))
~~~ l3-1@{shape: text, label: "notch-rect" }
~~~ l3-2@{shape: text, label: "lin-rect" }
~~~ l3-3@{shape: text, label: "doc" }
~~~ l3-4@{shape: text, label: "delay" }
~~~ l3-5@{shape: text, label: "comment" }
~~~ l4a(( ))

c4b((4))
--> a4-1@{label: "な　な", shape: brace-r }
--> a4-2@{label: "に　に", shape: braces }
--> a4-3@{label: "ぬ　ぬ", shape: das }
--> a4-4@{label: "ね　ね", shape: lin-cyl }
--> a4-5@{label: "の　の", shape: curv-trap }
--> c5a((5))
l4b(( ))
~~~ l4-1@{shape: text, label: "brace-r" }
~~~ l4-2@{shape: text, label: "braces" }
~~~ l4-3@{shape: text, label: "das" }
~~~ l4-4@{shape: text, label: "lin-cyl" }
~~~ l4-5@{shape: text, label: "curv-trap" }
~~~ l5a(( ))

c5b((5))
--> a5-1@{label: "は　は", shape: div-rect }
--> a5-2@{label: "ひ　ひ", shape: tri }
--> a5-3@{label: "ふ　ふ", shape: win-pane }
--> a5-4@{label: "へ　へ", shape: lin-doc }
--> a5-5@{label: "ほ　ほ", shape: notch-pent }
--> c6a((6))
l5b(( ))
~~~ l5-1@{shape: text, label: "div-rect" }
~~~ l5-2@{shape: text, label: "tri" }
~~~ l5-3@{shape: text, label: "win-pane" }
~~~ l5-4@{shape: text, label: "lin-doc" }
~~~ l5-5@{shape: text, label: "notch-pent" }
~~~ l6a(( ))
```

```mermaid
flowchart LR
c6b((6))
--> a6-1@{label: "ま　ま", shape: sl-rect }
--> a6-2@{label: "み　み", shape: flip-tri }
--> a6-3@{label: "む　む", shape: docs }
--> a6-4@{label: "め　め", shape: processes }
--> a6-5@{label: "も　も", shape: flag }
--> c7a((7))
l6b(( ))
~~~ l6-1@{shape: text, label: "sl-rect" }
~~~ l6-2@{shape: text, label: "flip-tri" }
~~~ l6-3@{shape: text, label: "docs" }
~~~ l6-4@{shape: text, label: "processes" }
~~~ l6-5@{shape: text, label: "flag" }
~~~ l7a(( ))

c7b((7))
--> a7-1@{label: "や　や", shape: tag-rect }
--> a7-2@{label: "＊　＊", shape: cross-circ }
--> a7-3@{label: "ゆ　ゆ", shape: bow-rect }
--> a7-4@{label: "＊　＊", shape: f-circ }
--> a7-5@{label: "よ　よ", shape: tag-doc }
--> c8a((8))
l7b(( ))
~~~ l7-1@{shape: text, label: "tag-rect" }
~~~ l7-2@{shape: text, label: "cross-circ" }
~~~ l7-3@{shape: text, label: "bow-rect" }
~~~ l7-4@{shape: text, label: "f-circ" }
~~~ l7-5@{shape: text, label: "tag-doc" }
~~~ l8a(( ))

c8b((8))
--> a9-1@{label: "１　１", shape: sm-circ }
--> a9-2@{label: "２　２", shape: framed-circle }
--> a9-3@{label: "３　３", shape: fork }
--> a9-4@{label: "４　４", shape: hourglass }
--> a9-5@{label: "５　５", shape: bolt }
--> e((9))
l8b(( ))
~~~ l9-1@{shape: text, label: "sm-circ" }
~~~ l9-2@{shape: text, label: "framed-circle" }
~~~ l9-3@{shape: text, label: "fork" }
~~~ l9-4@{shape: text, label: "hourglass" }
~~~ l9-5@{shape: text, label: "bolt" }
~~~ l9a(( ))
```

### 図形のみ一覧

```mermaid
flowchart LR
s((start))
--> a0-1[ あ　あ]
--> a0-2( い　い)
--> a0-3([う　う])
--> a0-4[[え　え]]
--> a0-5[(お　お)]
--> c1a((1))

c1b((1))
--> a1-1((か　か))
--> a1-2> き　き]
--> a1-3{ く　く}
--> a1-4{{け　け}}
--> a1-5[/こ　こ/]
--> c2a((2))

c2b((2))
--> a2-1[\ さ　さ\]
--> a2-2[/ し　し\]
--> a2-3[\ す　す/]
--> a2-4(((せ　せ)))
--> a2-5@{label: "そ　そ", shape: text }
--> c3a((3))

c3b((3))
--> a3-1@{label: "た　た", shape: notch-rect }
--> a3-2@{label: "ち　ち", shape: lin-rect }
--> a3-3@{label: "つ　つ", shape: doc }
--> a3-4@{label: "て　て", shape: delay }
--> a3-5@{label: "と　と", shape: comment }
--> c4a((4))

c4b((4))
--> a4-1@{label: "な　な", shape: brace-r }
--> a4-2@{label: "に　に", shape: braces }
--> a4-3@{label: "ぬ　ぬ", shape: das }
--> a4-4@{label: "ね　ね", shape: lin-cyl }
--> a4-5@{label: "の　の", shape: curv-trap }
--> c5a((5))

c5b((5))
--> a5-1@{label: "は　は", shape: div-rect }
--> a5-2@{label: "ひ　ひ", shape: tri }
--> a5-3@{label: "ふ　ふ", shape: win-pane }
--> a5-4@{label: "へ　へ", shape: lin-doc }
--> a5-5@{label: "ほ　ほ", shape: notch-pent }
--> c6a((6))

c6b((6))
--> a6-1@{label: "ま　ま", shape: sl-rect }
--> a6-2@{label: "み　み", shape: flip-tri }
--> a6-3@{label: "む　む", shape: docs }
--> a6-4@{label: "め　め", shape: processes }
--> a6-5@{label: "も　も", shape: flag }
--> c7a((7))

c7b((7))
--> a7-1@{label: "や　や", shape: tag-rect }
--> a7-2@{label: "＊　＊", shape: cross-circ }
--> a7-3@{label: "ゆ　ゆ", shape: bow-rect }
--> a7-4@{label: "＊　＊", shape: f-circ }
--> a7-5@{label: "よ　よ", shape: tag-doc }
--> c8a((8))

c8b((8))
--> a9-1@{label: "１　１", shape: sm-circ }
--> a9-2@{label: "２　２", shape: framed-circle }
--> a9-3@{label: "３　３", shape: fork }
--> a9-4@{label: "４　４", shape: hourglass }
--> a9-5@{label: "５　５", shape: bolt }
--> e((end))
```

### 図形のみのソース

```
flowchart LR
s((start))
--> a0-1[ あ　あ]
--> a0-2( い　い)
--> a0-3([う　う])
--> a0-4[[え　え]]
--> a0-5[(お　お)]
--> c1a((1))

c1b((1))
--> a1-1((か　か))
--> a1-2> き　き]
--> a1-3{ く　く}
--> a1-4{{け　け}}
--> a1-5[/こ　こ/]
--> c2a((2))

c2b((2))
--> a2-1[\ さ　さ\]
--> a2-2[/ し　し\]
--> a2-3[\ す　す/]
--> a2-4(((せ　せ)))
--> a2-5@{label: "そ　そ", shape: text }
--> c3a((3))

c3b((3))
--> a3-1@{label: "た　た", shape: notch-rect }
--> a3-2@{label: "ち　ち", shape: lin-rect }
--> a3-3@{label: "つ　つ", shape: doc }
--> a3-4@{label: "て　て", shape: delay }
--> a3-5@{label: "と　と", shape: comment }
--> c4a((4))

c4b((4))
--> a4-1@{label: "な　な", shape: brace-r }
--> a4-2@{label: "に　に", shape: braces }
--> a4-3@{label: "ぬ　ぬ", shape: das }
--> a4-4@{label: "ね　ね", shape: lin-cyl }
--> a4-5@{label: "の　の", shape: curv-trap }
--> c5a((5))

c5b((5))
--> a5-1@{label: "は　は", shape: div-rect }
--> a5-2@{label: "ひ　ひ", shape: tri }
--> a5-3@{label: "ふ　ふ", shape: win-pane }
--> a5-4@{label: "へ　へ", shape: lin-doc }
--> a5-5@{label: "ほ　ほ", shape: notch-pent }
--> c6a((6))

c6b((6))
--> a6-1@{label: "ま　ま", shape: sl-rect }
--> a6-2@{label: "み　み", shape: flip-tri }
--> a6-3@{label: "む　む", shape: docs }
--> a6-4@{label: "め　め", shape: processes }
--> a6-5@{label: "も　も", shape: flag }
--> c7a((7))

c7b((7))
--> a7-1@{label: "や　や", shape: tag-rect }
--> a7-2@{label: "＊　＊", shape: cross-circ }
--> a7-3@{label: "ゆ　ゆ", shape: bow-rect }
--> a7-4@{label: "＊　＊", shape: f-circ }
--> a7-5@{label: "よ　よ", shape: tag-doc }
--> c8a((8))

c8b((8))
--> a9-1@{label: "１　１", shape: sm-circ }
--> a9-2@{label: "２　２", shape: framed-circle }
--> a9-3@{label: "３　３", shape: fork }
--> a9-4@{label: "４　４", shape: hourglass }
--> a9-5@{label: "５　５", shape: bolt }
--> e((end))
```


## 矢印の種類と長さ

### 矢印の種類

公式ドキュメントでは `---` は矢印ではなく接続線になるとあるが、`-->` と同じ矢印になるため載せていません。
Mermaid Live Editorでも `---` と `-->` は同じ矢印になります。

```mermaid
flowchart LR
a-1  --> a-2  <--> a-3  ==> a-4  <==> a-5
b-1  --o b-2  o--o b-3  ==o b-4  o==o b-5
c-1  --x c-2  x--x c-3  ==x c-4  x==x c-5

%% 破線
d-1 -.-> d-2 <-.-> d-3

%% テキスト付リンク
e-1 --> |一方| e-2 <--> |双方| e-3

%% 矢印なし
f-1 ~~~ f-2 ~~~ |線なし| f-3
```

```
flowchart LR
a-1  --> a-2  <--> a-3  ==> a-4  <==> a-5
b-1  --o b-2  o--o b-3  ==o b-4  o==o b-5
c-1  --x c-2  x--x c-3  ==x c-4  x==x c-5

%% 破線
d-1 -.-> d-2 <-.-> d-3

%% テキスト付リンク
e-1 --> |一方| e-2 <--> |双方| e-3

%% 矢印なし
f-1 ~~~ f-2 ~~~ |線なし| f-3
```

### 矢印の長さ
```mermaid
flowchart LR
a-1 --> |1| a-2  --> a-3  --> a-4 --> a-5 
b-1 ---> |2| b-2
c-1 ----> |3| c-2
d-1 -----> |4| d-2

e-1 =====> |4| e-2
f-1 ~~~~~~ |4| f-2

%% 破線は . の数が長さ
g-1 -....-> |4| g-2
```

```
flowchart LR
a-1 --> |1| a-2  --> a-3  --> a-4 --> a-5 
b-1 ---> |2| b-2
c-1 ----> |3| c-2
d-1 -----> |4| d-2

e-1 =====> |4| e-2
f-1 ~~~~~~ |4| f-2

%% 破線は . の数が長さ
g-1 -....-> |4| g-2
```


## やってみた：矢印と配置

### １箇所つないだ時の配置

* ベース

```mermaid
flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4)
```

```:mermaid
flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4)
```


#### 1. a, b の同じ番号をつなぐ

配置方向横で上下の図形への接続は、図形の配置がずれて斜め上・斜め下の矢印になる。

* a1 → b1

```mermaid
flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4)

a1 --> b1
```

```
flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4)

a1 --> b1
```

* b2 → a2

```mermaid
flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4)

a2 --> b2
```

```
flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4)

a2 --> b2
```

* a3 → b3

```mermaid
flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4)

a3 --> b3
```

```
flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4)

a3 --> b3
```

* a4 → b4

```mermaid
flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4)

a4 --> b4
```

```
flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4)

a4 --> b4
```

#### 2. a, b の1番違いをつなぐ

斜め下、斜め上への矢印はまっすぐ斜め下・上の矢印になる。

* a1 → b2

```mermaid
flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4)

a1 --> b2
```

```
flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4)

a1 --> b2
```

* b2 → a3

```mermaid
flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4)

b2 --> a3
```

```
flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4)

b2 --> a3
```

### ２箇所つないだ時の配置

矢印の記述の仕方・位置でどう配置が変わるかみてみた

* ベース

```mermaid
flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4] --> a5[a-5]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4) --> b5(b-5)
```

```
flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4] --> a5[a-5]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4) --> b5(b-5)
```

#### まとめて記述 1.最後

```mermaid
flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4] --> a5[a-5]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4) --> b5(b-5)

a1 --> b3 --> a5
```

```
flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4] --> a5[a-5]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4) --> b5(b-5)

a1 --> b3 --> a5
```

b2 → b3 の記述より後に a1 → b3 を書いたためか？

#### まとめて記述 2.最初

```mermaid
flowchart LR

a1 --> b3 --> a5

a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4] --> a5[a-5]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4) --> b5(b-5)
```

```
flowchart LR

a1 --> b3 --> a5

a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4] --> a5[a-5]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4) --> b5(b-5)
```

#### まとめて記述 3.間

```mermaid
flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4] --> a5[a-5]

a1 --> b3 --> a5

b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4) --> b5(b-5)
```

```
flowchart LR
a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4] --> a5[a-5]

a1 --> b3 --> a5

b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4) --> b5(b-5)
```

#### 分けて記述 1.最初と最後

```mermaid
flowchart LR

a1 --> b3

a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4] --> a5[a-5]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4) --> b5(b-5)

b3 --> a5
```

```
flowchart LR
a1 --> b3

a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4] --> a5[a-5]
b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4) --> b5(b-5)

b3 --> a5
```

#### 分けて記述 2.最初と間

```mermaid
flowchart LR

a1 --> b3

a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4] --> a5[a-5]

b3 --> a5

b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4) --> b5(b-5)
```

```
flowchart LR

a1 --> b3

a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4] --> a5[a-5]

b3 --> a5

b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4) --> b5(b-5)
```

#### 分けて記述 3.間と最後

```mermaid
flowchart LR

a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4] --> a5[a-5]

a1 --> b3

b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4) --> b5(b-5)

b3 --> a5
```

```
flowchart LR

a1[a-1] --> a2[a-2] --> a3[a-3] --> a4[a-4] --> a5[a-5]

a1 --> b3

b1(b-1) --> b2(b-2) --> b3(b-3) --> b4(b-4) --> b5(b-5)

b3 --> a5
```



## サンプル：凡例 - スタイル（クラス）

### 図形の線　図形凡例

図形を使い分けるのが面倒になって、基本 `[ a ]` で書いておいて

* これは共通処理だな　　： `[ a ]` → `[[ b ]]`
* ここは固有だけど分ける： `[ a ]` → `[ c ]:::FUNC`
* これは外部モジュール　： `[ a ]` → `[ d ]:::UTIL`

みたいなかんじで線のスタイルで分けることが多いです、
どれが何かを決めるとき＆サンプルとして書く凡例のサンプル。

```mermaid
---
title: 図形凡例
---
flowchart

a[ a.処理 ]
b[[b.内部共通処理]]
c[ c.内部固有処理 ]:::FUNC
d[ d.外部共通処理 ]:::UTIL

classDef FUNC stroke-width:4
classDef UTIL stroke-dasharray:8 8
```

```
---
title: 図形凡例
---
flowchart

a[ a.処理 ]
b[[b.内部共通処理]]
c[ c.内部固有処理 ]:::FUNC
d[ d.外部共通処理 ]:::UTIL

classDef FUNC stroke-width:4
classDef UTIL stroke-dasharray:8 8
```


### 図形の色　色凡例

色で分けることはほぼしていません。

* 人に説明などするときのポイント
* todo（課題とか検討中とか）

などを一時的に目立たせるために色をつけることがある程度。

```mermaid
---
title: 色凡例
---
flowchart 

A[あとで考える]:::TODO
B[ポイント]:::PT
N[通常]

%% 配色参考
C[参考１]:::classC
D[参考２]:::classD

classDef TODO fill:plum
classDef PT fill:skyblue

classDef classC fill:steelblue, color:#FFF
classDef classD stroke:black
```

```
---
title: 色凡例
---
flowchart 

A[あとで考える]:::TODO
B[ポイント]:::PT
N[通常]

%% 配色参考
C[参考１]:::classC
D[参考２]:::classD

classDef TODO fill:plum
classDef PT fill:skyblue

classDef classC fill:steelblue, color:#FFF
classDef classD stroke:black
```


### 文字の配置　記述凡例

図形内の文字の配置は中央揃え。
左揃えにしたい箇所があるときにスタイルを使用。

```mermaid
---
title: ログ出力処理記述　凡例
---
flowchart LR

a[[ログ出力<br>①, ②, ③]]

com0@{shape: text, label: "①レベル
②イベント番号
③詳細出力
" }

com1@{shape: comment, label: "①レベル<br>
・E … Error
・W … Warn
・I … Info
" }

com3@{shape: comment, label: "③詳細出力<br>
・ON … ダンプ出力あり
・OFF … ダンプ出力なし
<br>" }

a ~~~ com0:::LEFT
com1:::LEFT ~~~ com3:::LEFT

classDef LEFT text-align:left
```

```mermaid
---
title: ログ出力処理記述　記述例
---
flowchart 

a1[[ログ出力<br>I, 1001, OFF]]
a2[[ログ出力<br>W, 5001, OFF]]
a3[[ログ出力<br>E, 9999, ON]]

```

```
---
title: ログ出力処理記述　凡例
---
flowchart LR

a[[ログ出力<br>①, ②, ③]]

com0@{shape: text, label: "①レベル
②イベント番号
③詳細出力
" }

com1@{shape: comment, label: "①レベル<br>
・E … Error
・W … Warn
・I … Info
" }

com3@{shape: comment, label: "③詳細出力<br>
・ON … ダンプ出力あり
・OFF … ダンプ出力なし
<br>" }

a ~~~ com0:::LEFT
com1:::LEFT ~~~ com3:::LEFT

classDef LEFT text-align:left
```

```
---
title: ログ出力処理記述　記述例
---
flowchart 

a1[[ログ出力<br>I, 1001, OFF]]
a2[[ログ出力<br>W, 5001, OFF]]
a3[[ログ出力<br>E, 9999, ON]]

```

### スタイル（クラス）使用例

```mermaid
---
title : クラス使用例
---
flowchart
s((start))
e((end))

s --> a[処理A]:::FUNC --> if1{処理結果}
c1(( )) --> e

if1 --> |1| a1-1[処理1-1] --> a1-2[処理1-2] --> a1-3[処理1-3]  --> c1
if1 ---> |2| a2-1[処理1-2] --> a2-2[処理1-3] --> a2-3[処理2-1] --> a2-4[処理2-2] --> c1
if1 --> |3| a3-1[処理3] --> a3-2[★3<br>処理4]:::PT --> a3-3[★2<br>処理5]:::TODO --> c1
if1 --> |その他| o1[異常処理]:::PT --> a3-2

n1:::TODO
com1[★1　検討
共通？関数化？]
subgraph n1[ ]
 a2-1
 a2-2
 a1-2
 a1-3
 com1@{shape: text }
end


com2[★2,★3　確認
異常時も処理4が必要
処理5は呼んでいい？
処理4,5の順序も確認
]
com2:::LEFT
subgraph n2[ ]
 a3-2
 a3-3
 com2@{shape: text }
end

classDef FUNC stroke-width:4

classDef LEFT text-align:left

classDef TODO fill:plum
classDef PT fill:skyblue
```


```
---
title : クラス利用例
---
flowchart
s((start))
e((end))

s --> a[処理A]:::FUNC --> if1{処理結果}
c1(( )) --> e

if1 --> |1| a1-1[処理1-1] --> a1-2[処理1-2] --> a1-3[処理1-3]  --> c1
if1 ---> |2| a2-1[処理1-2] --> a2-2[処理1-3] --> a2-3[処理2-1] --> a2-4[処理2-2] --> c1
if1 --> |3| a3-1[処理3] --> a3-2[★3<br>処理4]:::PT --> a3-3[★2<br>処理5]:::TODO --> c1
if1 --> |その他| o1[異常処理]:::PT --> a3-2

n1:::TODO
com1[★1　検討
共通？関数化？]
subgraph n1[ ]
 a2-1
 a2-2
 a1-2
 a1-3
 com1@{shape: text }
end

com2[★2,★3　確認
異常時も処理4が必要
処理5は呼んでいい？
処理4,5の順序も確認
]
com2:::LEFT
subgraph n2[ ]
 a3-2
 a3-3
 com2@{shape: text }
end

classDef FUNC stroke-width:4

classDef LEFT text-align:left

classDef TODO fill:plum
classDef PT fill:skyblue
```

## サンプル：フローチャート

`flowchart` で描くものの本命。

### サンプル１

* 横：右方向 (LR)

```mermaid
flowchart LR
s((start))
e((end))

s --> a1[前処理] --> if1{分岐1}

if1 --> |case 1| f1-1[[関数1-1]] --> f1-2[[関数1-2]] ---> c1
if1 --> |case 2| if2{分岐2}

c2(( )) --> c1
if2 --> |case 2-1| f2-1[[関数2-1]] --> c2
if2 --> |case 2-2| f2-2[[関数2-2]] --> c2
if2 --> |case 2-3| f2-3[[関数2-3]] --> c2

c1(( )) --> a2[後処理] --> e
```

* 縦 (TB)

```mermaid
flowchart TB
s((start))
e((end))

s --> a1[前処理] --> if1{分岐1}

if1 --> |case 1| f1-1[[関数1-1]] --> f1-2[[関数1-2]] ---> c1
if1 --> |case 2| if2{分岐2}

c2(( )) --> c1
if2 --> |case 2-1| f2-1[[関数2-1]] --> c2
if2 --> |case 2-2| f2-2[[関数2-2]] --> c2
if2 --> |case 2-3| f2-3[[関数2-3]] --> c2

c1(( )) --> a2[後処理] --> e
```

* ソース

```
flowchart LR
s((start))
e((end))

s --> a1[前処理] --> if1{分岐1}

if1 --> |case 1| f1-1[[関数1-1]] --> f1-2[[関数1-2]] ---> c1
if1 --> |case 2| if2{分岐2}

c2(( )) --> c1
if2 --> |case 2-1| f2-1[[関数2-1]] --> c2
if2 --> |case 2-2| f2-2[[関数2-2]] --> c2
if2 --> |case 2-3| f2-3[[関数2-3]] --> c2

c1(( )) --> a2[後処理] --> e
```


### サンプル２：フロー分割してみる

長いフローを分割してみる。
機能分割ではなく、長さ調整のための分割です。

#### すべて接続

```mermaid
flowchart LR
s((start))
e((end))

s --> a1[処理1] --> if1{分岐1}

if1 --> a2-10[処理2-10] --> a2-11[処理2-11]  --> c1a
if1 --> a2-20[処理2-20] ---> c1a

c1a(( ))
--> a3[処理3]
--> f1[[関数1]]
--> if2{分岐2}

if2 --> c3a
if2 --> f2[[関数2]] --> a4[処理4]
    --> f3[[関数3]] --> f4[[関数4]]
--> c3a(( ))
--> e
```

```
flowchart LR
s((start))
e((end))

s --> a1[処理1] --> if1{分岐1}

if1 --> a2-10[処理2-10] --> a2-11[処理2-11]  --> c1a
if1 --> a2-20[処理2-20] ---> c1a

c1a(( ))
--> a3[処理3]
--> f1[[関数1]]
--> if2{分岐2}

if2 --> c2a
if2 --> f2[[関数2]] --> a4[処理4]
    --> f3[[関数3]] --> f4[[関数4]]
--> c2a(( ))
--> e
```

#### 2分割

ポイントは、同じ幅または前半の方が短くなるように分割すること。
関数1を前半に入れると、前半と後半の配置が逆転します。

```mermaid
flowchart LR
s((start))
e((end))

s --> a1[処理1] --> if1{分岐1}

if1 --> a2-10[処理2-10] --> a2-11[処理2-11]  --> c1a
if1 --> a2-20[処理2-20] ---> c1a

c1a(( ))
--> a3[処理3]
--> cAa((1))

%% 分割

cAb((1))
--> f1[[関数1]]
--> if2{分岐2}

if2 --> c2a
if2 --> f2[[関数2]] --> a4[処理4]
    --> f3[[関数3]] --> f4[[関数4]]
--> c2a(( ))
--> e
```


```
flowchart LR
s((start))
e((end))

s --> a1[処理1] --> if1{分岐1}

if1 --> a2-10[処理2-10] --> a2-11[処理2-11]  --> c1a
if1 --> a2-20[処理2-20] ---> c1a

c1a(( ))
--> a3[処理3]
--> cAa((1))

%% 分割

cAb((1))
--> f1[[関数1]]
--> if2{分岐2}

if2 --> c2a
if2 --> f2[[関数2]] --> a4[処理4]
    --> f3[[関数3]] --> f4[[関数4]]
--> c2a(( ))
--> e
```

#### 3分割

```mermaid
flowchart LR
s((start))
e((end))

s --> a1[処理1] --> if1{分岐1}

if1 --> a2-10[処理2-10] --> a2-11[処理2-11]  --> c1a
if1 --> a2-20[処理2-20] ---> c1a

c1a((1))
%% 分割

c1b((1))
--> a3[処理3]
---> f1[[関数1]]
--> if2{分岐2}

if2 --> c3a((2))
if2 --> c2a

c3b((2))
--> f2[[関数2]] --> a4[処理4]
    --> f3[[関数3]] --> f4[[関数4]]
--> c2a(( ))
--> e
```


```
flowchart LR
s((start))
e((end))

s --> a1[処理1] --> if1{分岐1}

if1 --> a2-10[処理2-10] --> a2-11[処理2-11]  --> c1a
if1 --> a2-20[処理2-20] ---> c1a

c1a((1))
%% 分割

c1b((1))
--> a3[処理3]
---> f1[[関数1]]
--> if2{分岐2}

if2 --> c3a((2))
if2 --> c2a

c3b((2))
--> f2[[関数2]] --> a4[処理4]
    --> f3[[関数3]] --> f4[[関数4]]
--> c2a(( ))
--> e
```

#### 【おまけ】すべて接続（縦）

```mermaid
flowchart TB
s((start))
e((end))

s --> a1[処理1] --> if1{分岐1}

if1 --> a2-10[処理2-10] --> a2-11[処理2-11]  --> c1a
if1 --> a2-20[処理2-20] ---> c1a

c1a(( ))
--> a3[処理3]
--> f1[[関数1]]
--> if2{分岐2}

if2 --> c3a
if2 --> f2[[関数2]] --> a4[処理4]
    --> f3[[関数3]] --> f4[[関数4]]
--> c3a(( ))
--> e
```



## サンプル：その他

`flowchart` で描いているけどフローチャートではないもの。


### 構成パターンみたいなの

（当たり前ですが）そのまま載せるわけにはいかないので、
ラベルを全く別のそれっぽいものにした結果、
何だかよくわからない図になりました。

構成１：監視 2 / 実処理 2、各1処理

```mermaid
---
title : 構成１
---
flowchart LR
subgraph L2[監視機能２]
  L2-c1((L2))
end
subgraph L1[監視機能１]
  L1-c1((L1))
end

subgraph p2[実処理機能２]
  p2-c1((c2))
end
subgraph p1[実処理機能１]
  p1-c1((c1))
end

L2-c1 --> p2-c1
L1-c1 --> p1-c1

```

構成２：監視 1 / 実処理 2、計3処理


```mermaid
---
title : 構成２
---
flowchart LR

subgraph L1[監視機能]
  L1-c1((L1))
end

subgraph p1[実処理機能２]
  p1-c1((c2))
  p1-c2((c3))
end

subgraph p2[実処理機能１]
  p2-c1((c1))
end

L1-c1 --> p1-c1 & p1-c2 & p2-c1

```


構成３：監視 2 / 実処理 3、計4処理


```mermaid
---
title : 構成３
---
flowchart LR

subgraph L2[監視機能２]
  L2-c1((L2))
end
subgraph L1[監視機能１]
  L1-c1((L1))
end

subgraph p1[実処理機能１]
  p1-c1((c1))
end
subgraph p3[実処理機能３]
  p3-c1((c4))
end
subgraph p2[実処理機能２]
  p2-c1((c2))
  p2-c2((c3))
end

L1-c1 --> p1-c1 & p2-c1
L2-c1 --> p2-c2 & p3-c1

```