日々常々

ふつうのプログラマがあたりまえにしたいこと。

「ソースコードブランチ管理のパターン」のダイアグラム

お世話になっている人も多い Martin Fowler's Blikiの日本語翻訳サイト 、いつも運営＆翻訳ありがとうございます。

パターン言語は関連が重要な役割を担っています。そして関連はダイアグラムにすると捗ります。ダイアグラムがついている書籍もよくみます。 なので、ダイアグラムがないときや書籍と違う雰囲気のダイアグラムが欲しくなった場合、自分で描きながら読んでたりします。こんな感じで。

f:id:irof:20200619003635p:plain

紙に手書きすることも多いのですが、インターネットで公開されているものはURLが付けやすいのでSVGで作るのが最近のマイブーム。SVGはサイズが大きくなっても拡大すれば読めるのでいいです。 上の画像はPNGをアップロードしたものなのでGistに上げました。 GistのSVGへのリンクを置いておきます。Gistのページだと画像は表示してくれるんだけど、結局URLがリンクにならないので。

ブラウザで開いて各ノードをクリックしてみてください。便利ですよね？Gistのリンクにしているのは、はてなブログの画像にSVGが使えないから。SVGだから仕方ない。 あとimgタグで入れてないのも、imgタグ内のSVGはURLがリンクになってくれないから……。

ブラウザで画像として見れるSVGですが、SlackやTwitterに投稿しても画像になってくれなくて、たまに悲しい気分になります。

機械的に作るだけならHTMLやMarkDownから生成もできるのだけど、心温まる手作業で書いています。 エッジを追加しながら「あーここがつながるのねー」とかグラフの変化を楽しみながら読んだりします。ある種の写経ですね。

ちなみにソースは以下の通り。Gistにもあげたんだけど、そうすると画像よりもこっちが上にきて微妙だったのでやっぱ消した。

