Qiitaでフローチャート with mermaid

# Qiitaでフローチャート with **mermaid**

__参照元__

https://qiita.com/duora0406/items/fce45aeb0bb9c726e14a

https://qiita.com/Qiita/items/c07f3262d8f3b25f06c9

https://qiita.com/Yorozuya59/items/c43eb68586756a64e3db


:::note
この記事で例に挙げているのは 主に**タテのフローチャート**
:::

## はじめに 〜記事構成〜
大まかに２部構成、そのなかにコード例と出力例(順序はちがっても)

__コード例と表示のセット__
- 基本の構成
    - コード例: コード部(Markdownのコードブロック)
    - 出力例: Qiitaでの表示

のセットで書いてます。


その後、<font color=tomato>どんなのが生成できるか具体的にイメージできる</font>ものとして、

__作成例｢🌀○○図｣__
｢🌀○○図｣、｢🌀○□図｣、｢🌀□△図｣など具体例(とコード)が続く。


<font color=darkgray>⚠︎作成例の ｢🌀○○図｣、｢🌀○□図｣、｢🌀□△図｣などは、 参照元などのからコピペしたものだったと思います</font>



### フロー図の 矢印 ↓→ 向き

`flowchart TB` …上から下 `flowchart DT`でも ※**タテのフローチャート**
`flowchart BT` … 下から上
`flowchart LR` … 左から右
`flowchart RL` … 右から左


## ✴️ コード例と表示のセット

### コード例：
~~~
```mermaid
flowchart TB //「flowchart xx」の「xx」の部分によってフロー図の向き
    A[起床] --> B[顔を洗う] -->
    C{眠い?} -- 眠くない --> D[朝食を食べる]
    C{眠い?} -- 眠い --> E[二度寝する] -- 起きる --> C{眠い?}
    D[朝食を食べる] --> 
    F[歯を磨く] -->
    G((やっぱり寝る))
```
~~~

### 出力結果：

```mermaid
flowchart TB
    A[起床] --> B[顔を洗う] -->
    C{眠い?} -- 眠くない --> D[朝食を食べる]
    C{眠い?} -- 眠い --> E[二度寝する] -- 起きる --> C{眠い?}
    D[朝食を食べる] --> 
    F[歯を磨く] -->
    G((やっぱり寝る))
```



## 線・矢印の種類
各ノード間の線種(矢印の)
~~~
```mermaid
flowchart TB　
    A[ノード1] --> B[ノード2] --> C[ノード3]
               ↑
               ここの「-->」を編集する。
```
~~~

`A-->B`	実線 矢印
`A==>B`	太線 矢印
`A-.->B`	点線 矢印
`A---B`	実線
`A===B`	太線
`A--oB`	丸矢印
`A--xB`	✖︎バツ矢印
`A<-->B` 双方向矢印
`A~~~B` 不可視のリンク ※ノードの位置関係を揃えたいけど，線は引きたくないというとき
`A-->|text|B` テキスト挿入

### コード例＠線・矢印

~~~
```mermaid
flowchart TB
    A[Start] --> B[Stop]
    C[Start] ==> D[Stop]
    E[Start] -.-> F[Stop]
    G[Start] --- H[Stop]
    I[Start] === J[Stop]
```
```mermaid
flowchart TB
    K[Start] --o L[Stop]
    M[Start] --x N[Stop]
    O[Start] <--> P[Stop]

    id1[node1]
    id2[node2]
    id3[node3]
    id1 ~~~ id2
    id1 --> id3

    A-->|text|B
``` 
~~~
### 表示＠線・矢印
```mermaid
flowchart TB
    A[Start] --> B[Stop]
    C[Start] ==> D[Stop]
    E[Start] -.-> F[Stop]
    G[Start] --- H[Stop]
    I[Start] === J[Stop]
```
```mermaid
flowchart TB
    K[Start] --o L[Stop]
    M[Start] --x N[Stop]
    O[Start] <--> P[Stop]

    id1[node1]
    id2[node2]
    id3[node3]
    id1 ~~~ id2
    id1 --> id3

    A-->|text|B
``` 

### コード例＠リンク連鎖

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

    A[node1]
    B[node2]
    C[node3]
    A --> B & C

    D[node1]
    E[node2]
    F[node3]
    G[node4]
    D & E --> F & G 
```
~~~
### 表示＠リンク連鎖
```mermaid
flowchart
    id1[node1]
    id2[node2]
    id3[node3]
    id1 --> id2 --> id3

    A[node1]
    B[node2]
    C[node3]
    A --> B & C

    D[node1]
    E[node2]
    F[node3]
    G[node4]
    D & E --> F & G 
```


## ノードの形

長方形か菱形かなど
~~~
```mermaid
flowchart TB　
    A[ノード1] --> B[ノード2] --> C[ノード3]
     ↑      ↑
     ここの[ ]を編集する。
