延續上一篇的需求，

一個全域的 Popup。功能有三：

1. 可以輸入自訂的訊息
2. 依照情境於關閉 Popup 時觸發不同的行為
3. Popup 有統一的 UI

系統架構如下:

PopupComponent在AppComponent注入，並且我們使用了Store來記錄Popup的狀態，最後將控制Popup相關的function封裝在Service中，提供任何需要的Component使用。

接著我們一步一步開始畫圖吧!

繪製系統設計文件:

首先我們可以將此需求的功能轉換成功能點，並列於系統文件上，我們可以把功能2跟3合併為一項功能點。

接著再按照功能點分出區塊，並且展開各功能的流程點。UI切版不在本次重點，故直接跳過。共用方法我打算用以下方式設計，總共會有兩個流程。

1. 更新Popup狀態: 一個傳入參數為複雜型別或是null，複雜型別中第一個屬性就是文案，型別為string，第二個會是PopupEvent的enum，將不同的Popup行為統一用enum管理。
2. 關閉Popup時候處理不同邏輯: 依據PopupEventEnum進行不同業務處理，並關閉Popup。
3. Popup需訂閱狀態並依據狀態進行畫面渲染。

我們將流程點展開。

接著我們可以從控制Popup的開關開始，流程應該會是:

1. 呼叫控制Popup方法
2. 進行防呆檢核
3. 發出更新Popup狀態的action
4. 將狀態更新至reducer

將之繪製成流程圖。

可以發現流程圖內的行為我們盡量使用一般人也容易閱讀的表達方式。接著我們可以加上備註來標註規格，Function name等項目。

可以看到我們將程式的規格定義都補上了，最後可以再加上泳道圖形，將各自所屬的檔案標註出來。

到這裡我們的第一個流程點就完成了，明天我們將剩下兩個流程點一併完成，流程圖就大功告成了。