Mermaidでブランチ図（GitHub-Flow）を描いてみた

はじめに

この記事では、「Mermaidでブランチ図（GitHub-Flow）を描く」について書いています。

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

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

Mermaidはブランチ図も簡単に書くことができるとのことだったので、ブランチ戦略の中でもシンプルなGitHub Flowを書きながらMermaidのブランチ図の書き方を学んでみたいと思います。

自分に向けた備忘録の意味もありますが、「Mermaidでブランチ図を書いてみたい」な人の一助になれば嬉しいです。

内容

ブランチ図は、Mermaidでは「Gitgraph (Git) Diagram」と呼ばれています。

Git Diagramは、先頭にgitGraphキーワードを書き、その後にgitGraphを書くための記述を書いていきます。

記述はけっこうGitのコマンドを打つ感じで書けるので直観的に書けるという印象でした。

さて、ではMermaidでGitHub Flowを書いてみます。

```mermaid
gitGraph
   commit
   branch feature_1
   branch feature_2
   checkout feature_1
   commit
   commit
   checkout feature_2
   commit
   checkout main
   merge feature_1 tag: "v1.0"
   checkout feature_2
   commit
   checkout main
   merge feature_2 tag: "v2.0"
```

gitGraph commit commit branch feature_1 branch feature_2 checkout feature_1 commit commit checkout feature_2 commit checkout main merge feature_1 tag: "v1.0" checkout feature_2 commit checkout main merge feature_2 tag: "v2.0"

おわりに

「Mermaidでブランチ図（GitHub-Flow）を描く」について解説しました。

簡単に、そして比較的直観的に書くことができました。

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

mermaid-js.github.io