開発チーム全体のタスクを依存関係をGviz(内部的にはGraphviz)で管理する

キーワード:gviz , TechBlog

relation

開発チーム全体の依存関係をGviz(内部的にはGraphviz)で管理しはじめました。
なぜGvizを利用したか、利点と欠点をまとめます。

必要とされること

開発チームの各メンバーの担当がそれぞれどのような影響を与え合っているかを
ひとめでわかる形でリモートで共有する必要があります。
はじめはホワイトボードに図を書いて写真をとって共有していたのですが、
状況は刻一刻と変わるためどんどん図を変更する必要がでてきました。
また、ホワイトボードは他の用途にも使うため常に書きっぱなしというわけにもいきません。
そのため、常に1から図を書き直すことになってしまいます。

以上のことから、情報共有ツールなどを通してリモートで共有しやすく、
変更に強い形式で依存関係を図に落とし込む必要がでてきました。

Gvizとは何か?

オープンソースのグラフ描画ツールであるGraphvizがあります。
GraphvizはDOT言語という専門言語で記載した関連を
各種画像フォーマットで出力してくれます。

GvizはDOT言語の代わりにRubyのDSLでグラフを描画することができます。
DSL自体もわかりやすいですし、Rubyの文法を活用できるので
定形処理の共通化なども容易です。

Gvizを使うと何が嬉しいか?

  • GUIの描画ツールやホワイトボードを使う場合に比べ少ない手間で作図が可能となる
    • 特に図の変更時のコストが低い
    • ※この点はGraphvizの利点
  • DOT言語に比べてわかりやすい文法
  • DOT言語と異なりRubyの文法の力をそのままかりることができる
    • ループ処理
    • 共通化

詳しくはGvizの作者さんのサイトを参照ください

Gvizの目次 – Rubyの世界からGraphvizの世界にこんにちは!

また、私もGviz関連のサンプルコードをQiitaで公開しています

Graphviz関連まとめ – Tbpgr – Qiita

サンプル

例の内容は適当なもので、実運用とは関係ありません。

DOT言語の例

digraph G {
  layout="dot";
  overlap="false";
  node[width="3",height="2",fontname="MS UI GOTHIC",style="filled",fillcolor="white"];
  SpecWrite[label="仕様を記述する: プロダクトオーナー",fillcolor="skyblue"];
  PrepareVagrant[label="Vagrantのローカル開発環境を用意する: インフラエンジニア",fillcolor="skyblue"];
  PrepareStaging[label="Staging環境を用意する: インフラエンジニア",fillcolor="yellow"];
  PrepareProduction[label="Production環境を用意する: インフラエンジニア"];
  Develop[label="TDDでプログラムを実装する: アプリエンジニア",fillcolor="yellow"];
  WriteE2ETest[label="E2Eテストを実装する: アプリエンジニア"];
  DeployStaging[label="Staging環境にモジュールを配布する: アプリエンジニア"];
  TestStaging[label="Staging環境でテストする: テスター"];
  DeployProduction[label="Production環境にモジュールを配布する: アプリエンジニア"];
  SpecWrite -> Develop;
  PrepareVagrant -> Develop;
  Develop -> WriteE2ETest;
  PrepareStaging -> DeployStaging;
  WriteE2ETest -> DeployStaging;
  DeployStaging -> TestStaging;
  PrepareProduction -> DeployProduction;
  TestStaging -> DeployProduction;
}

Gviz DSLの例

require "gviz"

Graph do
  global layout:"dot", overlap:false
  nodes width: 3, height: 2, fontname:"MS UI GOTHIC", :style => :filled, :fillcolor => :white
  active = { fillcolor: :yellow }
  done = { fillcolor: :skyblue }

  node :SpecWrite, {label: "仕様を記述する: プロダクトオーナー"}.merge(done)
  node :PrepareVagrant, {label: "Vagrantのローカル開発環境を用意する: インフラエンジニア"}.merge(done)
  node :PrepareStaging, {label: "Staging環境を用意する: インフラエンジニア"}.merge(active)
  node :PrepareProduction, {label: "Production環境を用意する: インフラエンジニア"}
  node :Develop, {label: "TDDでプログラムを実装する: アプリエンジニア"}.merge(active)
  node :WriteE2ETest, {label: "E2Eテストを実装する: アプリエンジニア"}
  node :DeployStaging, {label: "Staging環境にモジュールを配布する: アプリエンジニア"}
  node :TestStaging, {label: "Staging環境でテストする: テスター"}
  node :DeployProduction, {label: "Production環境にモジュールを配布する: アプリエンジニア"}

  edge :SpecWrite_Develop
  edge :PrepareVagrant_Develop
  edge :Develop_WriteE2ETest
  edge :PrepareStaging_DeployStaging
  edge :WriteE2ETest_DeployStaging
  edge :DeployStaging_TestStaging
  edge :PrepareProduction_DeployProduction
  edge :TestStaging_DeployProduction

  save :"develop_flow", :png
end

画像出力の例

develop_flow

補足

Gvizは以下の様なことが苦手です。

  • 細かな配置調整などは難しい
  • 画像を多用した見栄えのする作図は難しい

外部資料

Gvizの目次 – Rubyの世界からGraphvizの世界にこんにちは!

上へ戻る