マーメイド#6 フローチャートの実用例

**ひとりマーメイド6日目**
**フローチャートの実用例**

## 概要
マーメイドエンジニアのひろきです。こんにちは。
最近流行り（流行らせたい）のマーメイドについて理解を深めていこうと思います。

この記事ではマーメイドで記述するフローチャートの実用例を紹介します！

↓↓前回の記事はこちら

https://qiita.com/hirokiwa/items/6c1c29b79897c9911718

## フローチャートかきかき
前回、前々回はフローチャートの記述について紹介しました！

今日は実際にマーメイドを使って実用的なフローチャートを記述します！

## 基本のフローチャート

フローチャートはアルゴリズムやプロセスの流れを表す図です。

```:mermaid
flowchart TB
    A([start]) --> B{true?}
    B --Yes--> C[process]
    B --No--> D[exception]
    C & D --> E([end])
```

```mermaid
flowchart TB
    A([start]) --> B{true?}
    B --Yes--> C[process]
    B --No--> D[exception]
    C & D --> E([end])
```

## 技術スタック
技術スタックをまとめる際にも使えますが、個人的には微妙です。

```:mermaid
flowchart LR
    subgraph client
        a(React) --- b(typescript)
    end
    
    subgraph API_server
        c(Go)
    end
    
    client --> API_server --> e[DeepL_API]
    API_server --> f[FatSecret_API]
    API_server --> g[(Database)]
    API_server --auth--> h[firebase]
```

```mermaid
flowchart LR
    subgraph client
        a(React) --- b(typescript)
    end
    
    subgraph API_server
        c(Go)
    end
    
    client --> API_server --> e[DeepL_API]
    API_server --> f[FatSecret_API]
    API_server --> g[(Database)]
    API_server --auth--> h[firebase]
```


## コンポーネント設計図
コンポーネントの設計図としても使えます。

コンポーネント指向のプロジェクトを進める際に、README に記述しておくと非常に便利です。コードページへのリンクを埋め込んでおくと完璧です！！！

```:mermaid
flowchart LR
    a[Home] --> b[Header]
    a --> c[Table]
    a --> d[Data]
    c --> g[TableHead]
    c --> e[Columun]
    subgraph 6 times
        e --> h[Times]
        subgraph 5 times
            f[Square]
        end
        e --> f
    end

    click a "https://github.com/hirokiwa/gpa_calculator/blob/main/src/page/home/Home.tsx"
    click b "https://github.com/hirokiwa/gpa_calculator/blob/main/src/page/header/Header.tsx"
    click c "https://github.com/hirokiwa/gpa_calculator/blob/main/src/page/home/table/Table.tsx"
    click d "https://github.com/hirokiwa/gpa_calculator/blob/main/src/page/home/data/Data.tsx"
    click e "https://github.com/hirokiwa/gpa_calculator/blob/main/src/page/home/table/column/Column.tsx"
    click f "https://github.com/hirokiwa/gpa_calculator/blob/main/src/page/home/table/column/square/Square.tsx"
    click g "https://github.com/hirokiwa/gpa_calculator/blob/main/src/page/home/table/table_head/TableHead.tsx"
    click h "https://github.com/hirokiwa/gpa_calculator/blob/main/src/page/home/table/column/square/Times.tsx"
```

```mermaid
flowchart LR
    a[Home] --> b[Header]
    a --> c[Table]
    a --> d[Data]
    c --> g[TableHead]
    c --> e[Columun]
    subgraph 6 times
        e --> h[Times]
        subgraph 5 times
            f[Square]
        end
        e --> f
    end

    click a "https://github.com/hirokiwa/gpa_calculator/blob/main/src/page/home/Home.tsx"
    click b "https://github.com/hirokiwa/gpa_calculator/blob/main/src/page/header/Header.tsx"
    click c "https://github.com/hirokiwa/gpa_calculator/blob/main/src/page/home/table/Table.tsx"
    click d "https://github.com/hirokiwa/gpa_calculator/blob/main/src/page/home/data/Data.tsx"
    click e "https://github.com/hirokiwa/gpa_calculator/blob/main/src/page/home/table/column/Column.tsx"
    click f "https://github.com/hirokiwa/gpa_calculator/blob/main/src/page/home/table/column/square/Square.tsx"
    click g "https://github.com/hirokiwa/gpa_calculator/blob/main/src/page/home/table/table_head/TableHead.tsx"
    click h "https://github.com/hirokiwa/gpa_calculator/blob/main/src/page/home/table/column/square/Times.tsx"
```

