Mermaidでブランチ図(Git-Flow)を描いてみた

はじめに

この記事では、「Mermaidでのブランチ図(Git-Flow)の書き方」について書いています。

Mermaidとは、フローチャートシステム開発で使われるシーケンス図、ガントチャートなどをテキストで表現することができます。

最近QiitaやGitHubなどでMermaidがサポートされるなど使える場面が増えているため、書き方を試しながら学んでみようとなったのが記事を書いたきっかけです。

Mermaidでブランチ図を書く練習として、Git-Flowを書いてみたいと思います。

自分に向けた備忘録の意味もありますが、「MermaidでGit-Flowを描くコードが知りたい」な人の一助になれば嬉しいです。

まずGit-Flowとは何か

Git-flowとはGitで開発を行う時の、ブランチの作り方などについてのモデルの一つです。

作るブランチとその役割を明確にし、複数人で開発していても混乱なくスムーズに進められるようになります。

ブランチの種類として以下のものがあります。

  • main: プロダクトとしてリリースするためのブランチ
  • develop: 開発用ブランチ。
  • feature: 機能を追加修正するために使うブランチ
  • hotfix:リリース後に出た緊急修正が必要なバグの修正などを行うためのブランチ
  • release: developをリリースするための準備に用いるブランチ

Git-FlowをMermaidで書く

ではGit-FlowをMermaidで書いていきます。コードは以下の通りです。

```mermaid
gitGraph
    commit tag: "0.1"
    branch hotfix order: 1
    branch develop order: 3
    commit
    branch feature_1 order: 4
    branch feature_2 order: 5
    commit
    checkout develop
    commit
    checkout feature_1
    commit
    checkout hotfix
    commit
    checkout main
    merge hotfix tag: "v0.2"
    checkout develop
    merge hotfix
    checkout feature_2
    commit
    checkout feature_1
    commit
    checkout develop
    merge feature_1
    branch release order: 2
    commit
    checkout feature_2
    commit
    checkout release
    commit
    checkout main
    merge release tag: "v1.0"
    checkout develop
    merge release
    checkout feature_2
    commit
    checkout develop
    merge feature_2
```

図は以下の通りになります。

gitGraph commit tag: "0.1" branch hotfix order: 1 branch develop order: 3 commit branch feature_1 order: 4 branch feature_2 order: 5 commit checkout develop commit checkout feature_1 commit checkout hotfix commit checkout main merge hotfix tag: "v0.2" checkout develop merge hotfix checkout feature_2 commit checkout feature_1 commit checkout develop merge feature_1 branch release order: 2 commit checkout feature_2 commit checkout release commit checkout main merge release tag: "v1.0" checkout develop merge release checkout feature_2 commit checkout develop merge feature_2

Git-flowを描いた際の所感

  • 特に図が長くなると縦書きにしたくなるが基本横向きにしか書けないようなのが難点(もしかしたら私が知らないだけかもしれませんが)
  • 例えば、releaseブランチってmainとdevelopにマージした後は消して、またreleaseする際に作るという認識ですが、途中を点線にしてその間ブランチは存在してないことを示すことが出来なそうなのが難点(これも私が知らないだけかもしれませんが。違うブランチなら違う名前のブランチ名で作れよってことなのかもしれません)

おわりに

「Mermaidでのブランチ図(Git-Flow)の書き方」について解説しました。

使い方を覚えて様々な場面でMermaidを活用できるようにしたいと思います。

さいごに、記事を書く上で参考にしたサイトのリンクを以下に掲載します。合わせて読んでいただくと良いかと思います。

https://qiita.com/KosukeSone/items/514dd24828b485c69a05

https://mermaid-js.github.io/mermaid/#/gitgraph