マーメイド#15 gitグラフ1

**ひとりマーメイド15日目**
**gitグラフ1**

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

この記事ではgitグラフの記述について紹介します！

↓↓前回の記事はこちら

https://qiita.com/hirokiwa/items/144283422fe8a659b80c

## マーメイドで記述するgitグラフ
前回の記事ではガントチャートの基本構文について紹介しました！

今日はgitグラフの記法について紹介します。gitグラフはブランチやコミットなどのgitフローを可視化するダイアグラムです。

```:mermaid
gitGraph
    commit
    commit
    branch develop
    commit
    checkout main
    merge develop
    commit
```

[![](https://mermaid.ink/img/pako:eNptUD1vgzAQ_SvoZgthsEXwXClTp2yRF9e-gpXYRq6pmiL-ey8wNm86vY97p1vBJoegYPTlnM086VgRbArBl__zRzbRTpXDb7yn-YV3QntLS6mC8fGgAuYRXyWAAWlkdFS_PhUNZcKAGhSNzuSbBh038pmlpMsjWlAlL8hgmZ0p-ObNmE0A9WnuX8TOJoJa4QcU56JuCN3QSD60vRgYPEB1vK95e5K97EVzkkJuDH5Tog1NPRwQlJGdlC0DdL6k_H68Z__SXnHdA887tj_YJGHS?type=png)](https://mermaid.live/edit#pako:eNptUD1vgzAQ_SvoZgthsEXwXClTp2yRF9e-gpXYRq6pmiL-ey8wNm86vY97p1vBJoegYPTlnM086VgRbArBl__zRzbRTpXDb7yn-YV3QntLS6mC8fGgAuYRXyWAAWlkdFS_PhUNZcKAGhSNzuSbBh038pmlpMsjWlAlL8hgmZ0p-ObNmE0A9WnuX8TOJoJa4QcU56JuCN3QSD60vRgYPEB1vK95e5K97EVzkkJuDH5Tog1NPRwQlJGdlC0DdL6k_H68Z__SXnHdA887tj_YJGHS)

## 宣言とタイトル
gitグラフは`gitGraph`で宣言されます。

ダイアグラムの宣言の前にタイトルを定義することができます。
※`title`はマーメイドv.9.3.0以降でレンダリング可能です。
```
---
title: TITLE
---
```
```:mermaid
---
title: Git Flow
---
gitGraph
    commit
    commit
    branch develop
    commit
    checkout main
    merge develop
    commit

```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/1db9c023-a648-f957-c30a-ec413a9659e7.png" width=450px>

## git操作
マーメイドにおけるgitグラフの記法はコマンド操作と近く、直感的に記述することができます。

サポートされている操作は以下の通りです。
* commit 
* branch
* checkout
* merge

```:mermaid
gitGraph
    commit
    commit
    branch develop
    commit
    checkout main
    merge develop
    commit
```

[![](https://mermaid.ink/img/pako:eNptkD9vwyAQxb-KdTOKAOPYYY7UqVO3iuUKVxslgEVx1dTydy9xxuZNT_d-90e3gk2OQMPoy0vGeTKxqbIpBF_--4-M0U6No2-6pvkJO5G9pKU0AX18lALlkZ51AIOaVdDV9es9MVAmCmRAV-swXwyYuFUOl5LebtGCLnkhBsvssNDZ45gxgP7E61etzhhBr_ADWkh-GFrVnrjineJKdQxuoFsxHHh_GvhRSClkrzYGvynVCRXnqm9ldxRVquOSATlfUn59vGf_0r7ifW-437H9Ac1dYZc?type=png)](https://mermaid.live/edit#pako:eNptkD9vwyAQxb-KdTOKAOPYYY7UqVO3iuUKVxslgEVx1dTydy9xxuZNT_d-90e3gk2OQMPoy0vGeTKxqbIpBF_--4-M0U6No2-6pvkJO5G9pKU0AX18lALlkZ51AIOaVdDV9es9MVAmCmRAV-swXwyYuFUOl5LebtGCLnkhBsvssNDZ45gxgP7E61etzhhBr_ADWkh-GFrVnrjineJKdQxuoFsxHHh_GvhRSClkrzYGvynVCRXnqm9ldxRVquOSATlfUn59vGf_0r7ifW-437H9Ac1dYZc)

## commit
`commit`で現在のブランチへのコミットを定義することができます。ブランチは`main`で初期化されます。
※一部古いバージョンのエディタでは`master`と定義されることがあります。
```:mermaid
gitGraph
    commit
    commit
    commit
    commit
```

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

## コミットID
デフォルトではコミットポイントにランダムなコミットIDが付与されます。
コミットIDを指定したい場合は以下のように記述します。
`commit id: "COMMIT_ID"`
```:mermaid
gitGraph
    commit id: "first commit"
    commit id: "second commit"
    commit id: "third commit"
    commit id: "fourth commit"
```
[![](https://mermaid.ink/img/pako:eNp9kMFqwzAQRH_F7FkESZZjR-dCTz31FnwRlhyLRJZZryGJ8b9HcktPJXMc3s4Os0IXrQMNF0-faKahHYukLobgqfBWFy30Hmf6tVr4B5hdF0f7jqDB41ugjwvS8EcAg-AwGG9TtTXzOcMF10KmrcFrjtkSZxaK34-xA024OAbLZA25D28uaALo3tzm5E5mBL3CHbSQ_NCUqjxxxSvFlaoYPECXojnw-tTwo5BSyFptDJ4xpoSEc1WXsjqKJFVxycBZTxG_fqbbF9xfnPeD3GN7Af48awk?type=png)](https://mermaid.live/edit#pako:eNp9kMFqwzAQRH_F7FkESZZjR-dCTz31FnwRlhyLRJZZryGJ8b9HcktPJXMc3s4Os0IXrQMNF0-faKahHYukLobgqfBWFy30Hmf6tVr4B5hdF0f7jqDB41ugjwvS8EcAg-AwGG9TtTXzOcMF10KmrcFrjtkSZxaK34-xA024OAbLZA25D28uaALo3tzm5E5mBL3CHbSQ_NCUqjxxxSvFlaoYPECXojnw-tTwo5BSyFptDJ4xpoSEc1WXsjqKJFVxycBZTxG_fqbbF9xfnPeD3GN7Af48awk)

## コミットタイプ
コミットタイプを定義して表示を変更することができます。以下の3つのタイプがサポートされています。

* NORMAL
* RESERVE
* HIGHLIGHT

デフォルトでは`NORMAL`が指定されます。
`commit type: TYPE`

```:mermaid
gitGraph
    commit
    commit type:NORMAL
    commit type:REVERSE
    commit type:HIGHLIGHT
```

[![](https://mermaid.ink/img/pako:eNplUMFqwzAM_ZWisym24zSpb4WGttBukI4dhi8idluzOQ6uA8tC_n1udhlUIHg8PemJN0LjtQEJVxt3AbubahepGu-cjf_xIg6dkS-v9WlzfObr6r2qz9XzYH_Y7Y-p34CAM8Gh1clsfAgVxJtxRoFMUGP4VKDaKemwj_48tA3IGHpDoO80RrO1eA3oQF7w657YDluQI3yDZJwuy0xkaypoLqgQOYEBZMbKJS3WJV0xzhkvxETgx_t0IcmpKDKer1gqkVNOwGgbfTj9hTFnMlt8zAuPP6Zf-_ta0w?type=png)](https://mermaid.live/edit#pako:eNplUMFqwzAM_ZWisym24zSpb4WGttBukI4dhi8idluzOQ6uA8tC_n1udhlUIHg8PemJN0LjtQEJVxt3AbubahepGu-cjf_xIg6dkS-v9WlzfObr6r2qz9XzYH_Y7Y-p34CAM8Gh1clsfAgVxJtxRoFMUGP4VKDaKemwj_48tA3IGHpDoO80RrO1eA3oQF7w657YDluQI3yDZJwuy0xkaypoLqgQOYEBZMbKJS3WJV0xzhkvxETgx_t0IcmpKDKer1gqkVNOwGgbfTj9hTFnMlt8zAuPP6Zf-_ta0w)

## コミットダグ
コミットにタグを付与することができます。

`commit tag:"TEXT"`

```:mermaid
gitGraph
    commit
    commit tag:"v.1.0.0"
    commit
    commit tag:"rebased"
    commit
```

[![](https://mermaid.ink/img/pako:eNqFUDFuwzAM_ErAWRAoWY4dzQEydeoWaGEt1REaWYYiB00N_72ys6RTbzqQdzziZuiidaCh9_mUaLyYYVfQxRB8fuW7TL02cOeCI0cD_-iS-6Cbs391wCC4FMjbEjivGwP54oIzoAu1lL5Ww1J0NOX4_hg60DlNjsE0Wsru6KlPFEB_0vVWpiMNoGf4Bi0k8rZS1QEV1gqVqhk8QFei5dgcWtwLKYVs1MLgJ8ZyochRNZWs96JA1SgZOOtzTG_PQrZetojzZlj_WH4BtHJbYA?type=png)](https://mermaid.live/edit#pako:eNqFUDFuwzAM_ErAWRAoWY4dzQEydeoWaGEt1REaWYYiB00N_72ys6RTbzqQdzziZuiidaCh9_mUaLyYYVfQxRB8fuW7TL02cOeCI0cD_-iS-6Cbs391wCC4FMjbEjivGwP54oIzoAu1lL5Ww1J0NOX4_hg60DlNjsE0Wsru6KlPFEB_0vVWpiMNoGf4Bi0k8rZS1QEV1gqVqhk8QFei5dgcWtwLKYVs1MLgJ8ZyochRNZWs96JA1SgZOOtzTG_PQrZetojzZlj_WH4BtHJbYA)

## branch
`branch`で現在のブランチから新たなブランチを生成することができます。
`branch BRANCH_NAME`
```:mermaid
gitGraph
    commit
    commit
    branch develop
    commit
```
[![](https://mermaid.ink/img/pako:eNplT7FuwyAU_JXoZhQBxrHDXKlTpm4Vy4uhMWoAi-CqqeV_L3GWSr3p9O7evXcLhmQdNC6-vGaaRhN3FUMKwZf__JwpDuPOui93TdNfHQzB5UDe1rDloRiU0QVnoCu1lD8NTFyrj-aS3u5xgC55dgzzZKm4F0-XTAH6g663Op0oQi_4hhaS7_tGNUeueKu4Ui3DHboR_Z53x54fhJRCdmpl-EmpJlQ7V10j24OoUC2XDM76kvLpWXbrvJ143xYef6y_3GBQ9g?type=png)](https://mermaid.live/edit#pako:eNplT7FuwyAU_JXoZhQBxrHDXKlTpm4Vy4uhMWoAi-CqqeV_L3GWSr3p9O7evXcLhmQdNC6-vGaaRhN3FUMKwZf__JwpDuPOui93TdNfHQzB5UDe1rDloRiU0QVnoCu1lD8NTFyrj-aS3u5xgC55dgzzZKm4F0-XTAH6g663Op0oQi_4hhaS7_tGNUeueKu4Ui3DHboR_Z53x54fhJRCdmpl-EmpJlQ7V10j24OoUC2XDM76kvLpWXbrvJ143xYef6y_3GBQ9g)

## checkout
`checkout`でブランチを切り替えることができます。
`checkout BRANCH_NAME`
```:mermaid
gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    commit
    commit
```
[![](https://mermaid.ink/img/pako:eNp1kDFPxDAMhf_KyXNUpU3btJlPYmJiQ1lMYq7RXZIqpIij6n8nVxAD6Dw9-X1-tryCiZZAwcnlh4TzpMOhlIneu_xfvyQMZjpYeqdLnH_8icw5LvlP907CL-3RhXsoMPCUCmHLZevN0ZAn8qRBFWkxnTXosBUOlxyfrsGAymkhBstsMdPR4SmhB_WKl7fSnTGAWuEDVC1FNYi2FaMUDRf90DO4ghK1rLgc5diNYmikbDYGnzGWBF4NvC1s19el2o43DMi6HNPj9-f2B-4rnveB2x3bF3XxarE?type=png)](https://mermaid.live/edit#pako:eNp1kDFPxDAMhf_KyXNUpU3btJlPYmJiQ1lMYq7RXZIqpIij6n8nVxAD6Dw9-X1-tryCiZZAwcnlh4TzpMOhlIneu_xfvyQMZjpYeqdLnH_8icw5LvlP907CL-3RhXsoMPCUCmHLZevN0ZAn8qRBFWkxnTXosBUOlxyfrsGAymkhBstsMdPR4SmhB_WKl7fSnTGAWuEDVC1FNYi2FaMUDRf90DO4ghK1rLgc5diNYmikbDYGnzGWBF4NvC1s19el2o43DMi6HNPj9-f2B-4rnveB2x3bF3XxarE)

## merge
`merge`でブランチを結合します。
`merge BRANCH_NAME`
```:mermaid
gitGraph
    commit
    commit
    branch develop
    commit
    checkout main
    merge develop
    commit
```

[![](https://mermaid.ink/img/pako:eNptkD9vwyAQxb-KdTOKAOPYYY7UqVO3iuUKVxslgEVx1dTydy9xxuZNT_d-90e3gk2OQMPoy0vGeTKxqbIpBF_--4-M0U6No2-6pvkJO5G9pKU0AX18lALlkZ51AIOaVdDV9es9MVAmCmRAV-swXwyYuFUOl5LebtGCLnkhBsvssNDZ45gxgP7E61etzhhBr_ADWkh-GFrVnrjineJKdQxuoFsxHHh_GvhRSClkrzYGvynVCRXnqm9ldxRVquOSATlfUn59vGf_0r7ifW-437H9Ac1dYZc?type=png)](https://mermaid.live/edit#pako:eNptkD9vwyAQxb-KdTOKAOPYYY7UqVO3iuUKVxslgEVx1dTydy9xxuZNT_d-90e3gk2OQMPoy0vGeTKxqbIpBF_--4-M0U6No2-6pvkJO5G9pKU0AX18lALlkZ51AIOaVdDV9es9MVAmCmRAV-swXwyYuFUOl5LebtGCLnkhBsvssNDZ45gxgP7E61etzhhBr_ADWkh-GFrVnrjineJKdQxuoFsxHHh_GvhRSClkrzYGvynVCRXnqm9ldxRVquOSATlfUn59vGf_0r7ifW-437H9Ac1dYZc)

### カスタム
`merge`も`commit`と同様に以下の項目を定義することができます。

* id
* type
* tag

```:mermaid
gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    branch feature_1
    checkout feature_1
    commit
    checkout develop
    commit
    commit
    branch feature_2
    checkout feature_2
    commit
    checkout feature_1
    commit
    checkout develop
    merge feature_1 id: "Let's merge"
    merge feature_2 type: REVERSE
    checkout main
    merge develop tag: "v.2.0.0"
    commit
```

[![](https://mermaid.ink/img/pako:eNqVkjFrwzAQhf-KuKWLMbJkR7bmhi7tkkCHYiiqdbFNYssocqgb8t8rJykNTpvSm8Td--490O2hMBpBQlm7B6u6Km-Jr8I0Te2u329WtUVFNO5wY7rzvMJibXo36V5TK1Sut_gaTbhp_9L7z903fNgvPuyGz7-zNGhL_MZIrSXJ4RHd3fY0y-EnISNu6FCSxfx5vljOJw6NqttL6uxInCrH7buQhTSkX5tPISEAL_ak9r-5Hyc5uAobH2BktLLrETh4neqdWQ5tAdLZHgPoO60c3teqtKoBuVKbre92qgW5h3eQkeBhyuOYZ4IzymfpLIABJI9ESEUmsiTjKROCHQL4MMZvoGFKY69NZpGvOKEsANS1M_bpdG3HoztavByBMcfhE26J0Ao?type=png)](https://mermaid.live/edit#pako:eNqVkjFrwzAQhf-KuKWLMbJkR7bmhi7tkkCHYiiqdbFNYssocqgb8t8rJykNTpvSm8Td--490O2hMBpBQlm7B6u6Km-Jr8I0Te2u329WtUVFNO5wY7rzvMJibXo36V5TK1Sut_gaTbhp_9L7z903fNgvPuyGz7-zNGhL_MZIrSXJ4RHd3fY0y-EnISNu6FCSxfx5vljOJw6NqttL6uxInCrH7buQhTSkX5tPISEAL_ak9r-5Hyc5uAobH2BktLLrETh4neqdWQ5tAdLZHgPoO60c3teqtKoBuVKbre92qgW5h3eQkeBhyuOYZ4IzymfpLIABJI9ESEUmsiTjKROCHQL4MMZvoGFKY69NZpGvOKEsANS1M_bpdG3HoztavByBMcfhE26J0Ao)

## チェリーピック
特定のコミットのみを取り入れるチェリーピックを定義することができます。取り込むコミットのIDを指定します。
`cherry-pick id: "TARGET_ID"`
```:mermaid
gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit id: "target"
    commit
    checkout main
    commit
    cherry-pick id: "target"
    commit
```

[![](https://mermaid.ink/img/pako:eNp9kE9PwzAMxb9K5XOY2qzZupyROHHihnoxiWmjLn8U0mml6ncnLXBhEz5Zfs8_y28G5TWBhM6kp4ihb12RS3lrTbrt3yI61ReaLnT24UfvSQ1-TH-mN4TCaFm0kDB2lFq4Y_sFWTTurhzj9BCMGv5BAQNLMRN0fmpelezryVIL64rGOKwLS_bhmPzL5BTIFEdiMAaNiR4NdhEtyHc8f-RpQAdyhivIal_umqbmTVWeeCnqE4MJJK_ErhT7RvADr2txPB4WBp_eZ0LFgLRJPj5_Z7xFvRFfN309u3wBnQx6SQ?type=png)](https://mermaid.live/edit#pako:eNp9kE9PwzAMxb9K5XOY2qzZupyROHHihnoxiWmjLn8U0mml6ncnLXBhEz5Zfs8_y28G5TWBhM6kp4ihb12RS3lrTbrt3yI61ReaLnT24UfvSQ1-TH-mN4TCaFm0kDB2lFq4Y_sFWTTurhzj9BCMGv5BAQNLMRN0fmpelezryVIL64rGOKwLS_bhmPzL5BTIFEdiMAaNiR4NdhEtyHc8f-RpQAdyhivIal_umqbmTVWeeCnqE4MJJK_ErhT7RvADr2txPB4WBp_eZ0LFgLRJPj5_Z7xFvRFfN309u3wBnQx6SQ)

## まとめ
gitグラフの基本的な記法を紹介しました！

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

https://qiita.com/hirokiwa/items/94b73d5e542cac3d99fa

## 参考

https://mermaid.js.org/