マーメイド#5 フローチャート②

**ひとりマーメイド5日目**
**フローチャート②**

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

この記事では前回に引き続きフローチャートの記述について紹介します！

↓↓前回の記事はこちら

https://qiita.com/hirokiwa/items/8170fd9111f302faeb23

## まーめいど！ふろーちゃーと！
前回の記事ではフローチャートのノードとエッジの記述方法について紹介しました！

引き続きフローチャートの記述について理解を深めていきましょう！！

## エッジ記述の応用

連続するフローは1行でまとめて記述することができます。

```:mermaid
flowchart LR
    A --> B --> c
```

```mermaid
flowchart LR
    A --> B --> c
```

同一のノードから複数のエッジが出力される場合は`&`でまとめることができます。

```:mermaid
flowchart LR
    A --> B & C --> D
```

```mermaid
flowchart LR
    A --> B & C --> D
```

たくさんまとめても問題ないですよ！

```:mermaid
flowchart TB
    A & B & C --> D & E & F
```

```mermaid
flowchart TB
    A & B & C --> D & E & F
```
ちなみにこれを従来通り記述すると以下のようになります。

```:mermaid
flowchart TB
    A --> D
    A --> E
    A --> F
    B --> D
    B --> E
    B --> F
    C --> D
    C --> E
    C --> F
```

```mermaid
flowchart TB
    A --> D
    A --> E
    A --> F
    B --> D
    B --> E
    B --> F
    C --> D
    C --> E
    C --> F
```

`&`は偉大ですね！

### 双方向エッジ
エッジの両側に矢印を付けることもできます。
```:mermaid
flowchart LR
    A <--> B <-.-> C <==> D o--o E x--x F
```

```mermaid
flowchart LR
    A <--> B <-.-> C <==> D o--o E x--x F
```

### エッジの長さ
エッジの長さを変更することができます。

```:mermaid
flowchart LR
    start --> A
    start ---> B
    start ----> C
```

```mermaid
flowchart LR
    start --> A
    start ---> B
    start ----> C
```

どこまで伸ばせるのか試してみましたが、、、
```:mermaid
flowchart LR
    start --> A
    start -----------------------------> B
```

```mermaid
flowchart LR
    start --> A
    start -----------------------------> B
```
たぶんこれ無限ですね。

## サブグラフ
フローチャートを領域で区切ってタイトルをつけることができます。

```:mermaid
flowchart LR
    A --> B
    subgraph one
        B --> C
    end
    C --> D
```

```mermaid
flowchart LR
    A --> B
    subgraph one
        B --> C
    end
    C --> D
```
この黄色い部分がサブグラフです。

多重サブグラフも可能です。
```:mermaid
flowchart
    subgraph one
        subgraph two
            subgraph three
                subgraph four
                    subgraph five
                        A
                    end
                end
            end
        end
    end
```

```mermaid
flowchart
    subgraph one
        subgraph two
            subgraph three
                subgraph four
                    subgraph five
                        A
                    end
                end
            end
        end
    end
```

サブグラフごとにフローの向きを変えることができます。
`direction TB`

```:mermaid
flowchart TB
    subgraph sub1
        direction BT
        subgraph sub3
            direction LR
            B --> C
        end
        
        sub3 --> D
    
        subgraph sub2
            direction RL
            E --> F
        end
        
        D --> sub2
    end
    A --> sub1 --> G
```

```mermaid
flowchart TB
    subgraph sub1
        direction BT
        subgraph sub3
            direction LR
            E --> F
        end
        
        sub3 --> D
    
        subgraph sub2
            direction RL
            C --> B
        end
        
        D --> sub2
    end
    A --> sub1 --> G
```
~~こんなん記述してたら頭おかしくなる~~

## リンクの埋め込み
筆者がマーメイド史上一番感動した機能なんですが、ノードにURLを埋め込むことができます。

当アドカレの記事のリンクでも埋め込んでおきましょう。

```:mermaid
flowchart LR
    Day1 --> Day2 --> Day3
    click Day1 href "https://qiita.com/hirokiwa/items/841fcb749873f2847af7"
    click Day2 href "https://qiita.com/hirokiwa/items/37ccf5ad177b40aea682"
    click Day3 href "https://qiita.com/hirokiwa/items/fa819db950c89f68269e"
```

```mermaid
flowchart LR
    Day1 --> Day2 --> Day3
    click Day1 href "https://qiita.com/hirokiwa/items/841fcb749873f2847af7"
    click Day2 href "https://qiita.com/hirokiwa/items/37ccf5ad177b40aea682"
    click Day3 href "https://qiita.com/hirokiwa/items/fa819db950c89f68269e"
```

↑↑ノードをクリックすると本当に遷移します。

## ノードのスタイリング
cssのノリでノードのデザインを自由に変えることができます。

```:mermaid
flowchart LR
    A(start) --> B(stop)
    style A fill:#00FF00,stroke:#FF22FF,stroke-width:10px
    style B fill:#bbf,stroke:#f66,stroke-width:4px,color:#006400,stroke-dasharray:6 4
```

```mermaid
flowchart LR
    A(start) --> B(stop)
    style A fill:#00FF00,stroke:#FF22FF,stroke-width:10px
    style B fill:#bbf,stroke:#f66,stroke-width:4px,color:#006400,stroke-dasharray:6 4
```

簡単にダサいデザインを実装することができました。

styleパラメータは以下の通りです。

|||
|---|---|
|fill|ノードの背景色|
|stroke|ノードの縁の色|
|stroke-width|ノードの縁の太さ|
|color|文字の色|
|stroke-dasharray|縁の点線の長さの割合|

### class 定義
HTML/css のように class で定義したスタイルをノードに適用することもできます。
`node_id:::class_name`

```:mermaid
flowchart LR
    A(start):::node_A --> B(stop):::node_B

    classDef node_A fill:#00FF00,stroke:#FF22FF,stroke-width:10px;
    classDef node_B fill:#bbf,stroke:#f66,stroke-width:4px,color:#006400,stroke-dasharray:6 4;
```

```mermaid
flowchart LR
    A(start):::node_A --> B(stop):::node_B
    classDef node_A fill:#00FF00,stroke:#FF22FF,stroke-width:10px;
    classDef node_B fill:#bbf,stroke:#f66,stroke-width:4px,color:#006400,stroke-dasharray:6 4;
```

## まとめ
フローチャートの記法について一通りお伝えしました！

結構ボリュームあるでしょ？？？

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

https://qiita.com/hirokiwa/items/63f9627637226090ec1b

## 参考

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