コード で フローチャート を 描く ～mermaid  記法①～

## 〜宣伝〜

:::note info
個人開発でエンジニア専門マッチングサービスを開発しましたので、是非未経験からエンジニア目指している人！現役エンジニアで教えたい人！使ってみてください！

β版リリース記念キャンペーン中です！

10名様限定、抽選でお好きな技術本1冊プレゼント！
🎉当選者にはメッセージ差し上げます(送付の際に住所はお聞きしません)
詳しくはこちらから↓

https://x.com/dokupro01/status/1796837336145436846
:::
https://dokupro.dev/

## 目的
mermaidでフローチャートを描く時のルールを描く  

※[mermaid.jsの公式](https://mermaidjs.github.io/#/flowchart)に記載されているフローチャートを書く方法を紹介する。
※mermaidについて知りたい方は[こちら](https://qiita.com/miriwo/items/babd1fc51adfa6bc60ad)
※基本的な記入方法を知りたい方は[こちら](https://qiita.com/miriwo/items/7e26f0d85829bb15e69c)
※出力方法を知りたい方は[こちら](https://qiita.com/miriwo/items/223443768f545c39298c)

## 抑えるポイント
- フローチャートの作業要素(下記画像の青丸で囲った部分)をノードと呼ぶ  
    ![test.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/3b6c1a00-8df4-ef9c-66ae-55f56a32f54c.jpeg)  

### 最初に描く図の種類と方向を宣言する。
- フローチャートの場合は`graph`と宣言し、半角スペースを空けて描く方向を英語2文字で宣言する。
- 上から下方向に向かって書くフローチャートの場合は`graph TB`か`graph TD`  
    ![mermaid_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/f6b212ea-628e-f445-25d0-792dd1fb17b6.png)

- 下から上方向に向かって書くフローチャートの場合は`graph BT`  
    ![mermaid_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/a1c44cf4-42f7-f725-a087-244ab3dfdf68.png)

- 右から左方向に向かって書くフローチャートの場合は`graph RL`  
    ![mermaid_19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/8f7f426c-cd8c-fd0e-a4d6-b9ad9f92c5b7.png)

- 左から右方向に向かって書くフローチャートの場合は`graph LR`  
    ![mermaid_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/0ce70b14-0215-5be5-ab67-6a28070d65ff.png)


## 書き方の例

### 基本
1. ノードの作成
下記の様にすることでAという名前のノードを作成し表示する。  

    ``` mermaid
    graph LR
        A
    ```  
    ![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/a46f6d2e-e434-fba0-ed0b-341b5a5ece6a.png)


1. ノードに文字を格納
下記の様にすることでAノードの中にテキスト「おはよう」を入れることができる。  
※ノードの特徴・・・  
    - 入るテキストを指定したとき→指定されたテキストが図に表示される。
    - 入るテキストが指定されてないとき→ノードの名前が図に表示される。  
※ノードに文字を入れるときはダブルクオートで囲むことを心がけよう

    ``` mermaid
    graph LR
        A["おはよう"]
    ```  
    ![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/596392b7-3a41-de65-bf06-4c036700d109.png)


### ノードの見た目
1. ノードの角を角ばらせる
下記の様にすることでノードの四隅が角ばる

    ``` mermaid
    graph LR
        A["おはよう"]
    ```  
    ![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/596392b7-3a41-de65-bf06-4c036700d109.png)

1. ノードの角を丸める
下記の様にすることでノードの四隅が丸まる

    ``` mermaid
    graph LR
        A("おはよう")
    ```  
    ![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/598bdf64-2dca-91a8-0f3e-0033b24fa8c5.png)

1. ノードを丸める
下記の様にすることでノードが丸くなる

    ``` mermaid
    graph LR
        A(("おはよう"))
    ```
    ![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/6c1a6f0f-c4f7-b396-9fe6-412fdb32f5a9.png)

1. ノードを左右非対称にする
下記の様にすることでノードが左右非対称の形になる

    ``` mermaid
    graph LR
        A>"おはよう"]
    ```
    ![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/82f1f9c1-4b70-d3ad-169a-94aacb6a5e02.png)

1. ノードをひし形にする
下記の様にすることでノードがひし形になる

    ``` mermaid
    graph LR
        A{"おはよう"}
    ```
    ![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/b2d5986f-8f33-3f27-62cf-d457f5ef6648.png)

### ノードを繋ぐ
1. ノードAとノードBを矢印で結ぶ
下記の様にすることでノードAとノードBを矢印で結ぶことができる

    ``` mermaid
    graph LR
        A-->B
    ```
    ![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/25dd8f54-5ac8-29ff-d08d-c23c6f3614a1.png)


1. ノードAとノードBを繋ぐ矢印の上にテキストを出す
下記の様にすることでノードAとノードBを繋ぐ矢印の上にテキストを出すことができる

    ``` mermaid
    graph LR
        A--"こんにちは"-->B
    ```
    ![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/b366dfbc-379b-2c86-acc3-e6575a9340e7.png)


1. ノードAとノードBを線で結ぶ
下記の様にすることでノードAとノードBを線で結ぶことができる

    ``` mermaid
    graph LR
        A---B
    ```
    ![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/29826474-01bd-a273-77ce-d0b831431fa0.png)


1. ノードAとノードBを結ぶ線の上にテキストを出す
下記の様にすることでノードAとノードBを結ぶ線の上にテキストを出すことができる

    ``` mermaid
    graph LR
        A--"こんにちは"---B
    ```
    ![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/474ff6f4-55e0-46fd-45aa-e05af234f948.png)


1. ノードAとノードBを点線矢印で結ぶ
下記の様にすることでノードAとノードBを点線矢印で結ぶことができる

    ``` mermaid
    graph LR
        A-.->B
    ```
    ![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/54b463c3-7cee-d56d-5ec3-7468996861be.png)


1. ノードAとノードBを繋ぐ点線矢印の上にテキストを出す
下記の様にすることでノードAとノードBを結ぶ点線矢印の上にテキストを出すことができる

    ``` mermaid
    graph LR
        A-."おはよう".->B
    ```

1. ノードAとノードBを太い矢印で結ぶ
下記の様にすることでノードAとノードBを太い矢印で結ぶことができる

    ``` mermaid
    graph LR
        A==>B
    ```
    ![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/8688e3e6-0c69-0f17-fb6b-d74aacfd2dd1.png)


1. ノードAとノードBを繋ぐ太い矢印の上にテキストを出す
下記の様にすることでノードAとノードBを結ぶ太い矢印の上にテキストを出すことができる

    ``` mermaid
    graph LR
        A=="おはよう"==>B
    ```
    ![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/5aa1a0a7-37be-5454-525f-60d7af65c06b.png)