GitのダイアグラムをMermaidを使って描く

はじめに

GitのダイアグラムをMermaidを使ってきれいに書けるということなので試してみる。

環境

Windows 11 Professional
Mermaid 11.1.1

MermaidとGitGraphについて

Mermaidは、Markdown形式のテキストファイル内で視覚的なダイアグラムを作成できるツールであり、Gitリポジトリのブランチやコミットの流れを視覚化するためにも使用できる。
今回は、GitのグラフをMermaidで描くということを実践してみる。
Gitダイアグラムを作成する際は、Mermaidの Git graph 機能を使用する。

Gitダイアグラムを作成する

MermaidのGit graph構文について

MermaidGit graphは、コミットやブランチ、マージなどのGit操作を簡単に記述するための機能である。
基本的な構文は以下の通り。

gitGraph
   commit id: "Initial commit"
   branch develop
   commit id: "Add feature 1"
   checkout main
   commit id: "Update README"
   merge develop

以下のように描画される。

gitGraph
   commit id: "Initial commit"
   branch develop
   commit id: "Add feature 1"
   checkout main
   commit id: "Update README"
   merge develop

構文について

  • gitGraph
    Gitダイアグラムの作成を開始する。

  • commit id: “コミットメッセージ”
    コミットを追加する。id: に続けてコミットメッセージを記述する。

  • branch ブランチ名
    新しいブランチを作成する。

  • checkout ブランチ名
    指定したブランチに切り替える。

  • merge ブランチ名
    指定したブランチを現在のブランチにマージする。

例:Gitフローの可視化

   commit id: "Initial commit"
   branch feature/add-login
   checkout feature/add-login
   commit id: "Implement login feature"
   checkout main
   commit id: "Fix typo in README"
   merge feature/add-login
   branch release/v1.0
   checkout release/v1.0
   commit id: "Prepare release v1.0"

描画すると

gitGraph
   commit id: "Initial commit"
   branch feature/add-login
   checkout feature/add-login
   commit id: "Implement login feature"
   checkout main
   commit id: "Fix typo in README"
   merge feature/add-login
   branch release/v1.0
   checkout release/v1.0
   commit id: "Prepare release v1.0"

この例では以下のフローを可視化している。

  1. メインブランチ(main)からfeature/add-loginブランチを作成。
  2. feature/add-loginで機能を実装し、mainにマージ。
  3. リリースブランチ(release/v1.0)を作成して準備。

応用例

  • 複数のブランチの同時表示する:

    gitGraph
       commit id: "Start Project"
       branch feature/alpha
       branch feature/beta
       checkout feature/alpha
       commit id: "Alpha feature complete"
       checkout feature/beta
       commit id: "Beta feature complete"
       checkout main
       merge feature/alpha
       merge feature/beta
    
  • 詳細なコミットメッセージやタグ:

    gitGraph
       commit id: "Initial Commit" tag: "v1.0"
       branch hotfix/urgent
       checkout hotfix/urgent
       commit id: "Fix critical bug"
       checkout main
       merge hotfix/urgent
    

おまけ: Gitダイアグラムを使ってRebaseを説明する

MermaidgitGraphを使ってGitrebase操作を視覚化してrebaseについて説明する。

Rebaseの概要

rebaseは、あるブランチのコミット履歴を別のブランチの先端に移動させる操作となる。
これにより、分岐した履歴を直線的に整理し、履歴をよりクリーンにできる。

Rebaseの基本的な例

以下のシナリオを考える。

  • mainブランチに新しいコミットが追加された。
  • featureブランチで作業していたが、mainの最新コミットを取り込みたい。

操作前の状態

gitGraph
   commit id: "Initial commit"
   branch feature
   commit id: "Feature commit 1"
   commit id: "Feature commit 2"
   checkout main
   commit id: "Main commit 1"

この状態では、featureブランチがmainブランチから分岐しており、それぞれ異なる履歴を持っている。

Rebaseの操作

featureブランチで以下のコマンドを実行する。

git switch feature
git rebase main

この操作により、featureブランチの履歴がmainの最新コミットの後ろに移動する。

操作後の状態

以下はrebase後の状態を表したものとなる。

gitGraph
   commit id: "Initial commit"
   commit id: "Main commit 1"
   branch feature
   commit id: "Feature commit 1"
   commit id: "Feature commit 2"

変更点

  • featureブランチのコミット(“Feature commit 1"と"Feature commit 2”)がmainの最新コミット(“Main commit 1”)の後に移動した。
  • 履歴が直線的になり、クリーンな状態になった。

Rebaseの衝突 (Conflict)

rebase中にコンフリクトが発生する場合がある。その場合、次の手順で解決する。

  1. コンフリクトを解消する

    コンフリクトしたファイルを編集して修正し、次のコマンドを実行する。

    git add <ファイル名>
    git rebase --continue
  2. rebaseを中断する 作業を中断して元に戻すには、以下のコマンドを使う。

    git rebase --abort

RebaseとMergeの違い

rebaseは履歴を直線化してシンプルにするが、mergeは履歴をそのまま保持する。

Mergeの結果

gitGraph
   commit id: "Initial commit"
   branch feature
   commit id: "Feature commit 1"
   commit id: "Feature commit 2"
   checkout main
   commit id: "Main commit 1"
   merge feature

Rebaseの結果

gitGraph
   commit id: "Initial commit"
   commit id: "Main commit 1"
   branch feature
   commit id: "Feature commit 1"
   commit id: "Feature commit 2"
  • Merge: 履歴が分岐したまま残る。
  • Rebase: 履歴が直線化される。

Rebaseの注意点について

  • 公開ブランチでは避けるべき rebaseは履歴を書き換える操作のため、他の人と共有しているブランチに対して行うと競合や履歴を破壊する可能性がある。

  • 履歴が変わる 元のコミットは新しい履歴として扱われるため、commit hashが変わる。

参考

おわりに

Mermaidはコードで図を管理できるし、だれが作っても同じものができるというのが良いよね。
AWSのアーキテクチャ図も書けるようなので今後も試してみる。

Hugo で構築されています。
テーマ StackJimmy によって設計されています。