タスクの依存性を表現したタスクボードをmermaidjsで書くと良い

タスク管理の方法としてバックログやタスクかんばん(TODO,DOING,DONEのやつ)を使っていますが、ちょっとツラみを感じています
これらの方法はタスクの優先順位が見える意味では良いけど、タスク間の依存関係が見えない
最近やってる案件がウォーターフォール的なので、優先順位よりもタスクの依存の方が知りたい
そうゆう意味でタスクを管理する方法としてはバリューストリームマップやアローダイアグラムのような図で表現して、終わったらチェックマークをつけていく感じにしたいなぁと
ただなかなかイイツールが無くて...
と思ってたらmermaidjsでイイ感じにかけたーー！

百聞は一見に如かず

説明するより見た方が早いので今回作った図を載せます

9月
1w
2w
3w
リリース
サービスイン
テスト
リリース準備
設計
コーディング

タスクの依存関係がわかる！

図から以下のことがわかります

  • タスク同士が矢印で繋がっている => の依存関係がわかる
  • 大きな枠が月、小さな枠が週 => 週ごとのスケジュールがわかる
  • 色 => タスクの状態がわかる
    • 赤: 私にアサインされたタスク
    • グレー: 完了したタスク

mermaidjsのコード

書いたコードはこちら

graph LR
T0[設計]
T1[コーディング]
T2[テスト]
T3[リリース準備]
T4[リリース]
T5[サービスイン]

T0 --> T1
T1 --> T2
T2 --> T4
T3 --> T4
T4 --> T5

subgraph 9月
  subgraph 1w
    T0
    T1
  end
  subgraph 2w
    T2
    T3
  end
  subgraph 3w
    T4
    T5
  end
end

classDef done fill:#aaa;
classDef naosim fill:#faa;
class T0,T1,T3 done;
class T2 naosim;
  • タスクの内容と依存関係はフローチャートの記法で書く
  • スケジュールはsubgraphで書く
  • タスクの状態は独自のclassを定義する

タスクで表現したいこと毎にかける

で、mermaidの何が良いかって、コードを見ればわかる通りタスクの内容・依存・スケジュール・状態を別々に管理きる！
やべーーmermaid最高やーー！

まとめ

  • mermaidでタスクの依存性表現したタスクボードが作れる
  • mermaidならタスクで表現したいこと毎にかけるから良さそう