```
~~~

`A[]`	長方形  
`A{}`	ひし形
`A()`	長方形(角が丸い)
`A([])`	楕円
`A(())`	円

`A[/\]`	台形
`A[()]`	円柱みたいなの

### コード例＠ノードの形
~~~
```mermaid
flowchart 
A[長方形]
B{ひし形}
C(角が丸い長方形)
D([楕円])
```
~~~
~~~
```mermaid
flowchart
E((円))
F[/台形\]
G[(円柱)]
``` 
~~~
### 出力例＠ノードの形
```mermaid
flowchart 
A[長方形]
B{ひし形}
C(角が丸い長方形)
D([楕円])
``` 

```mermaid
flowchart 
E((円))
F[/台形\]
G[(円柱)]
```



## ✴️ 作成例｢🌀○○図｣

### 🌀フローチャート図
処理の流れ、条件分岐、手順やプロセスなどを表現する時

__例1：ロジック__
```mermaid
graph TB
  Start([Start])-->B{if a > b}
  B-->|True| End
  B-->|False| IFS[/while\]
  IFS-->C[a++]
  C-->IFB[\  /]
  IFB-->End([End])
```
コードこう書く
~~~
```mermaid
graph TB
  Start([Start])-->B{if a > b}
  B-->|True| End
  B-->|False| IFS[/while\]
  IFS-->C[a++]
  C-->IFB[\  /]
  IFB-->End([End])
```
~~~

---

__例2：システム構成__
```mermaid
flowchart TB
  User-->LB[Load Balancer]
  LB--> Web1[Web Server] & Web2[Web Server]
  Web1 & Web2 --> DB[(Database)]
```
コードこう書く
~~~
```mermaid
flowchart TB
  User-->LB[Load Balancer]
  LB--> Web1[Web Server] & Web2[Web Server]
  Web1 & Web2 --> DB[(Database)]
```
~~~


### 🌀シーケンス図
フローチャートよりも時間軸に沿ったものの表現に適。

例：「User」、「Server」、「Database」それぞれの要素の相互作用を時間軸に沿って表現
```mermaid
sequenceDiagram
  actor U as User
  participant S as Server
  participant DB
  U->>+S: Request
  S->>DB: SQL
  DB-->>S: データ
  S-->>-U: HTML
  U->>+S: Request
  S-->>-U: JavaScript / CSS
```
コードこう書く
~~~
```mermaid
sequenceDiagram
  actor U as User
  participant S as Server
  participant DB
  U->>+S: Request
  S->>DB: SQL
  DB-->>S: データ
  S-->>-U: HTML
  U->>+S: Request
  S-->>-U: JavaScript / CSS
```
~~~


### 🌀状態遷移図
フロー図に似てる、順序ではなく状態の遷移を表現したいとき

例:それぞれの状態と、その遷移に関しての説明を表現
```mermaid
stateDiagram-v2
  [*] --> 実行可能状態
  実行可能状態 --> 実行状態: ディスパッチ
  実行状態 --> 実行可能状態: プリエンプション
  実行状態 --> 待機状態: I/O
  待機状態 --> 実行可能状態: I/O完了
```
コードこう書く
~~~
```mermaid
stateDiagram-v2
  [*] --> 実行可能状態
  実行可能状態 --> 実行状態: ディスパッチ
  実行状態 --> 実行可能状態: プリエンプション
  実行状態 --> 待機状態: I/O
  待機状態 --> 実行可能状態: I/O完了
```
~~~


### 🌀クラス図 〜略〜
〜略〜
 
### 🌀ER図 〜略〜
エンティティの関係を表現
〜略〜


### 🌀円グラフ

```mermaid
pie title 社内で使っているエディタ
  "VSCode" : 30
  "Vim" : 6
  "Emacs" : 2
```
コードこう書く
~~~
```mermaid
pie title 社内で使っているエディタ
  "VSCode" : 30
  "Vim" : 6
  "Emacs" : 2
```
~~~


### 🌀ガントチャート
プロジェクトの計画など。プロジェクトに紐づくそれぞれのタスクのスケジュールなどを表現。
```mermaid
gantt
  dateFormat  YYYY-MM-DD
  title       XXXプロジェクト 計画
  excludes    weekends

  section リリース
  開発期間        :done, 2022-04-01, 2022-04-08
  アルファリリース期間 :active, 5d
  ベータリリース期間  :5d
  正式リリース      :milestone, 0d

  section 開発
  機能開発      :crit, done, 2022-04-01, 3d
  デバッグ      :crit, done, 2d
  アナウンス     :crit, done, 1d
  ベータ機能開発 :crit, active, 4d
  バグ修正      :4d
  最終検証      :1d
```

コードこう書く
~~~
```mermaid
gantt
  dateFormat  YYYY-MM-DD
  title       XXXプロジェクト 計画
  excludes    weekends

  section リリース
  開発期間        :done, 2022-04-01, 2022-04-08
  アルファリリース期間 :active, 5d
  ベータリリース期間  :5d
  正式リリース      :milestone, 0d

  section 開発
  機能開発      :crit, done, 2022-04-01, 3d
  デバッグ      :crit, done, 2d
  アナウンス     :crit, done, 1d
  ベータ機能開発 :crit, active, 4d
  バグ修正      :4d
  最終検証      :1d
```
~~~
 


<font color=darkgray>⚠︎作成例の ｢🌀○○図｣、｢🌀○□図｣、｢🌀□△図｣などは、 参照元などのからコピペしたものだったと思います</font>

■END