## 画面遷移図
こちらも個人的には微妙です。
```:mermaid
flowchart LR
	a[店舗一覧]
	b[店舗詳細]
	c[商品詳細]
	d[マップ情報]
	subgraph Home[ホーム画面]
		a
    end
		a --- b
	subgraph Shop[店舗詳細画面]
		b --- c & d
    end
```

```mermaid
flowchart LR
	a[店舗一覧]
	b[店舗詳細]
	c[商品詳細]
	d[マップ情報]
	subgraph Home[ホーム画面]
		a
    end
		a---b
	subgraph Shop[店舗詳細画面]
		b---c & d
    end
```

## 人物相関図
いつ使うんですか。

```:mermaid
flowchart
    a[まめ太郎]
    b[まめ太郎]
    c[まめ太郎]
    d[まめ太郎]
    e[まめ太郎]
    a & d <--高校の同級生---> b
    a <--高校の同級生---> d
    a <--幼稚園の同級生---> c
    c <--初対面---> b & d
    e <--初対面---> a & b & c & d
```

```mermaid
flowchart
    a[まめ太郎]
    b[まめ太郎]
    c[まめ太郎]
    d[まめ太郎]
    e[まめ太郎]
    a & d <--高校の同級生---> b
    a <--高校の同級生---> d
    a <--幼稚園の同級生---> c
    c <--初対面---> b & d
    e <--初対面---> a & b & c & d
```

## まーめいど！ふろーちゃーと！

特に意味のない記述をしている時が一番楽しいですね！

```:mermaid
flowchart LR
    a((a)) --- b((b)) --- c((c)) --- d((d)) --- e((e)) --- f((f)) --- g((g)) --- h((h))
    a --- b --- c --- d --- e --- f --- g --- h
    a --- b --- c --- d --- e --- f --- g --- h
    a --- b --- c --- d --- e --- f --- g --- h
    a --- b --- c --- d --- e --- f --- g --- h
    a --- b --- c --- d --- e --- f --- g --- h
    a --- b --- c --- d --- e --- f --- g --- h
    a --- b --- c --- d --- e --- f --- g --- h
    a --- b --- c --- d --- e --- f --- g --- h
    a --- b --- c --- d --- e --- f --- g --- h
    a --- b --- c --- d --- e --- f --- g --- h
    a --- b --- c --- d --- e --- f --- g --- h
    a --- b --- c --- d --- e --- f --- g --- h
    a --- b --- c --- d --- e --- f --- g --- h
```

```mermaid
flowchart LR
    a((a)) --- b((b)) --- c((c)) --- d((d)) --- e((e)) --- f((f)) --- g((g)) --- h((h))
    a --- b --- c --- d --- e --- f --- g --- h
    a --- b --- c --- d --- e --- f --- g --- h
    a --- b --- c --- d --- e --- f --- g --- h
    a --- b --- c --- d --- e --- f --- g --- h
    a --- b --- c --- d --- e --- f --- g --- h
    a --- b --- c --- d --- e --- f --- g --- h
    a --- b --- c --- d --- e --- f --- g --- h
    a --- b --- c --- d --- e --- f --- g --- h
    a --- b --- c --- d --- e --- f --- g --- h
    a --- b --- c --- d --- e --- f --- g --- h
    a --- b --- c --- d --- e --- f --- g --- h
    a --- b --- c --- d --- e --- f --- g --- h
    a --- b --- c --- d --- e --- f --- g --- h
```

