Gitフローを図示するのにMermaidを使ってみたのですが、かなり使いやすくわかりやすかったので、記録しておきます。
やりたかったこと
プロジェクトで採用するブランチ管理(フロー)を図示すること。
既に出回っているフロー図では対応しきれないので、オリジナルでフロー図を作りたい。
かといって、パワーポイントやデザインツールまでは使いたくない、という状況でした。
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
出力された図

GitHubやVSCodeでも使えます
今回紹介したMermaidですが、Mermaid Live Editorだけでなく、GitHubやVSCodeでも使用可能です。さっと図を作りたい時、テキストで図を残したい時に最適だと思うので、ぜひチェックしてみてください。