Gitのブランチ図作成にはMermaidがおすすめ！

Gitフローを図示するのにMermaidを使ってみたのですが、かなり使いやすくわかりやすかったので、記録しておきます。

やりたかったこと
Mermaidとは
1. サンプル
Mermaidでブランチ図を作る
1. GitLabフロー図を作ってみる
GitHubやVSCodeでも使えます

やりたかったこと

プロジェクトで採用するブランチ管理（フロー）を図示すること。
既に出回っているフロー図では対応しきれないので、オリジナルでフロー図を作りたい。
かといって、パワーポイントやデザインツールまでは使いたくない、という状況でした。

Mermaidとは

Mermaidとは、テキストやコードから図を作成できるツールです。
フローチャート、クラス図、円グラフ、ガントチャート、ER図、Gitグラフなど、様々な図を作成できます。
テキストから別の形式のものを生成するという点で言えば、マークダウンと似た性質を持ちます。

サンプル

例として、家から各施設・場所へ行くための順路を図に表しました。

テキスト

graph TD
    A[HOME] -->|Bus| C{Main Station}
    C -->|Train| D[Shopping Mall]
    C -->|Bus| E[Park]
    C -->|Taxi| F[Sea]

出力された図

テキストを5行書いただけで、ちゃんとしたフローチャート図が作成されました！
最初は書き方が独特に感じましたが、書いてみると思いのほかスムーズにできました👀

Mermaidでブランチ図を作る

それでは、Gitのブランチ図を作ってみます。
今回使用するのはMermaid Live Editorというサイトです。サイト上で、Mermaidを使った図を作成でき、図を画像などに出力可能です。

アクセスすると、デフォルトは以下のテキストになってると思います。
Mermaidでは時系列にコミットやチェックアウトなどGitの動作を書いていきます。
注意点としては、新しいブランチ使用時には、事前に宣言する必要がある点です。

    gitGraph
      commit
      commit
      %% これから新しく使うブランチを宣言
      branch develop 
      checkout develop
      commit
      commit
      checkout main
      merge develop
      commit
      commit

GitLabフロー図を作ってみる

GitフローよりもシンプルなGitLabフローを今回は図にしてみました。

テキスト

    gitGraph
      commit
      branch pre-production
      branch production
      checkout main
      commit
      checkout pre-production
      merge main
      checkout production
      merge pre-production
      checkout main
      commit
      checkout pre-production
      merge main
      checkout production
      merge pre-production