📈

Notionでバーンアップチャート、バーンダウンチャートを利用する

aokiken

2024/06/10に公開

Notion

scrum

idea

結論: MermaindのXY Chartを利用する

Notionのコードブロックにて、Mermaind記法を利用することができます。
Mermaid記法にある、XY Chartを利用することで、Notionで折れ線グラフを表現することが可能です。

プロジェクト前半のしんどさが伝わってくる...!

チャートを利用する上での工夫

今回紹介している方法は、Notionのデータベースと連携して自動でグラフが更新されていく類のものではないため、いくつかの工夫が必要になります。

更新のタイミングを明確にする

今回のプロジェクトでは、スプリントプランニングのタイミングで最終的にfixさせることをルールとしていました。

理想の推移の計算式をあらかじめ作成しておく

スプリント期間が伸びたり、タスクの総量によって可変する可能性もあるため、Mermaidのコメントアウトで忍ばせていたりします。

const sprints = ['S00', 'S01', 'S02', 'S03', 'S04', 'S05', 'S06', 'S07', 'S08', 'S09', 'S10', 'S11', 'S12'];
const totalStoryPoint = 817;
const step = totalStoryPoint / (sprints.length - 1);
const line1 = sprints.map((sprint, index) => totalStoryPoint - (step * index));
console.log(line1.join(', '));

サンプルコード

スクリーンショットで共有していた内容をどう記述しているのか、参考までに共有しておきます。

Mermaindの記述例

xychart-beta
    title "進捗率(開発完了, 移行完了)"
    x-axis "Sprint" ["S00", "S01", "S02", "S03", "S04", "S05", "S06", "S07", "S08", "S09", "S10", "S11", "S12"]
    %% ユーザー側進捗確認のストーリーポイントをベースにしています
    y-axis "残ストーリーポイント" 0 --> 817
    %% 理想の推移
    line [817, 748.9166666666666, 680.8333333333334, 612.75, 544.6666666666667, 476.58333333333337, 408.5, 340.4166666666667, 272.33333333333337, 204.25, 136.16666666666674, 68.08333333333337, 0]
    %% リリース進捗の推移(残完了ストーリーポイント)スプリントプランニングのタイミングで最終的にfixさせる
    line [817, 814, 814, 808, 762, 756, 732, 699, 660]
    %% 開発進捗の推移(残開発完了ストーリーポイント)スプリントプランニングのタイミングで最終的にfixさせる
    line [817, 814, 811, 808, 762, 723, 602, 513, 378]

Zennでの表示イメージ

実際に2ヶ月弱利用してみて

現在3, 4ヶ月ほどの期間を想定したプロジェクトにて、バーンダウンチャートを使ってスプリント(1週間)ごとの進捗を可視化しています。
元々進捗率を%でわかるようにしていたのですが、経過が順調か分かりづらく、進捗を共有し辛いと課題に感じていました。
バーンダウンチャートを作成したことによって、進捗状況がひと目でわかるようになり、スピーディーな共有、意思決定に繋がっていると実感しています。

終わりに

今回は短期間かつタスクの総量がそこまで変動しないものを対象にしていたため、バーンダウンチャートとして利用してみました。
プロジェクトに応じて、バーンアップチャートも作成してみたいところです。