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を活用できるようにしたいと思います。
さいごに、記事を書く上で参考にしたサイトのリンクを以下に掲載します。合わせて読んでいただくと良いかと思います。