マーメイド#4 フローチャート①

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

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

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

↓↓前回の記事はこちら

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

## マーメイドで記述するフローチャート
前回の記事ではマーメイドの構文構造について紹介しました。マーメイドを記述する際は注意してくださいね！

今日はマーメイドの最も代表的なダイアグラムであるフローチャートの記述方法について紹介します。フローチャートはアルゴリズムやプロセスの流れを表す図です。

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

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

このようにノードとエッジで表現されます。

## ノードの宣言

デフォルトではこのように記述します。

```:mermaid
flowchart
    node
```

```mermaid
flowchart
    node
```

ノードの名前を任意の文字列にしたい場合は以下のように記述します。

```:mermaid
flowchart
    node[this is a node]
```

```mermaid
flowchart
    node[this is a node]
```

## グラフ

エッジは`-->`で表します。デフォルトでは上から下に向かってフローが進みます。

```:mermaid
flowchart
    start --> stop
```

```mermaid
flowchart
    start --> stop
```

### グラフの向き

グラフの向きを指定することができます。

`TB`(または`TD`)で上から下へのグラフになります。

```:mermaid
flowchart TB
    start --> stop
```

```mermaid
flowchart TB
    start --> stop
```

`LR`で左から右へのグラフになります。

```:mermaid
flowchart LR
    start --> stop
```

```mermaid
flowchart LR
    start --> stop
```

以下のように自由自在に向きを変更することができます。

|記述|向き|
|---|---|
|TB|↓|
|TD|↓|
|BT|↑|
|LR|→|
|RL|←|

## ノードの形
ノードの形を変更することができます。
#### デフォルト
デフォルトは四角です。
```:mermaid
flowchart
    node
```

```mermaid
flowchart
    node
```

#### 丸角
```:mermaid
flowchart
    node(this is a node)
```

```mermaid
flowchart
    node(this is a node)
```

#### スタジアム形
```:mermaid
flowchart
    node([this is a node])
```

```mermaid
flowchart
    node([this is a node])
```

#### サブルーチン
```:mermaid
flowchart
    node[[this is a node]]
```

```mermaid
flowchart
    node[[this is a node]]
```

#### 円筒形
```:mermaid
flowchart
    node[(this is a node)]
```

```mermaid
flowchart
    node[(this is a node)]
```

#### 円
```:mermaid
flowchart
    node((this is a node))
```

```mermaid
flowchart
    node((this is a node))
```

#### ひし形
```:mermaid
flowchart
    node{this is a node}
```

```mermaid
flowchart
    node{this is a node}
```

#### ヘキサゴン
```:mermaid
flowchart
    node{{this is a node}}
```

```mermaid
flowchart
    node{{this is a node}}
```

#### 平行四辺形
```:mermaid
flowchart
    node[/this is a node/]
```

```mermaid
flowchart
    node[/this is a node/]
```

#### 逆平行四辺形
```:mermaid
flowchart
    node[\this is a node\]
```

```mermaid
flowchart
    node[\this is a node\]
```

#### 台形
```:mermaid
flowchart
    node[/this is a node\]
```

```mermaid
flowchart
    node[/this is a node\]
```

#### 逆台形
```:mermaid
flowchart
    node[\this is a node/]
```

```mermaid
flowchart
    node[\this is a node/]
```

#### 非対称
```:mermaid
flowchart
    node>this is a node]
```

```mermaid
flowchart
    node>this is a node]
```


#### 二重丸
※古いバージョンのエディタではレンダリングできないことがあります。
```:mermaid
flowchart
    node(((this is a node)))
```

[![](https://mermaid.ink/img/pako:eNodi8EKwyAQRH8lzEkhX-C5f9DrXhbdVGnUYlZKCfn3bjvMYXi8ORF7EgRse3_HzEOpLZZm1DmnuRyLlf_Ae48VVUblkuxz_lyCZqlCCDYTjyeB2mUeT-33T4sIOqasmK_EKrfCj8EVYeP9kOsLX-wqSw?type=png)](https://mermaid.live/edit#pako:eNodi8EKwyAQRH8lzEkhX-C5f9DrXhbdVGnUYlZKCfn3bjvMYXi8ORF7EgRse3_HzEOpLZZm1DmnuRyLlf_Ae48VVUblkuxz_lyCZqlCCDYTjyeB2mUeT-33T4sIOqasmK_EKrfCj8EVYeP9kOsLX-wqSw)

## エッジ

### 矢印

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

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

### 直線

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

```mermaid
flowchart LR
    A --- B
```

### 不可視
※古いバージョンのエディタではレンダリングできないことがあります。

```:mermaid
flowchart LR
    A ~~~ B
```

<img width="150" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/29cf14d8-96ed-e7b7-233c-c916d5feb65a.png">

### 点線矢印

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

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

### 太線矢印

```:mermaid
flowchart LR
    A ==> B
```

```mermaid
flowchart LR
    A ==> B
```

### 丸矢印

```:mermaid
flowchart LR
    A --o B
```

```mermaid
flowchart LR
    A --o B
```

### バツ矢印

```:mermaid
flowchart LR
    A --x B
```

```mermaid
flowchart LR
    A --x B
```

## テキスト入りエッジ

### 矢印
２通りの記述が可能です。

```:mermaid
flowchart LR
    A --this is text--- B
    C ---|this is text| D
```

```mermaid
flowchart LR
    A --this is text---> B
    C --->|this is text| D
```

### 直線
２通りの記述が可能です。

```:mermaid
flowchart LR
    A --this is text--- B
    C ---|this is text| D
```

```mermaid
flowchart LR
    A --this is text--- B
    C ---|this is text| D
```

### 点線矢印
2通りの記述が可能です。

```:mermaid
flowchart LR
    A-. this is text .-> B
    C-.->|this is text|D
```

```mermaid
flowchart LR
    A-. this is text .-> B
    C-.->|this is text|D
```

### 太線矢印

２通りの記述が可能です。

```:mermaid
flowchart LR
    A ==this is text===> B
    C ==>|this is text| D
```

```mermaid
flowchart LR
    A ==this is text===> B
    C ===>|this is text| D
```

### 不可視
※古いバージョンのエディタではレンダリングできないことがあります。

```:mermaid
flowchart LR
    A ~~~|this is text| B
```

<img width="200" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/0b675532-3b51-b80b-4ee4-e66db09c8eca.png">



### 丸矢印
2通りの記述が可能です。

```:mermaid
flowchart LR
    A --this is text---o B
    C ---o|this is text| D
```

```mermaid
flowchart LR
    A --this is text---o B
    C ---o|this is text| D
```

### バツ矢印
２通りの記述が可能です。

```:mermaid
flowchart LR
    A --this is text---x B
    C ---x|this is text| D
```

```mermaid
flowchart LR
    A --this is text---x B
    C ---x|this is text| D
```

## まとめ
フローチャートの文法は果てしないですね。

次回に続きます。

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

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

## 参考

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

'