マーメイド#19 マインドマップ

**ひとりマーメイド19日目**
**マインドマップ**

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

この記事ではマインドマップの記述について紹介します！

↓↓前回の記事はこちら

https://qiita.com/hirokiwa/items/742a250e8847bf763541

## マーメイドで記述するマインドマップ
前回の記事では円グラフの記法について紹介しました。

今日はマインドマップを見ていきます。マインドマップはキーワードから連想される単語を放射状につなげていくダイアグラムです。
```:mermaid
mindmap
    top((diagram))
        flowchart
            element
                node
                edge
            algorithm
        sequenceDiagram
            declaration
                participant
                actor
            action
                request
                response
        gitGraph
            action
                commit
                    id
                    label
                merge
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/df6dc06f-64ab-6396-ccf7-b1f36a298beb.png)

## 宣言と枝分かれ
マインドマップは`mindmap`で宣言されます。

要素の関連はインデントを元に定義されます。マーメイドにおいてインデントが影響するダイアグラムはマインドマップが初めてです。

```:mermaid
mindmap
    top
        idea1
        idea2
        idea3
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/0dbbef30-2903-2106-9a9c-de2a40eb8d50.png)

同じインデントレベルに記述した要素が同一階層にレンダリングされます。

```:mermaid
mindmap
    top
        idea1
            idea1_1
                idea1_1_1
                idea1_1_2
            idea1_2
        idea2
            idea2_1
            idea2_2
        idea3
            idea3_1
            idea3_2
            idea3_3
            idea3_4
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/a412cfe2-404a-ee12-fe7e-76d549f82fd3.png)

## インデントのレンダリング
マインドマップのノードは**自分よりも先に上位のインデントレベルで定義されたノードのうち最も近いもの**を親と認識します。そのため、奇妙なインデントで記述しても補正してレンダリングされることがあります。

以下のように記述した場合を考えます。`idea3`以降のインデントが気持ち悪いですね。

まず`idea4`の親が`idea3`であることは直感的に分かると思います。

では`idea5`はどうでしょうか。**自分よりも先に上位のインデントレベルで定義されたノードのうち最も近いもの**を選ぶので、こちらも`idea3`が親になります。
```:mermaid
mindmap
    idea0((idea0))
        ieda1
        idea2
        idea3
                idea4
            idea5
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/4b005aa3-be4c-8008-594d-a33451be3476.png)

続いて以下のように記述した場合を考えます。`idea1`のインデントがおかしいですね。

ここで`idea1`の親を探します。**自分よりも先に上位のインデントレベルで定義されたノードのうち最も近いもの**を選びますが、`idea1`より先に上位のインデントレベルで定義されたノードが存在しません。よって`idea1`は親を持たないためSyntax errorを起こします。

```:mermaid
mindmap
    idea0((idea0))
ieda1
        idea2
        idea3
            idea4
            idea5
```
```mermaid
mindmap
    idea0((idea0))
ieda1
        idea2
        idea3
            idea4
            idea5
```


## ノードの形
ノードの形を変更することができます。現在サポートされているノードは以下の7種類です。

```:mermaid
mindmap
    defolt
        id[Square]
        id(Rounded square)
        id((Circle))
        id))Bang((
        id)Cloud(
        id{{Hexagon}}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/9508e051-2b48-734b-7fa7-3e0d115e1c78.png)

### デフォルト
ここで定義されているのはノードIDであり、デフォルトではこれがそのままノード名前となってダイアグラム中に表示されます。
```:mermaid
mindmap
    idea
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/ce53e68c-c433-c93d-c4d6-461d01ba11cf.png" width=200px>



### 四角
ノードの形を変更する際はノードIDとノード名前をそれぞれ定義する必要があります。
`ID[NAME]`
```:mermaid
mindmap
    id[idea]
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/7470f360-a05a-dfa6-1107-bb4f0a089dbe.png" width=200px>

### スタジアム形
```:mermaid
mindmap
    id(idea)
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/cbd41a0d-1e96-3d21-516c-7134224a195d.png" width=200px>

### 円
```:mermaid
mindmap
    id((idea))
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/1000f43f-435d-ec81-fd01-0205721cae4e.png" width=200px>

### ギザギザ
```:mermaid
mindmap
    id))idea((
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/ee1400b9-b29b-a6c5-d4dd-fb4db702c8dd.png" width=200px>

### もくもく
```:mermaid
mindmap
    id)idea(
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/18213684-3b8a-131d-3e02-acd06f25e505.png" width=200px>

### ヘキサゴン
```:mermaid
mindmap
    id{{idea}}
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/f3c33f66-e665-135d-a6c7-09c8a7f237df.png" width=200px>

### ヘキサゴン
```:mermaid
mindmap
    id{{idea}}
```

## アイコン
ノード中にアイコンを埋め込むことができます。
[Material Design Icons](https://materialdesignicons.com/)と[Font Awesome 4](https://fontawesome.com/v4/icons/)がサポートされています。

```
NODE
::icon(fa CLASS)
NODE
::icon(mdi CLASS)
```

```:mermaid
mindmap
    top
        idea1
        idea2
        ::icon(fa fa-car)
        idea3
        ::icon(mdi mdi-skull-outline)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/bb47b5b8-c88e-5710-c0f0-091366d86d5c.png)

公式エディタではMDIが正しくレンダリングされないようです。



## まとめ
マインドマップの記述について紹介しました！

↓↓直の記事はこちら！！

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

## 参考

https://mermaid.js.org