```:mermaid
flowchart
    no1(( )) --- no2(( )) & no3(( )) --- no4(( ))
    no5(( )) --- no3 & no6(( )) --- no7(( ))
    no8(( )) --- no6 & no9(( )) --- no10(( ))
    no11(( )) --- no9 & no12(( )) --- no13(( ))
    
    no4 --- no14(( )) & no15(( )) --- no16(( ))
    no7 --- no15 & no17(( )) --- no18(( ))
    no10 --- no17 & no19(( )) --- no20(( ))
    no13 --- no19 & no21(( )) --- no22(( ))
    
    no16 --- no23(( )) & no24(( )) --- no25(( ))
    no18 --- no24 & no26(( )) --- no27(( ))
    no20 --- no26 & no28(( )) --- no29(( ))
    no22 --- no28 & no30(( )) --- no31(( ))
    
    no32(( )) --- no12 & no33(( )) --- no34(( ))
    no35(( )) --- no33 & no36(( )) --- no37(( ))
    no38(( )) --- no36 & no39(( )) --- no40(( ))
    no41(( )) --- no39 & no42(( )) --- no43(( ))
    
    no34 --- no21 & no44(( )) --- no45(( ))
    no37 --- no44 & no46(( )) --- no47(( ))
    no40 --- no46 & no48(( )) --- no49(( ))
    no43 --- no48 & no50(( )) --- no51(( ))
    
    no45 --- no30 & no52(( )) --- no53(( ))
    no47 --- no52 & no54(( )) --- no55(( ))
    no49 --- no54 & no56(( )) --- no57(( ))
    no51 --- no56 & no58(( )) --- no59(( ))
```

[![](https://mermaid.ink/img/pako:eNpN08GKwjAUBdBfKVkMCrrotrvBDjqjo4KiKNnENrbaNi01Kir--3SS9_Kyy705lHChL5bUqWQRO5b1PclFq7kSvV7Q7wfD4TA42ONHkFCXmiNXkqoEWUZdDuxEVYasoK4EVlFVIKupa4BxlZrcormQ0WByky4obiTuIEqTbigeJJ4gGpMeKM4klHuJthOFbqPQGykEdrcDOZR5KEf0tPM4VHioRKTsOA7VHmpC96pPautOjSjGYL6oGuHHxtRNgH1TNUY2pW4G7JeqKbIFdUv3sNjkc3e9ous1XE9MWuEHNiS2IGYmbVDsSOxBLE3aofghMXePWNthwv9lvP1i3G9rZ3Ejjz00QbS3ozg09dAM0dxO4tDCQ0t7ZgNWybYSp7T7AV9cBQFnOpeV5CzqjqloC864endOXHW9eqiERbq9ygG7NqnQMj6JrBUVi46ivMj3HzBOyTM?type=png)](https://mermaid.live/edit#pako:eNpN08GKwjAUBdBfKVkMCrrotrvBDjqjo4KiKNnENrbaNi01Kir--3SS9_Kyy705lHChL5bUqWQRO5b1PclFq7kSvV7Q7wfD4TA42ONHkFCXmiNXkqoEWUZdDuxEVYasoK4EVlFVIKupa4BxlZrcormQ0WByky4obiTuIEqTbigeJJ4gGpMeKM4klHuJthOFbqPQGykEdrcDOZR5KEf0tPM4VHioRKTsOA7VHmpC96pPautOjSjGYL6oGuHHxtRNgH1TNUY2pW4G7JeqKbIFdUv3sNjkc3e9ous1XE9MWuEHNiS2IGYmbVDsSOxBLE3aofghMXePWNthwv9lvP1i3G9rZ3Ejjz00QbS3ozg09dAM0dxO4tDCQ0t7ZgNWybYSp7T7AV9cBQFnOpeV5CzqjqloC864endOXHW9eqiERbq9ygG7NqnQMj6JrBUVi46ivMj3HzBOyTM)


## まとめ
フローチャート楽しいですねぇ

↓↓次回の記事はこちら！！

https://qiita.com/hirokiwa/items/a8fbe82710afe6ef0283

## 参考

https://mermaid-js.github.io/mermaid/#/