digraph {
node[shape=box, style=filled]

subgraph ベースパターン {
    label=ベースパターン
    node[fillcolor=lightyellow]

    ソースブランチング[URL="https://bliki-ja.github.io/PatternsForManagingSourceCodeBranches/#-%E3%82%BD%E3%83%BC%E3%82%B9%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E3%83%B3%E3%82%B0-"]
    メインライン[URL="https://bliki-ja.github.io/PatternsForManagingSourceCodeBranches/#-%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3-"]
    健全なブランチ[URL="https://bliki-ja.github.io/PatternsForManagingSourceCodeBranches/#-%E5%81%A5%E5%85%A8%E3%81%AA%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81-"]
}

subgraph インテグレーションパターン {
    label=インテグレーションパターン
    node[fillcolor=lightgreen]

    メインラインインテグレーション [URL="https://bliki-ja.github.io/PatternsForManagingSourceCodeBranches/#-%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E3%82%A4%E3%83%B3%E3%83%86%E3%82%B0%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3-"]
    フィーチャーブランチ [URL="https://bliki-ja.github.io/PatternsForManagingSourceCodeBranches/#-%E3%83%95%E3%82%A3%E3%83%BC%E3%83%81%E3%83%A3%E3%83%BC%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81-"]
    継続的インテグレーション [URL="https://bliki-ja.github.io/PatternsForManagingSourceCodeBranches/#-%E7%B6%99%E7%B6%9A%E7%9A%84%E3%82%A4%E3%83%B3%E3%83%86%E3%82%B0%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3-"]
    レビュー済みコミット [URL="https://bliki-ja.github.io/PatternsForManagingSourceCodeBranches/#-%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E6%B8%88%E3%81%BF%E3%82%B3%E3%83%9F%E3%83%83%E3%83%88-"]
}

subgraph メインラインから本番リリースへの道のり {
    label=インラインから本番リリースへの道のり
    node[fillcolor=lightblue]

    リリースブランチ [URL="https://bliki-ja.github.io/PatternsForManagingSourceCodeBranches/#-%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81-"]
    成熟度ブランチ [URL="https://bliki-ja.github.io/PatternsForManagingSourceCodeBranches/#-%E6%88%90%E7%86%9F%E5%BA%A6%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81-"]
    環境ブランチ [URL="https://bliki-ja.github.io/PatternsForManagingSourceCodeBranches/#-%E7%92%B0%E5%A2%83%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81-"]
    ホットフィックスブランチ [URL="https://bliki-ja.github.io/PatternsForManagingSourceCodeBranches/#-%E3%83%9B%E3%83%83%E3%83%88%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%82%B9%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81-"]
    リリーストレイン [URL="https://bliki-ja.github.io/PatternsForManagingSourceCodeBranches/#-%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9%E3%83%88%E3%83%AC%E3%82%A4%E3%83%B3-"]
    リリース可能なメインライン [URL="https://bliki-ja.github.io/PatternsForManagingSourceCodeBranches/#-%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9%E5%8F%AF%E8%83%BD%E3%81%AA%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3-"]
}

subgraph その他のブランチパターン {
    label=その他のブランチパターン
    node[fillcolor=pink]

    実験的ブランチ [URL="https://bliki-ja.github.io/PatternsForManagingSourceCodeBranches/#-%E5%AE%9F%E9%A8%93%E7%9A%84%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81-"]
    未来ブランチ [URL="https://bliki-ja.github.io/PatternsForManagingSourceCodeBranches/#-%E6%9C%AA%E6%9D%A5%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81-"]
    コラボレーションブランチ [URL="https://bliki-ja.github.io/PatternsForManagingSourceCodeBranches/#-%E3%82%B3%E3%83%A9%E3%83%9C%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81-"]
    チームインテグレーションブランチ [URL="https://bliki-ja.github.io/PatternsForManagingSourceCodeBranches/#-%E3%83%81%E3%83%BC%E3%83%A0%E3%82%A4%E3%83%B3%E3%83%86%E3%82%B0%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81-"]
}

メインライン -> メインラインインテグレーション
メインライン -> リリースブランチ
メインライン -> リリーストレイン

健全なブランチ -> メインライン
健全なブランチ -> レビュー済みコミット
健全なブランチ -> メインラインインテグレーション

メインラインインテグレーション -> レビュー済みコミット
メインラインインテグレーション -> コラボレーションブランチ

フィーチャーブランチ -> 継続的インテグレーション

レビュー済みコミット -> メインラインインテグレーション
レビュー済みコミット -> フィーチャーブランチ
レビュー済みコミット -> 継続的インテグレーション

リリースブランチ -> 環境ブランチ
リリースブランチ -> 成熟度ブランチ

環境ブランチ -> 成熟度ブランチ

リリーストレイン -> リリースブランチ
リリーストレイン -> フィーチャーブランチ
リリーストレイン -> リリース可能なメインライン
リリーストレイン -> 継続的インテグレーション

リリース可能なメインライン -> メインライン
リリース可能なメインライン -> 健全なブランチ
リリース可能なメインライン -> 継続的インテグレーション
リリース可能なメインライン -> フィーチャーブランチ
リリース可能なメインライン -> リリースブランチ

コラボレーションブランチ -> メインライン
コラボレーションブランチ -> メインラインインテグレーション
コラボレーションブランチ -> 継続的インテグレーション
コラボレーションブランチ -> 実験的ブランチ

チームインテグレーションブランチ -> 健全なブランチ

/*
subgraph ブランチポリシー {
    label=ブランチポリシー

    "Git-flow"[URL="https://bliki-ja.github.io/PatternsForManagingSourceCodeBranches/#git-flow"]
    "GitHub Flow"[URL="https://bliki-ja.github.io/PatternsForManagingSourceCodeBranches/#github-flow"]
    トランクベース開発[URL="https://bliki-ja.github.io/PatternsForManagingSourceCodeBranches/#%E3%83%88%E3%83%A9%E3%83%B3%E3%82%AF%E3%83%99%E3%83%BC%E3%82%B9%E9%96%8B%E7%99%BA"]
}

"Git-flow" -> メインライン
"Git-flow" -> フィーチャーブランチ
"Git-flow" -> コラボレーションブランチ
"Git-flow" -> 成熟度ブランチ
"Git-flow" -> リリースブランチ
"Git-flow" -> ホットフィックスブランチ
"Git-flow" -> 健全なブランチ
"Git-flow" -> リリース可能なメインライン

"GitHub Flow" -> リリース可能なメインライン
"GitHub Flow" -> リリースブランチ[style=dotted]
"GitHub Flow" -> ホットフィックスブランチ[style=dotted]
"GitHub Flow" -> フィーチャーブランチ
"GitHub Flow" -> メインラインインテグレーション
"GitHub Flow" -> レビュー済みコミット

トランクベース開発 -> メインライン
トランクベース開発 -> メインラインインテグレーション
トランクベース開発 -> フィーチャーブランチ
トランクベース開発 -> 継続的インテグレーション
トランクベース開発 -> リリースブランチ
トランクベース開発 -> リリース可能なメインライン
*/
}

Graphvizに食べさせてSVGやPNGで出力できます。雑なコマンドだと dot -Tpng -O hoge.gv って感じで hoge.gv.png ができる。とはいえリアルタイムプレビューが欲しいので、VS CodeでExtension使うほうが多いのだけど。ファイルの拡張子は *.dot か *.gv で、最近はなんとなく後者を使うことにしてます。

元記事で紹介されている書籍の「パターンによるソフトウェア構成管理」は、やはり整理にいいよなぁと改めて思いました。

パターンによるソフトウェア構成管理 (IT Architects’ Archive―ソフトウェア開発の課題)

パターンによるソフトウェア構成管理 (IT Architects’ Archive―ソフトウェア開発の課題)

以前脱ブランチファーストで触れたものです。追加で何かしら書きたいと思ったりしてる今日この頃。そんなことばっかり言ってるなぁ……。