【Notion】MermaidでGitフローを書いてみる（作成手順も記載）

今回はNotionで使えるMermaid記法に関して書いていきます。

Notion×Mermaidの記事はこれまで何度か投稿しています（詳細は以下リンクにて）。

前提情報

Mermaidとは？

まずはMermaidとは？に関して書いておきます。

Mermaidとは、フローチャート、シーケンス図、クラス図、ガントチャート、およびgitグラフを生成するためのマークダウン構文です。
出典：グラフを生成可能なマークダウン構文「Mermaid」がNotionで利用出来るようになりました #notion | DevelopersIO

詳しくは以下のリンクを見て頂ければと。
dev.classmethod.jp

Gitフローとは？

Gitフローとは？に関しても書いておきます。

git-flowとはGitにおけるリポジトリの分岐モデルであり、ルールのことを指します。
それぞれのブランチを明確に定義し、複数人での開発時にそれぞれが好き勝手にブランチを作成し混乱することを防ぎます。
出典：【Git】git-flowを知ろう！利用時のルールについて｜エンジニアBLOG｜株式会社クラウドスミス

詳しくは以下のリンクを見て頂ければと。
cloudsmith.co.jpjitera.comdev.classmethod.jp

作成したGitフロー

まずは手っ取り早く、今回作成したGitフローの画像を貼ります。

Gitフロー（画像）

作成したGitフローは以下です。

Gitフロー（コード）

上記のGitフローを生成するコードは以下の通りです。

gitGraph
  checkout main
  commit tag: "v1.0.0"
  branch develop order:3
  checkout develop
  commit
  commit
  checkout main
  branch hotfix order:1
  checkout hotfix
  commit
  checkout main
  merge hotfix tag: "v1.0.1"
  checkout develop
  merge hotfix
  commit
  branch feature1 order:4
  checkout feature1
  commit
  commit
  checkout develop
  merge feature1
  branch feature2 order:5
  checkout feature2
  commit
  checkout develop
  merge feature2
  branch release order:2
  checkout release
  commit
  commit
  checkout main
  merge release tag: "v1.1.0"
  checkout develop
  merge release

追加設定

色々と追加設定できるので、いくつかピックアップして紹介します。

テーマ（色合い）を変更する

Mermaidではテーマ（色合い）を変更することもできます。
テーマは5種類ほどあるのですが、そこから「base」を指定してみます。

コードは以下の通りです。
1行目を追加しています。
2行目以降は変更していません。

%%{init:{'theme':'base'}}%%
gitGraph
  checkout main
  commit tag: "v1.0.0"
  branch develop order:3
  checkout develop
  commit
  commit
  checkout main
  branch hotfix order:1
  checkout hotfix
  commit
  checkout main
  merge hotfix tag: "v1.0.1"
  checkout develop
  merge hotfix
  commit
  branch feature1 order:4
  checkout feature1
  commit
  commit
  checkout develop
  merge feature1
  branch feature2 order:5
  checkout feature2
  commit
  checkout develop
  merge feature2
  branch release order:2
  checkout release
  commit
  commit
  checkout main
  merge release tag: "v1.1.0"
  checkout develop
  merge release

テーマ（色合い）変更に関しては、以下記事にて詳しく書いています。
こちらも良ければぜひ。
miya-moto-memo.hatenablog.com

mainブランチの名前を変更する

デフォルトブランチ（mainブランチ）の名前を変更できます。
”master”という名前に変更してみます。

コードは以下の通りです。
4～6行目を追加しました。

%%{
  init: {
    'theme':'base',
    'gitGraph': {
      'mainBranchName': 'master'
    }
  }
}%%
gitGraph
  checkout master
  commit tag: "v1.0.0"
  branch develop order:3
  checkout develop
  commit
  commit
  checkout master
  branch hotfix order:1
  checkout hotfix
  commit
  checkout master
  merge hotfix tag: "v1.0.1"
  checkout develop
  merge hotfix
  commit
  branch feature1 order:4
  checkout feature1
  commit
  commit
  checkout develop
  merge feature1
  branch feature2 order:5
  checkout feature2
  commit
  checkout develop
  merge feature2
  branch release order:2
  checkout release
  commit
  commit
  checkout master
  merge release tag: "v1.1.0"
  checkout develop
  merge release

各ブランチの色を指定する

各ブランチの色を指定できます。

コードは以下の通りです。

「gitBranchLabel0」が文字色、「git0」がブランチ本体の色です。
”0”～”5”まで指定しています。

色はキーワード（skyblue、red等）で指定したり、カラーコード（#ffffff等）で指定したりできます。

%%{
  init: {
    'theme':'base',
    'gitGraph': {
      'mainBranchName': 'master'
    },
    'themeVariables': {
      'gitBranchLabel0': '#ffffff',
      'git0': 'skyblue',
      'gitBranchLabel1': '#ffffff',
      'git1': 'red',
      'gitBranchLabel2': '#ffffff',
      'git2': 'green',
      'gitBranchLabel3': '#ffffff',
      'git3': 'orange',
      'gitBranchLabel4': '#ffffff',
      'git4': 'pink',
      'gitBranchLabel5': '#ffffff',
      'git5': 'pink'
    }
  }
}%%
gitGraph
  checkout master
  commit tag: "v1.0.0"
  branch develop order:3
  checkout develop
  commit
  commit
  checkout master
  branch hotfix order:1
  checkout hotfix
  commit
  checkout master
  merge hotfix tag: "v1.0.1"
  checkout develop
  merge hotfix
  commit
  branch feature1 order:4
  checkout feature1
  commit
  commit
  checkout develop
  merge feature1
  branch feature2 order:5
  checkout feature2
  commit
  checkout develop
  merge feature2
  branch release order:2
  checkout release
  commit
  commit
  checkout master
  merge release tag: "v1.1.0"
  checkout develop
  merge release

上から下に流れるGitフロー

これまでのGitフローは「左から右に流れる図」でした。
今回はそれを「上から下に流れる図」に変更してみます。

コードは以下の通りです。
「gitGraph」のところに「TB:」を追加しただけです。

%%{
  init: {
    'theme':'base',
    'gitGraph': {
      'mainBranchName': 'master'
    },
    'themeVariables': {
      'gitBranchLabel0': '#ffffff',
      'git0': 'skyblue',
      'gitBranchLabel1': '#ffffff',
      'git1': 'red',
      'gitBranchLabel2': '#ffffff',
      'git2': 'green',
      'gitBranchLabel3': '#ffffff',
      'git3': 'orange',
      'gitBranchLabel4': '#ffffff',
      'git4': 'pink',
      'gitBranchLabel5': '#ffffff',
      'git5': 'pink'
    }
  }
}%%
gitGraph TB:
  checkout master
  commit tag: "v1.0.0"
  branch develop order:3
  checkout develop
  commit
  commit
  checkout master
  branch hotfix order:1
  checkout hotfix
  commit
  checkout master
  merge hotfix tag: "v1.0.1"
  checkout develop
  merge hotfix
  commit
  branch feature1 order:4
  checkout feature1
  commit
  commit
  checkout develop
  merge feature1
  branch feature2 order:5
  checkout feature2
  commit
  checkout develop
  merge feature2
  branch release order:2
  checkout release
  commit
  commit
  checkout master
  merge release tag: "v1.1.0"
  checkout develop
  merge release