🛁

ブランチ運用をmermaidを使ってフロー図にしてみた

2024/03/26に公開

Git

ブランチ運用

チームで開発をしていて、ブランチ運用を変更する時があり、変更内容をテキストで記載していましたが、メンバーに伝わっているか不安になったので図を残して分かりやすいようにしたかった
最初はdraw.ioとかで作ろうかなと思いましたが、ググったらちょうどいいのが見つかりました

使ったツール

https://mermaid.js.org/
Live Editorもあるので試しに書いて確認もしやすい
結構有名みたいですが、初耳でしたので見つけた時は嬉しかったです笑

実際のブランチ運用ではないですが、mermaidで下記のように記載するとこんなフロー図が作成できる

%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true}} }%%
gitGraph LR:
    commit id: "initial"
    branch develop order: 2
    commit id: "develop branch create"
    branch feature order: 3
    checkout feature
    commit id: "feat1_A"
    commit id: "feat1_B"
    checkout feature
    commit id: "feat1_C"
    checkout develop
    merge feature id: "squashmerge feature"
    checkout main
    branch release order: 1
    checkout release
    cherry-pick id: "squashmerge feature" parent: "feat1_C"
    checkout main
    merge release tag: "yyyymmdd_x"

マークダウンにも対応してて、上述のコードがそのままフロー図として表示もされる😳すごい
ZennのMarkdown記法一覧
Zenn以外でもフロー図が表示されましたが、内容によっては対応してなくて（？）エラーになってしまう場合もありました

よく使うエディターにもプラグインがある

結論

フロー図残すのは良かったけど、テキストでも伝わるシンプルなブランチ運用にできればよかった
開発スタイルに合わせて変更したら結構複雑化したけど、フロー図があるので後追いでの説明も楽になったのでヨシ！

ブランチ運用

使ったツール

よく使うエディターにもプラグインがある

結論

Discussion