Mermaidチートシート【フローチャート編】

# はじめに
とあるプロジェクトで情報共有の1つとして，GithubでMermaidを利用する機会がありました．意外とMermaidを（日本語で）まとめている記事が少なかったので，この機会にまとめたいと思います．
長くなり，編集時にエラーが発生するようになったので，本記事ではフローチャートのみを取り扱います．（もしかしてMermaidを沢山載せているのが原因かも？）

:::note
最新の情報は[公式ドキュメント](https://mermaid.js.org/)を参照して下さい．
- [About Mermaid](https://mermaid.js.org/intro/)
- [Flowcharts - Basic Syntax](https://mermaid.js.org/syntax/flowchart.html?id=flowcharts-basic-syntax)
:::

ちなみに，こういう図が扱えます．（例はテキトーです．）

```mermaid
flowchart LR
    start[スタート] --> judge{条件判定}
    subgraph operate
        ope1[操作1]
        ope2[操作2]
        ope1 --> ope2
        end
    judge -->|no|ope1
    ope2 --> judge
    judge ---->|yes|End[ゴール]
```


# [ノードの作成](https://mermaid.js.org/syntax/flowchart.html?id=flowcharts-basic-syntax#a-node-default)
```: node
flowchart
    id1[text]
    id2["Unicode ★ text"] 
    id3["`Markdown 
        text`"]
```

```mermaid
flowchart
    id1[text]
    id2["Unicode ★ text"]
    id3["`Markdown 
        text`"]
```

# [ノード間のリンク](https://mermaid.js.org/syntax/flowchart.html?id=flowcharts-basic-syntax#links-between-nodes)

## 矢印
```: arrow
flowchart
    id1[node1]
    id2[node2]
    id1 --> id2
```

```mermaid
flowchart
    id1[node1]
    id2[node2]
    id1 --> id2
```

## 丸矢印
```: circle
flowchart
    id1[node1]
    id2[node2]
    id1 --o id2
```

```mermaid
flowchart
    id1[node1]
    id2[node2]
    id1 --o id2
```

## バツ矢印
```: cross
flowchart
    id1[node1]
    id2[node2]
    id1 --x id2
```

```mermaid
flowchart
    id1[node1]
    id2[node2]
    id1 --x id2
```

## 双方向矢印
```: bidirectional
flowchart
    id1[node1]
    id2[node2]
    id1 <--> id2
```

```mermaid
flowchart
    id1[node1]
    id2[node2]
    id1 <--> id2
```


## 線
```: line
flowchart
    id1[node1]
    id2[node2]
    id1 --- id2
```

```mermaid
flowchart
    id1[node1]
    id2[node2]
    id1 --- id2
```
    
## 点線
```: dot
flowchart
    id1[node1]
    id2[node2]
    id1 -.- id2
```

```mermaid
flowchart
    id1[node1]
    id2[node2]
    id1 -.- id2
```

## 太線
```: thick
flowchart
    id1[node1]
    id2[node2]
    id1 === id2
```

```mermaid
flowchart
    id1[node1]
    id2[node2]
    id1 === id2
```

## 不可視のリンク
```: invisible
flowchart
    id1[node1]
    id2[node2]
    id3[node3]
    id1 ~~~ id2
    id1 --> id3
```

```mermaid
flowchart
    id1[node1]
    id2[node2]
    id3[node3]
    id1 ~~~ id2
    id1 --> id3
```

:::note
ノードの位置関係を揃えたいけど，線は引きたくないというときに利用する．
:::
    
## テキストを挿入
```: arrow
flowchart
    id1[node1]
    id2[node2]
    id1-->|text|id2
```

```mermaid
flowchart
    id1[node1]
    id2[node2]
    id1-->|text|id2
```

## リンクの連鎖
```: series
flowchart
    id1[node1]
    id2[node2]
    id3[node3]
    id1 --> id2 --> id3
```

```mermaid
flowchart
    id1[node1]
    id2[node2]
    id3[node3]
    id1 --> id2 --> id3
```

```: parallel
flowchart
    id1[node1]
    id2[node2]
    id3[node3]
    id1 --> id2 & id3
```

```mermaid
flowchart
    id1[node1]
    id2[node2]
    id3[node3]
    id1 --> id2 & id3
```

:::note
ノードの複数のリンクを簡潔に記述するのに便利．

```: comparison
flowchart
    id1[node1]
    id2[node2]
    id3[node3]
    id4[node4]
    id1 --> id3 
    id1 --> id4
    id2 --> id3
    id2 --> id4
```

これを並列で書くと以下の通り．

```: comparison
flowchart
    id1[node1]
    id2[node2]
    id3[node3]
    id4[node4]
    id1 & id2 --> id3 & id4 
```

いずれも以下のような出力になります．

```mermaid
flowchart
    id1[node1]
    id2[node2]
    id3[node3]
    id4[node4]
    id1 --> id3 
    id1 --> id4
    id2 --> id3
    id2 --> id4
```
:::

# [グラフの方向](https://mermaid.js.org/syntax/flowchart.html?id=flowcharts-basic-syntax#direction)
```: top2bottom 
flowchart TB
    id1[text1]
    id2[text2]
    id1 --> id2
```

```mermaid 
flowchart TB
    id1[text1]
    id2[text2]
    id1 --> id2
```


```: bottom2top 
flowchart BT
    id1[text1]
    id2[text2]
    id1 --> id2
```

```mermaid 
flowchart BT
    id1[text1]
    id2[text2]
    id1 --> id2
```


```: right2left 
flowchart RL
    id1[text1]
    id2[text2]
    id1 --> id2
```

```mermaid 
flowchart RL
    id1[text1]
    id2[text2]
    id1 --> id2
```


```: left2right 
flowchart LR
    id1[text1]
    id2[text2]
    id1 --> id2
```

```mermaid 
flowchart LR
    id1[text1]
    id2[text2]
    id1 --> id2
```

|タグ|説明|
|:-:|:-|
|TB|Top to Bottom（上から下へ）|
|TD|Top Down（上から下へ）|
|BT|Bottom to Top（下から上へ）|
|RL|Right to Left（右から左へ）|
|LR|Left to Right（左から右へ）|


# [ノードの形状](https://mermaid.js.org/syntax/flowchart.html?id=flowcharts-basic-syntax#node-shapes)

## 四角形
```: box
flowchart 
    box[四角形]
```

```mermaid
flowchart 
    box[四角形]
```

## 角丸四角形
```: round_box
flowchart 
    round_box(角丸四角形)
```

```mermaid
flowchart 
    round_box(角丸四角形)
```

## スタジアム形
```: stadium
flowchart 
    stadium([スタジアム形])
```

```mermaid
flowchart 
    stadium([スタジアム形])
```

## サブルーチン
```: subroutine
flowchart 
    subroutine[[サブルーチン]]
```

```mermaid
flowchart 
    subroutine[[サブルーチン]]
```

## 円筒形
```: cylindrical
flowchart 
    cylindrical[(円筒形)]
```

```mermaid
flowchart 
    cylindrical[(円筒形)]
```

## 円形
```: circle
flowchart 
    circle((円形))
```

```mermaid
flowchart 
    circle((円形))
```

## 非対称形
```: asymmetric
flowchart 
    asymmetric>非対称形]
```

```mermaid
flowchart 
    asymmetric>非対称形]
```

## 斜方形
```: rhombus
flowchart 
    rhombus{斜方形}
```

```mermaid
flowchart 
    rhombus{斜方形}
```

## 六角形
```: hexagon
flowchart 
    hexagon{{六角形}}
```

```mermaid
flowchart 
    hexagon{{六角形}}
```

## 平行四辺形 & 台形
```: parallelogram_and_trapezoid
flowchart 
    parallelogram[/平行四辺形/]
    parallelogram_alt[\平行四辺形\]
    trapezoid[/台形\]
    trapezoid_alt[\台形/]
```

```mermaid
flowchart 
    parallelogram[/平行四辺形/]
    parallelogram_alt[\平行四辺形\]
    trapezoid[/台形\]
    trapezoid_alt[\台形/]
```

## 二重円
```: double_circle
flowchart 
    double_circle(((二重円)))
```

```mermaid
flowchart 
    double_circle(((二重円)))
```