マーメイド#16 gitグラフ2

**ひとりマーメイド16日目**
**gitグラフ2**

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

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

↓↓前回の記事はこちら

https://qiita.com/hirokiwa/items/8ba4901a865ccdecb4e8

## まーめいど！ぎっと！
前回の記事ではマーメイドにおけるgitグラフの基本的な記法を紹介しました。gitグラフはコマンド入力のように直感的に記述することができます。

今日は主にgitグラフの装飾について紹介します。

## オプション
### ブランチ名の非表示
`showBranches`でブランチ名の表示を制御することができます。デフォルトでは`true`が指定されています。
|showBranches|ブランチ名|
|---|---|
|true|表示|
|false|非表示|

**表示**
`%%{init: {'gitGraph': {'showBranches': true}} }%%`

```:mermaid
%%{init:{
    'gitGraph':{
        'showBranches': true
}}}%%

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    branch feature_1
    checkout feature_1
    commit
    checkout develop
    checkout feature_1
    commit
    checkout develop
    merge feature_1
    commit
    commit
    checkout main
    commit
    commit
```

[![](https://mermaid.ink/img/pako:eNqdkk9LxDAQxb9KGSh7KSX9u2mOInjy5E0CEtvZNuwmKWmqrqXf3bQqSHf1YE6TN-_3BoaZoDYNAoMwnKSWjgXTrpXuzoq-2y2foTOvN1bousPBC86OOM_BHIZcc_3t5DrwrzZKSXdZP6940OALnkz_1e-wPprRbdRL6oDCjRafkg231X_Ovp79b1KhbfFP7FqEElL_ZoUIfKh3NH7z09Lh4DpUyIH5shH2yIHr2fvE6MzDWdfAltVHMPaNcHgrRWuFAnYQp8GrvdDAJngDVpC4rAjN9xlJ04pUWQRnYCndx4QUWVKVSZFXOZ0jeDfGB5CYkoyUVZYUlNLckxFgI52x95-Hsd7HOuFxBdYL-AAym7aG?type=png)](https://mermaid.live/edit#pako:eNqdkk9LxDAQxb9KGSh7KSX9u2mOInjy5E0CEtvZNuwmKWmqrqXf3bQqSHf1YE6TN-_3BoaZoDYNAoMwnKSWjgXTrpXuzoq-2y2foTOvN1bousPBC86OOM_BHIZcc_3t5DrwrzZKSXdZP6940OALnkz_1e-wPprRbdRL6oDCjRafkg231X_Ovp79b1KhbfFP7FqEElL_ZoUIfKh3NH7z09Lh4DpUyIH5shH2yIHr2fvE6MzDWdfAltVHMPaNcHgrRWuFAnYQp8GrvdDAJngDVpC4rAjN9xlJ04pUWQRnYCndx4QUWVKVSZFXOZ0jeDfGB5CYkoyUVZYUlNLckxFgI52x95-Hsd7HOuFxBdYL-AAym7aG)

**非表示**
`%%{init: {'gitGraph': {'showBranches': false}} }%%`

```:mermaid
%%{init:{
    'gitGraph':{
        'showBranches': false
}}}%%

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    branch feature_1
    checkout feature_1
    commit
    checkout develop
    checkout feature_1
    commit
    checkout develop
    merge feature_1
    commit
    commit
    checkout main
    commit
    commit
```

[![](https://mermaid.ink/img/pako:eNqdkk1LxDAQhv9KGSh7KaXpZzZHETx58iYBic1sG3ablDRV19L_bloVpLt6MKfJzPu8MyQzQW0kAoMwnJRWjgXTrlHuzoq-3S2XoTWvN1bousXBJw7iNOA8B3MYcs31t5TrwJ_adJ1yl_HzygcSX_Bk-q96i_XRjG6TvaQOKNxo8YlsuG3-Z-_r3v8mO7QN_olds-iE0r9JIQJv6hXSP_20VDi4FjvkwHwohT1y4Hr2OjE683DWNTBnR4xg7KVweKtEY0UHbP2QCHqhgU3wBizP4oKSnJRFsU8TQrIIzsBSSmKSlVle7pMkzTNSzBG8G-MdkphWFaU0TdKyrFIvigClcsbef67GuiFri8cVWOaYPwCF9rby?type=png)](https://mermaid.live/edit#pako:eNqdkk1LxDAQhv9KGSh7KaXpZzZHETx58iYBic1sG3ablDRV19L_bloVpLt6MKfJzPu8MyQzQW0kAoMwnJRWjgXTrlHuzoq-3S2XoTWvN1bousXBJw7iNOA8B3MYcs31t5TrwJ_adJ1yl_HzygcSX_Bk-q96i_XRjG6TvaQOKNxo8YlsuG3-Z-_r3v8mO7QN_olds-iE0r9JIQJv6hXSP_20VDi4FjvkwHwohT1y4Hr2OjE683DWNTBnR4xg7KVweKtEY0UHbP2QCHqhgU3wBizP4oKSnJRFsU8TQrIIzsBSSmKSlVle7pMkzTNSzBG8G-MdkphWFaU0TdKyrFIvigClcsbef67GuiFri8cVWOaYPwCF9rby)

### コミットラベルの非表示
`showCommitLabel`でコミットラベルの表示を制御することができます。デフォルトでは`true`が指定されています。
|showCommitLabel|コミットラベル|
|---|---|
|true|表示|
|false|非表示|

**表示**
`%%{init: {'gitGraph': {'showCommitLabel': true}} }%%`

```:mermaid
%%{init:{
    'gitGraph':{
        'showCommitLabel': true
}}}%%

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    branch feature_1
    checkout feature_1
    commit
    checkout develop
    checkout feature_1
    commit
    checkout develop
    merge feature_1
    commit
    commit
    checkout main
    commit
    commit
```

[![](https://mermaid.ink/img/pako:eNqdUk1LxDAQ_StloOyllPRzm1wVvOjJmwQk2862YZukZFN1Lf3vplVBdlcP5pKZN--9geFNUJsGgUEYTlJLx4Jp00p3Z8XQbZbm2JnXG6OUdPdih73HnB1xnoM5DLnm-pvMdeBfvTIv650Vuu6CBl-wN8PXvMP6YEZ3hl6q9ijcaPE5OdOd4z93X_f-t1KhbfFP2TULJaT-jQoReFPPaPzxp2XCwXWokAPzZSPsgQPXs-eJ0ZnHk66BLaePYBwa4fBWitYKBWwv-qNHB6GBTfAGrCBxSUmVbzOSppTQLIITsLTaxoQUWULLpMhpXs0RvBvjDUhckYyUNKVZTivq_wiwkc7Yh89srBFZNzytgjUBH7cRt7g?type=png)](https://mermaid.live/edit#pako:eNqdUk1LxDAQ_StloOyllPRzm1wVvOjJmwQk2862YZukZFN1Lf3vplVBdlcP5pKZN--9geFNUJsGgUEYTlJLx4Jp00p3Z8XQbZbm2JnXG6OUdPdih73HnB1xnoM5DLnm-pvMdeBfvTIv650Vuu6CBl-wN8PXvMP6YEZ3hl6q9ijcaPE5OdOd4z93X_f-t1KhbfFP2TULJaT-jQoReFPPaPzxp2XCwXWokAPzZSPsgQPXs-eJ0ZnHk66BLaePYBwa4fBWitYKBWwv-qNHB6GBTfAGrCBxSUmVbzOSppTQLIITsLTaxoQUWULLpMhpXs0RvBvjDUhckYyUNKVZTivq_wiwkc7Yh89srBFZNzytgjUBH7cRt7g)

**非表示**
`%%{init: {'gitGraph': {'showCommitLabel': false}} }%%`

```:mermaid
%%{init:{
    'gitGraph':{
        'showCommitLabel': false
}}}%%

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    branch feature_1
    checkout feature_1
    commit
    checkout develop
    checkout feature_1
    commit
    checkout develop
    merge feature_1
    commit
    commit
    checkout main
    commit
    commit
```

[![](https://mermaid.ink/img/pako:eNqdUk1LxDAQ_StloOyllPRzm1wVvOjJmwQk2862YZukZFN1Lf3vplVBdlcP5jKTN--9CZOZoDYNAoMwnKSWjgXTppXuzoqh2yyXY2deb4xS0t2LHfYe24v-iPMczGHINdffbK4Df-qVepnvrNB1FzT4gr0Zvuod1gczujP0UrVH4UaLz8mZ7hz_2fu697-VCm2Lf8quWSgh9W9UiMCbekbjpz8tFQ6uQ4UcmE8bYQ8cuJ49T4zOPJ50DczZESMYh0Y4vJWitUIBWz8kgkFoYBO8AStIXFJS5duMpCklNIvgBCyttjEhRZbQMilymldzBO_GeAMSVyQjJU1pltOK-hgBNtIZ-_C5HOuOrB2eVsHyjPkDYK24Aw?type=png)](https://mermaid.live/edit#pako:eNqdUk1LxDAQ_StloOyllPRzm1wVvOjJmwQk2862YZukZFN1Lf3vplVBdlcP5jKTN--9CZOZoDYNAoMwnKSWjgXTppXuzoqh2yyXY2deb4xS0t2LHfYe24v-iPMczGHINdffbK4Df-qVepnvrNB1FzT4gr0Zvuod1gczujP0UrVH4UaLz8mZ7hz_2fu697-VCm2Lf8quWSgh9W9UiMCbekbjpz8tFQ6uQ4UcmE8bYQ8cuJ49T4zOPJ50DczZESMYh0Y4vJWitUIBWz8kgkFoYBO8AStIXFJS5duMpCklNIvgBCyttjEhRZbQMilymldzBO_GeAMSVyQjJU1pltOK-hgBNtIZ-_C5HOuOrB2eVsHyjPkDYK24Aw)

### デフォルトブランチの名前
`mainBranchName`デフォルトブランチの名前を宣言することができます。デフォルトでは`main`で初期化されます。

`%%{init: {'gitGraph': {'mainBranchName': 'BRANCH_NAME'}} }%%`

```:mermaid
%%{init:{
    'gitGraph':{
        'mainBranchName':'my_branch'
}}}%%

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    branch feature_1
    checkout feature_1
    commit
    checkout develop
    checkout feature_1
    commit
    checkout develop
    merge feature_1
    commit
    commit
    checkout my_branch
    commit
    commit
```

[![](https://mermaid.ink/img/pako:eNqdkk1LxDAQhv9KGSi9lCX92LbJUQRPevEmgSW2s23YTVJiKtbS_27aVZHd1YO5ZPLOPO-EZCaoTYPAIAwnqaVjwRS10t1Z0XfRclBC6hsrdN09CIVeitS4e16FaJ6DOQy55voL4TrwqzZKSXcZn7CgwVc8mv4z32F9MIM7Uy-pPQo3WNwlZ9y5_rP3de9_kwpti39i1yy-3-u3eojBO_uHbvw_TEuGg-tQIQfmw0bYAweuZ18nBmceR10Dc3bAGIa-EQ5vpWitUMD24vji1V5oYBO8AUu2dFNQUpGqzEhJijSGEVhalRtCtllCi2Sb07yaY3g3xhuQTUUyUtCUZjmtqN9jwEY6Y-9PY7JOy9rhaQWWa8wfpZK7dQ?type=png)](https://mermaid.live/edit#pako:eNqdkk1LxDAQhv9KGSi9lCX92LbJUQRPevEmgSW2s23YTVJiKtbS_27aVZHd1YO5ZPLOPO-EZCaoTYPAIAwnqaVjwRS10t1Z0XfRclBC6hsrdN09CIVeitS4e16FaJ6DOQy55voL4TrwqzZKSXcZn7CgwVc8mv4z32F9MIM7Uy-pPQo3WNwlZ9y5_rP3de9_kwpti39i1yy-3-u3eojBO_uHbvw_TEuGg-tQIQfmw0bYAweuZ18nBmceR10Dc3bAGIa-EQ5vpWitUMD24vji1V5oYBO8AUu2dFNQUpGqzEhJijSGEVhalRtCtllCi2Sb07yaY3g3xhuQTUUyUtCUZjmtqN9jwEY6Y-9PY7JOy9rhaQWWa8wfpZK7dQ)

### コミットラベルの水平表示
`rotateCommitLabel`でコミットラベルを水平に表示することができます。デフォルトでは`true`が指定され、斜め45°で表示されます。

|rotateCommitLabel|コミットラベル|
|---|---|
|true|斜め|
|false|水平|

**斜め**
`%%{init: {'gitGraph': {'rotateCommitLabel': true}} }%%`

```:mermaid
%%{init:{
    'gitGraph':{
        'rotateCommitLabel':true
}}}%%

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    branch feature_1
    checkout feature_1
    commit
    checkout develop
    checkout feature_1
    commit
    checkout develop
    merge feature_1
    commit
    commit
    checkout main
    commit
    commit
```

[![](https://mermaid.ink/img/pako:eNqdUk1LxDAQ_StloOyllPS7yVXBi568SUCy7WwbtklKTMW19L-bVgXZXT2YSyZv3nsDkzdDY1oEBmE4Sy0dC-ZdJ92dFWO_Wx_WOOHwxigl3b3Y4-BRZydclmAJQ665_qZzHfjTbMzLem-FbvqgxVcczPjV77E5msmdoZeqAwo3WXxOznTn-M_Z173_rVRoO_xTds1CCal_o0IE3tQzWr_-ee1wcD0q5MB82Qp75MD14nlicubxpBtg6-ojmMbWf8qtFJ0VCthBDC8eHYUGNsMbsKSgcUlJTeoqIxUp0whOwNK6igkpsoSWSZHTvF4ieDfGG5C4JhkpaUqznNbU3xFgK52xD5_p2EKyTXjaBFsCPgB_jriK?type=png)](https://mermaid.live/edit#pako:eNqdUk1LxDAQ_StloOyllPS7yVXBi568SUCy7WwbtklKTMW19L-bVgXZXT2YSyZv3nsDkzdDY1oEBmE4Sy0dC-ZdJ92dFWO_Wx_WOOHwxigl3b3Y4-BRZydclmAJQ665_qZzHfjTbMzLem-FbvqgxVcczPjV77E5msmdoZeqAwo3WXxOznTn-M_Z173_rVRoO_xTds1CCal_o0IE3tQzWr_-ee1wcD0q5MB82Qp75MD14nlicubxpBtg6-ojmMbWf8qtFJ0VCthBDC8eHYUGNsMbsKSgcUlJTeoqIxUp0whOwNK6igkpsoSWSZHTvF4ieDfGG5C4JhkpaUqznNbU3xFgK52xD5_p2EKyTXjaBFsCPgB_jriK)

**水平**
`%%{init: {'gitGraph': {'rotateCommitLabel': false}} }%%`

```:mermaid
%%{init:{
    'gitGraph':{
        'rotateCommitLabel':false
}}}%%

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    branch feature_1
    checkout feature_1
    commit
    checkout develop
    checkout feature_1
    commit
    checkout develop
    merge feature_1
    commit
    commit
    checkout main
    commit
    commit
```

[![](https://mermaid.ink/img/pako:eNqdUk1LxDAQ_StloOyllPS7yVXBi568SUCy7WwbtklKTMW19L-bVgXZXT2YS2bevPcmZGaGxrQIDMJwllo6Fsy7Tro7K8Z-tybWOOHwxigl3b3Y4-DRgxhecFmCJQy55vqbz3XgT7NRL-O9FbrpgxZfcTDjV73H5mgmd4Zeqg4o3GTxOTnTneM_e1_3_rdSoe3wT9k1CyWk_o0KEXhTz2j9_89rhYPrUSEH5sNW2CMHrhfPE5MzjyfdAHN2wgimsfVTuZWis0IB2wYSwSg0sBnegCUFjUtKalJXGalImUZwApbWVUxIkSW0TIqc5vUSwbsx3oDENclISVOa5bSm_o4AW-mMffhcj21Ltg5Pm2B9xvIBKfi41Q?type=png)](https://mermaid.live/edit#pako:eNqdUk1LxDAQ_StloOyllPS7yVXBi568SUCy7WwbtklKTMW19L-bVgXZXT2YS2bevPcmZGaGxrQIDMJwllo6Fsy7Tro7K8Z-tybWOOHwxigl3b3Y4-DRgxhecFmCJQy55vqbz3XgT7NRL-O9FbrpgxZfcTDjV73H5mgmd4Zeqg4o3GTxOTnTneM_e1_3_rdSoe3wT9k1CyWk_o0KEXhTz2j9_89rhYPrUSEH5sNW2CMHrhfPE5MzjyfdAHN2wgimsfVTuZWis0IB2wYSwSg0sBnegCUFjUtKalJXGalImUZwApbWVUxIkSW0TIqc5vUSwbsx3oDENclISVOa5bSm_o4AW-mMffhcj21Ltg5Pm2B9xvIBKfi41Q)

### ブランチの表示順
`mainBranchOrder`mainブランチの表示順位を指定することができます。デフォルトでは0が指定されます。
`%%{init: {'gitGraph': {'mainBranchOrder': NUMBER}} }%%`
そのほかのブランチの順番は`order`で定義します。
`branch BRANCH_NAME order:NUMBER`

```:mermaid
%%{init:{
    'gitGraph':{
        'mainBranchOrder': 1
}}}%%

gitGraph
    commit
    commit
    branch develop order:0
    checkout develop
    commit
    branch feature_1 order:2
    checkout feature_1
    commit
    checkout develop
    checkout feature_1
    commit
    checkout develop
    merge feature_1
    commit
    commit
    checkout main
    commit
    commit
```

[![](https://mermaid.ink/img/pako:eNqdkk1LxDAQhv9KGSh7KSX9bnIUwZN48CYBic1sG3ablJiKa-l_N627HrTrwVwymXmfd4YkEzRGIjAIw0lp5Vgw7Vrl7qwYut1y6IXSN1bopnuwEq3PJfMczGHINdcXJdeBX43pe-V-xy8rHkh8w6MZArP4MHLWddgczOgu1av0HoUbLT4nZz79wX_XN2bZ7vFvskfb4p_YlsVykdekEIE39QrpX2JaKhxchz1yYD6Uwh44cD17nRideTzpBpizI0YwDlI4vFWitaIHthfHV58dhAY2wTuwpKBxSUlN6iojFSnTCE7A0rqKCSmyhJZJkdO8niP4MMYbkLgmGSlpSrOc1tTvEaBUztj7r4-y_pe1w9MKLGPMnx0Hu2A?type=png)](https://mermaid.live/edit#pako:eNqdkk1LxDAQhv9KGSh7KSX9bnIUwZN48CYBic1sG3ablJiKa-l_N627HrTrwVwymXmfd4YkEzRGIjAIw0lp5Vgw7Vrl7qwYut1y6IXSN1bopnuwEq3PJfMczGHINdcXJdeBX43pe-V-xy8rHkh8w6MZArP4MHLWddgczOgu1av0HoUbLT4nZz79wX_XN2bZ7vFvskfb4p_YlsVykdekEIE39QrpX2JaKhxchz1yYD6Uwh44cD17nRideTzpBpizI0YwDlI4vFWitaIHthfHV58dhAY2wTuwpKBxSUlN6iojFSnTCE7A0rqKCSmyhJZJkdO8niP4MMYbkLgmGSlpSrOc1tTvEaBUztj7r4-y_pe1w9MKLGPMnx0Hu2A)

## スタイリング
ディレクティブ内で`themeVariables`により細かいスタイルを定義することができます。

### ブランチカラー
`git0`~`git7`の最大8つのブランチに対して色を指定することができます。ブランチが8つを超えた場合、8色が循環してレンダリングされます。

オブジェクト形式でカラーコードを記述します。
```:mermaid
%%{init:{
    'themeVariables':{
        'git0': '#ff0000',
        'git1': '#00ff00',
        'git2': '#0000ff',
        'git3': '#ff00ff',
        'git4': '#00ffff',
        'git5': '#ffff00',
        'git6': '#ff00ff',
        'git7': '#00ffff'
}}}%%

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    branch feature_1
    checkout feature_1
    commit
    branch feature_2
    checkout feature_2
    commit
    branch feature_3
    checkout feature_3
    commit
    branch feature_4
    checkout feature_4
    commit
```
[![](https://mermaid.ink/img/pako:eNqFkk9rgzAYh79KeYd4kRKN_5LzYKedBjsMYaQaa2hNJI1jnfjdl6alrDrbXAzvk-eXIL8BSlVxoOB5g5DC0NVQyJVdvml4y9-ZFmyz5wf_ChzcCoPsyH-qa2SXH9yy0DGETnTKogs70SnD18w5i6-Zc5ZcvP_uS-9kZn8zCzmOo-cVspAWvWjWNefTpWpbYeb7jWaybFYV_-J71V14w8ud6s1kOrdqzkyv-Wc48abzZTNaMKOHJl4w8UMzXjDjWxMCaLlumahss1xvCnB9KoDabcX0rgD7v-051hv1dpQlUKN7HkDfVczwZ8G2mrVAa7Y_2GnHJNABvoGGCVmnBOUozzDKUBoFcAQa5dkaoQSHJA2TmMT5GMCPUjYArXOEUUoigmOSE_sNgFfCKP16Lr7rv7vhwwmnZ4y_Iu3pIw?type=png)](https://mermaid.live/edit#pako:eNqFkk9rgzAYh79KeYd4kRKN_5LzYKedBjsMYaQaa2hNJI1jnfjdl6alrDrbXAzvk-eXIL8BSlVxoOB5g5DC0NVQyJVdvml4y9-ZFmyz5wf_ChzcCoPsyH-qa2SXH9yy0DGETnTKogs70SnD18w5i6-Zc5ZcvP_uS-9kZn8zCzmOo-cVspAWvWjWNefTpWpbYeb7jWaybFYV_-J71V14w8ud6s1kOrdqzkyv-Wc48abzZTNaMKOHJl4w8UMzXjDjWxMCaLlumahss1xvCnB9KoDabcX0rgD7v-051hv1dpQlUKN7HkDfVczwZ8G2mrVAa7Y_2GnHJNABvoGGCVmnBOUozzDKUBoFcAQa5dkaoQSHJA2TmMT5GMCPUjYArXOEUUoigmOSE_sNgFfCKP16Lr7rv7vhwwmnZ4y_Iu3pIw)

### ブランチラベルカラー
ブランチラベルの文字の色を指定することができます。
`gitBranchLabel0`~`gitBranchLabel7`の最大8つのブランチラベルに対して文字の色を指定することができます。ブランチが8つを超えた場合、8色が循環してレンダリングされます。

ブランチカラーと同様にオブジェクト形式でカラーコードを記述します。
```:mermaid
%%{init:{
    'themeVariables':{
        'gitBranchLabel0': '#ff0000',
        'gitBranchLabel1': '#00ff00',
        'gitBranchLabel2': '#0000ff',
        'gitBranchLabel3': '#ff00ff',
        'gitBranchLabel4': '#00ffff',
        'gitBranchLabel5': '#ffff00',
        'gitBranchLabel6': '#ff00ff',
        'gitBranchLabel7': '#00ffff'
}}}%%

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    branch feature_1
    checkout feature_1
    commit
    branch feature_2
    checkout feature_2
    commit
    branch feature_3
    checkout feature_3
    commit
    branch feature_4
    checkout feature_4
    commit
```
[![](https://mermaid.ink/img/pako:eNqNk11rgzAUhv9KOUO8kZJE60cux2A329VgF0MYqcYaqomkcawT__vStCulRbtcxTfPc06QkwEKVXKg4HmDkMLQIZcLu3xT85a_My3YuuE7_y93ZxthHjWTRf3C1rxBPl34D1WF7PKDSQw7DKEDOIORE3YAZ7Dw3HQWi85NZ7HVqdqdu8X_a5pcNs3lOI6el8tcWupZs64-ioVqW2Fu92tXaFHyL96o7nRe82KrenOV3loVZ6bX_BNfedf5tEkmTHLXDCfM8K4ZTZjRpQkBtFy3TJR2Wt005uCGNAdqtyXT2xzs37Yc641628sCqNE9D6DvSmb4k2AbzVqgFWt2Nu2YBDrAN1Acp8s0i-IwS9AqxSRJA9jbOIqWif1AcYYJjklCxgB-lLIl0DLBIU5Jlq6SlMQkDAPgpTBKvx6fk3tVrseHEw4XGX8BPOwJ-w?type=png)](https://mermaid.live/edit#pako:eNqNk11rgzAUhv9KOUO8kZJE60cux2A329VgF0MYqcYaqomkcawT__vStCulRbtcxTfPc06QkwEKVXKg4HmDkMLQIZcLu3xT85a_My3YuuE7_y93ZxthHjWTRf3C1rxBPl34D1WF7PKDSQw7DKEDOIORE3YAZ7Dw3HQWi85NZ7HVqdqdu8X_a5pcNs3lOI6el8tcWupZs64-ioVqW2Fu92tXaFHyL96o7nRe82KrenOV3loVZ6bX_BNfedf5tEkmTHLXDCfM8K4ZTZjRpQkBtFy3TJR2Wt005uCGNAdqtyXT2xzs37Yc641628sCqNE9D6DvSmb4k2AbzVqgFWt2Nu2YBDrAN1Acp8s0i-IwS9AqxSRJA9jbOIqWif1AcYYJjklCxgB-lLIl0DLBIU5Jlq6SlMQkDAPgpTBKvx6fk3tVrseHEw4XGX8BPOwJ-w)

### コミットラベル
コミットラベルの文字の色と背景色を指定することができます。またフォントサイズの変更が可能です。

`commitLabelColor`:文字の色
`commitLabelBackground`:背景色
`commitLabelFontSize`:フォントサイズ

こちらも同様にオブジェクト形式でカラーコードを記述します。

```:mermaid
%%{init:{
    'themeVariables':{
        'commitLabelColor': '#FFFFFF',
        'commitLabelBackground': '#FF0000',
        'commitLabelFontSize': '20px'
}}}%%

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    branch feature_1
    checkout feature_1
    commit
    checkout develop
    checkout feature_1
    commit
    checkout develop
    merge feature_1
    commit
    commit
    checkout main
    commit
    commit
```

[![](https://mermaid.ink/img/pako:eNqdUk1rwzAM_StFI-QSSuK0-fBxG91lOxV2GIGhJmpimtjBdUbbkP8-N-1g9GOH6SQ_vfckLPWQq4KAg-P0QgrD-0xObLimoobeUQtc1bR1f_CxlqumEeYVV1Q_qVppl0_ch8UYrneb94j5ptSqk8WZ7Nu4R14oaZbiQEcq89udm8lhGBwnk5kshXnR2FYn5Ul0na80yryaFPRFtWrP9YryjerMBXqtWhOaTtNncKG7xH_3vu39b2VDuqQ_ZbcsGhTyHhU8sKaWUdhlj8vMYNxxBtymBepNBvafLQ87o5Z7mQM3uiMPurZAQ88CS40N8DXWW4u2KIH3sAMeRMk0SWdRmMb-PAlYnHiwt_BsNo3tw4_SgAURi9ngwUEpa-FP4yAMEpYm8zhhEQtDD6gQRum30zWORzn2-BgFx0GGb8KU11s?type=png)](https://mermaid.live/edit#pako:eNqdUk1rwzAM_StFI-QSSuK0-fBxG91lOxV2GIGhJmpimtjBdUbbkP8-N-1g9GOH6SQ_vfckLPWQq4KAg-P0QgrD-0xObLimoobeUQtc1bR1f_CxlqumEeYVV1Q_qVppl0_ch8UYrneb94j5ptSqk8WZ7Nu4R14oaZbiQEcq89udm8lhGBwnk5kshXnR2FYn5Ul0na80yryaFPRFtWrP9YryjerMBXqtWhOaTtNncKG7xH_3vu39b2VDuqQ_ZbcsGhTyHhU8sKaWUdhlj8vMYNxxBtymBepNBvafLQ87o5Z7mQM3uiMPurZAQ88CS40N8DXWW4u2KIH3sAMeRMk0SWdRmMb-PAlYnHiwt_BsNo3tw4_SgAURi9ngwUEpa-FP4yAMEpYm8zhhEQtDD6gQRum30zWORzn2-BgFx0GGb8KU11s)

### タグ
コミットラベルの文字の色と背景色を指定することができます。またフォントサイズの変更が可能です。

`tagLabelColor`:文字の色
`tagLabelBorder`:境界の色
`tagLabelBackground`:背景色
`tagLabelFontSize`:フォントサイズ

```:mermaid
%%{init:{
    'themeVariables':{
        'tagLabelColor': '#FFFFFF',
        'tagLabelBorder': '#FFFFFF',
        'tagLabelBackground': '#FF0000',
        'tagLabelFontSize': '15px'
}}}%%

gitGraph
    commit tag: "first"
    commit tag: "v.1.0.0"
    branch develop
    checkout develop
    commit tag: "branch"
    branch feature_1
    checkout feature_1
    commit tag: "add"
    checkout develop
    checkout feature_1
    commit tag: "rebased"
    checkout develop
    merge feature_1
    commit tag: "add"
    commit tag: "delete"
    checkout main
    commit tag:"v.2.0.0"
    commit tag:"v.3.0.0"
```
[![](https://mermaid.ink/img/pako:eNqNU81qg0AQfhWZEryIuJqo8diW9NKeCj0UoUzciVmiu7JZQ9rgu3ejbWlMIJnbfn8zDLMHKBQnyGAyOQgpTHbIpWPLNWuq6Q21wGVFW_cXHzgsn3FJ1YOqlHYzx71b9OV6F0T3SnO6rsJiU2rVSv6jDGxdVC6UNK_ii446Nmv2bi67rptMcpnLUpgnjc16sBWqroVxrDFzclgJvTU5XKJ2PvMDP_gllxplsXY47ahSzY9hTcVGtWaEnsQMvlHKitC0mj7YKGeMnyQh53-TXm58U4ymJW7pSlRNuqTbxzkhOFVk6Cy_RiHP5Mc1h__XPOKigQMP7EQ2gduj7I8uh_4Wc-g7ot4cAzqrw9ao109ZQGZ0Sx60DUdDjwJLjTVkK6y2Fm1QQnaAPWQsTv10Po2jeRLMUhYmqQefFp5O_cQ-gnjOQhaHSdh58KWUjQj8hEUsDefpLEnDOIwiD4gLo_TL8Gv6z9P3eO8Nx0G6b1IDBp0?type=png)](https://mermaid.live/edit#pako:eNqNU81qg0AQfhWZEryIuJqo8diW9NKeCj0UoUzciVmiu7JZQ9rgu3ejbWlMIJnbfn8zDLMHKBQnyGAyOQgpTHbIpWPLNWuq6Q21wGVFW_cXHzgsn3FJ1YOqlHYzx71b9OV6F0T3SnO6rsJiU2rVSv6jDGxdVC6UNK_ii446Nmv2bi67rptMcpnLUpgnjc16sBWqroVxrDFzclgJvTU5XKJ2PvMDP_gllxplsXY47ahSzY9hTcVGtWaEnsQMvlHKitC0mj7YKGeMnyQh53-TXm58U4ymJW7pSlRNuqTbxzkhOFVk6Cy_RiHP5Mc1h__XPOKigQMP7EQ2gduj7I8uh_4Wc-g7ot4cAzqrw9ao109ZQGZ0Sx60DUdDjwJLjTVkK6y2Fm1QQnaAPWQsTv10Po2jeRLMUhYmqQefFp5O_cQ-gnjOQhaHSdh58KWUjQj8hEUsDefpLEnDOIwiD4gLo_TL8Gv6z9P3eO8Nx0G6b1IDBp0)

## まとめ
gitグラフの記法について紹介しました。かなり細かくスタイルをカスタムできるんですね。

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

https://qiita.com/hirokiwa/items/33e38377054fc5c9c81d

## 参考

https://mermaid.js.org/