Value Stream Mapping も ChatGPT に清書させる

# VSM の清書

皆様は、Value Stream Mapping(VSM) をやった際に、どのように図示していますでしょうか。PowerPoint や、Miro などを使う方法なんかは非常にきれいなVSMを作ることができますし、写真をそのまま使うのもライブ感があっていいですよね。

一方でPowerPointやMiroなどの場合、やっぱり時間がかかります。写真も悪くはないですが、もう少し綺麗に表現したいなんて思いますよね。

というわけで、mermaidのflowchartとしてVSM結果を作成する方法について今回は記載したいと思います。(以下の図ができます。）そして、テキスト情報になるということはChatGPTが生成することができるということなので、もっとこうしてああしてを自然言語で伝えることもできるという一挙両得作戦です。


```mermaid
%%{
    init: {
        'theme': 'base',
        'themeVariables': {
        'primaryColor': '#fff',
        'primaryTextColor': '#000',
        'primaryBorderColor': '#666',
        'lineColor': '#000',
        'secondaryColor': '#fcc',
        'secondaryTextColor' : '#999',
        'tertiaryColor': '#fff',
        'tertiaryBorderColor': '#99f',
        'tertiaryTextColor': '#33f'
        }
    }
}%%

graph LR
T001[
    <span style='background-color: #fcc ; color: red ; font-weight:bold;'></span>
    <span style='font-size: 1.5em; font-weight:bold; margin:10px;'>マーケット調査</span>

    PT: 50.0 時間
    LT: 3.0 月

    マーケットチーム
]

T002[
    <span style='background-color: #fcc ; color: red ; font-weight:bold;'></span>
    <span style='font-size: 1.5em; font-weight:bold; margin:10px;'>要件定義</span>

    PT: 30.0 時間
    LT: 1.0 月

    企画部門
]

T003[
    <span style='background-color: #fcc ; color: red ; font-weight:bold;'></span>
    <span style='font-size: 1.5em; font-weight:bold; margin:10px;'>設計</span>

    PT: 40.0 時間
    LT: 3.0 週間

    開発部門
]

T004[
    <span style='background-color: #fcc ; color: red ; font-weight:bold;'></span>
    <span style='font-size: 1.5em; font-weight:bold; margin:10px;'>実装</span>

    PT: 100.0 時間
    LT: 1.0 月

    開発部門
]

T005[
    <span style='background-color: #fcc ; color: red ; font-weight:bold;'></span>
    <span style='font-size: 1.5em; font-weight:bold; margin:10px;'>テスト</span>

    PT: 80.0 時間
    LT: 3.0 月

    運用部門
]

T006[
    <span style='background-color: #fcc ; color: red ; font-weight:bold;'>M</span>
    <span style='font-size: 1.5em; font-weight:bold; margin:10px;'>リリース</span>

    PT: 8.0 時間
    LT: 1.0 日

    運用部門
]
  
T001-.->T002
T002-.->T003
subgraph 開発工程
T003-->T004
T004-.->|S/R 50%|T005
end
T005-->T006

%% Link Color %%
linkStyle 3 color:red;
```

# VSMのmermaid/flowchar記法

とりあえず基本的には以下の記載を使います。(これを\```mermaidと\```で囲ってあげます。）
ノードとして作業名やPT,LT、課題やチーム名を表現して、それを点線または実線でつないであげます。よりVSMっぽくするために色味を前後のinitやlinkStyleで変更しています。
（もっとうまい表現もありそうですけど）

```
%%{
    init: {
        'theme': 'base',
        'themeVariables': {
        'primaryColor': '#fff',
        'primaryTextColor': '#000',
        'primaryBorderColor': '#666',
        'lineColor': '#000',
        'secondaryColor': '#fcc',
        'secondaryTextColor' : '#999',
        'tertiaryColor': '#fff',
        'tertiaryBorderColor': '#99f',
        'tertiaryTextColor': '#33f'
        }
    }
}%%

graph LR
T001[
    <span style='background-color: #fcc ; color: red ; font-weight:bold;'>課題マーク</span>
    <span style='font-size: 1.5em; font-weight:bold; margin:10px;'>作業タスク1</span>

    PT: 50.0&lpar;時間&rpar;
    LT: 3.0&lpar;月&rpar;

    チームアルファ
]

T002[
    <span style='background-color: #fcc ; color: red ; font-weight:bold;'>課題マーク</span>
    <span style='font-size: 1.5em; font-weight:bold; margin:10px;'>作業タスク2</span>

    PT: 30.0&lpar;時間&rpar;
    LT: 1.0&lpar;月&rpar;

    チームベータ
]

T001-.->|S/R 50%|T002

%% Link Color %%
linkStyle 1 color:red;
```

上述のmermaidだと、以下のような画像が完成します。

```mermaid
%%{
    init: {
        'theme': 'base',
        'themeVariables': {
        'primaryColor': '#fff',
        'primaryTextColor': '#000',
        'primaryBorderColor': '#666',
        'lineColor': '#000',
        'secondaryColor': '#fcc',
        'secondaryTextColor' : '#999',
        'tertiaryColor': '#fff',
        'tertiaryBorderColor': '#99f',
        'tertiaryTextColor': '#33f'
        }
    }
}%%

graph LR
T001[
    <span style='background-color: #fcc ; color: red ; font-weight:bold;'>課題マーク</span>
    <span style='font-size: 1.5em; font-weight:bold; margin:10px;'>作業タスク1</span>

    PT: 50.0&lpar;時間&rpar;
    LT: 3.0&lpar;月&rpar;

    チームアルファ
]

T002[
    <span style='background-color: #fcc ; color: red ; font-weight:bold;'>課題マーク</span>
    <span style='font-size: 1.5em; font-weight:bold; margin:10px;'>作業タスク2</span>

    PT: 30.0&lpar;時間&rpar;
    LT: 1.0&lpar;月&rpar;

    チームベータ
]

T001-.->|S/R 50%|T002

%% Link Color %%
linkStyle 0 color:red;
```

# ChatGPTに書き出させる

上述の記載方法や課題マークの意味、サンプルなどを以下のようなシステムプロンプトを作ります(サンプルは非常に長くなるので割愛）。そのうえで、入力として”こういうVSMを書いてほしい”情報をいれます。

```javascript
const system_prompt = `\
あなたはMermaid flowchart記載のエキスパートです。
入力された情報をもとに、LR記述のFlowChartを作成します。
なお、作成する内容はValue Strem Mappingになります。
以下の情報をもとに、FlowChartを作成してください。回答はMermaid FlowChartのみです。
**説明や補足は不要です**

# ノードの記載方法(タスクの記載)
(ノードID)[
    <!-- 課題一覧, 作業名, 作業時間, トータル時間, 作業担当 -->
    <span style='background-color: #fcc ; color: red ; font-weight:bold;'>(課題マークをカンマ区切りで記載)</span>
    <span style='font-size: 1.5em; font-weight:bold; margin:10px;'>(タスク名)</span>

    PT: (数字)&lpar;(単位時間: 週、日、時間、分など)&rpar;
    LT: (数字)&lpar;(単位時間: 週、日、時間、分など)&rpar;

    (作業担当者、もしくはチーム名)
]

# タスク記載の補足情報
PT: Process Time (実作業時間)
LT: Lead Time (前工程が終わってから、本行程が終わるまでの全体時間)
1日は8時間、1週間は40時間、1か月は160時間として計算してください。
なお、LT,PTが不明な場合は -- (時間)として記載してください。

# エッジの記載方法(タスク間の連続性)
同じ人物や同じチームが作業を続ける場合、もしくは違う人物や違うチームが作業を続けるという明記がない場合、
A --> B

違う人物や違うチームが作業を続ける場合
A -.-> B

# スクラップレートの記載方法
もしある作業Aの後行程作業Bを実施中に、Aに不具合や不備があり手戻りする場合、手戻り率を30%とすると以下のように記載してください。
A --> |S/R 30%| B

# 課題マークの意味
無駄の種類	マーク	定義	例
欠陥の無駄 (Defects)	D	誤った、抜けのある、不透明な情報や成果物。システムを破壊し、解決するのに時間と労力が必要	壊れたビルド、不正確な設定、不正確な要求
マニュアル / モーション (Manual / Motion, Handoffs)	M	オーバーヘッド、コーディネーション、作業引き渡し、もしくはセットアップや、仕事の実行に関する非効率性	ミーティング、手動デプロイ、チーム間の作業引き渡し
待ちの無駄 (Waiting)	W	次の価値のあるステップを開始、もしくは終了することの遅れ	承認待ち、リソースの待ち、予定されたミーティング待ち
未完了の作業 (Partially Done)	PD	未完了の作業、何らかの操作。他者からの入力やアクションが必要となる。欠陥とタスク切替、待ちを招く	デプロイされていないコード、不完全な環境設定、実行中バッチ
タスクの切り替え (Task Switching)	TS	タスクの切り替えは、高価なコンテキストスイッチを招き、エラーが発生しやすくなる	進捗上限による無駄作業、障害による中断、アドホックなリクエスト
余分なプロセス (Extra Process)	EP	価値のないステップやプロセス。大抵、公式、非公式な標準作業に含まれる	不要な承認、不要なドキュメント、無駄なレビュー
余分な機能 (Extra Feature)	EF	機能、たいていは実装フェーズで追加されたもの。リクエストされていない、ビジネスに沿っていない、顧客価値がない	“次に必要かもしれない”、不要なアップデートや要求、望んでいない
ヒーローまたはヒロイン (Heroics)	H	仕事を完了させる、もしくは顧客を満足させるために、ある人に大変な負荷がかかっている状態。ボトルネック	数日必要なデプロイ、長年の知識が必要、極端な調整が必要

# フェーズや工程の区切り
subgraph (フェーズ名)
    A-->B
    B-->C
end
C-->D
のように、行程やフェーズが明示されていればサブグラフを記載してください。

# VSMフローチャートのサンプル
(略)
```

このようなプロンプトを用いることで、自然言語でVSM結果を作成してくれます。（細かいプロンプト調整はしていませんので、もっとプロンプトはブラッシュできるかなーとは思います）

# こんなことができました。

入力として、テスト的に以下の内容をいれてVSMを作ってみます。

> たかし君が3日かけて点Pに移動します。休みながらだったので、実際の移動時間は５時間です。その後たかし君は、宿題をします。２時間かけて一気に終わらせます。次に、たろう君が点Qへ移動します。急いで１時間で移動を終わらせます。

きちんとできましたね。(右括弧が一部かけているのはQiitaの制限のためです。）

```mermaid
%%{
    init: {
        'theme': 'base',
        'themeVariables': {
        'primaryColor': '#fff',
        'primaryTextColor': '#000',
        'primaryBorderColor': '#666',
        'lineColor': '#000',
        'secondaryColor': '#fcc',
        'secondaryTextColor' : '#999',
        'tertiaryColor': '#fff',
        'tertiaryBorderColor': '#99f',
        'tertiaryTextColor': '#33f'
        }
    }
}%%

graph LR
T001[
    <!-- 課題一覧, 作業名, 作業時間, トータル時間, 作業担当 -->
    <span style='background-color: #fcc ; color: red ; font-weight:bold;'></span>
    <span style='font-size: 1.5em; font-weight:bold; margin:10px;'>点Pへの移動</span>

    PT: 5.0&lpar;時間
    LT: 3.0&lpar;日

    たかし君
]

T002[
    <!-- 課題一覧, 作業名, 作業時間, トータル時間, 作業担当 -->
    <span style='background-color: #fcc ; color: red ; font-weight:bold;'></span>
    <span style='font-size: 1.5em; font-weight:bold; margin:10px;'>宿題をする</span>

    PT: 2.0&lpar;時間&rpar;
    LT: 2.0&lpar;時間&rpar;

    たかし君
]

T003[
    <!-- 課題一覧, 作業名, 作業時間, トータル時間, 作業担当 -->
    <span style='background-color: #fcc ; color: red ; font-weight:bold;'></span>
    <span style='font-size: 1.5em; font-weight:bold; margin:10px;'>点Qへの移動</span>

    PT: 1.0&lpar;時間&rpar;
    LT: 1.0&lpar;時間&rpar;

    たろう君
]

T001-->T002
T002-.->T003
```

# おわりに

これまでValue Stream Mappingをやった際には写真を使うことが多かったのですが、ChatGPTにVSMも書き出させることでお手軽に綺麗なマッピングを作れました。写真にはライブ感という良さもありますけど、flowchart形式もこれはこれで綺麗でいいですよね。

MermeidでVSMを表現する方法は、邪道かもしれませんが、テキストで表現できるので生成AIがいろいろ活用できて良きです。あとは生成AIのOCR精度次第ですが、画像を入力として清書なんかもできそうですよね。

生成AIの利活用の１パターンとしてのご紹介でした。