蝦子的學習筆記: Chatfuel — chatbot flow with FlowChart
本篇將紀錄如何畫下 FlowChart，並分享簡單的範例作為簡介。
為什麼 FlowChart 如此重要?
在設計過程中，我們不免需要呈現給第三人看，此時如果有了 FlowChart，會讓對話設計看起來更具備專業感、可簡報性(更好說明)。
在自己需要檢視的時候，也可以透過 FlowChart 來檢查過程有無 bug。
原則:
- block、buttons、backend 應該用不同的顏色與形狀區分清楚
- 由上至下，由左至右
- 字數越少越好，簡潔明瞭即可
1. 手繪
準備好一張白紙、一隻筆，畫下你的對話流程。
或是利用便利貼的方式，寫下重要的 blocks 關係與 blocks 內對話流程與分流。
2. 軟體
draw.io, PPT, Visio, yEd都是不錯的軟體，用來快速繪製各種流程圖。
PPT流程繪製示範:
優點: 每個人電腦都有製作簡報用的 PPT 或 Keynote，可以做動畫。
缺點: 對齊、改變格式沒有比較快速。
如一般記錄心情的 chatbot 基本對話流程 (也是最主要的每次開啟對話)，這主要是以 blocks 分流為範例，例如每一次的觸發對話，固定會出現 3個 buttons，分別為每日心情、其他心情、只是想聊聊天。
而每日心情，透過前一個 block 選擇的心情 (記錄到一個變數內)，在以 "Go to block" 來進行分流，過程可以設計相同心情，但是以不同的對話腳本進行 (一樣在Go to block內進行設定 random)。其他更可以外接 Google Dialogflow (Google API 更名後)服務，或是設計開放對話。
但是…
看起來相當陽春，要符合原則也需要再設定，好處大概就在於最後可以直接設定動畫了吧。
因此，在此有其他流程繪製軟體，yEd 與 Visio 需要安裝外，draw.io 則有網頁版，可以直接在 瀏覽器上繪製下載。
draw.io [最推薦使用這一個]
優點: 快速方便，完全是用來畫流程專用，而且可以線上繪製(並連接google drive進行存取)。
缺點: 資安考量可能無法直接接上雲端硬碟。
在網頁上直接搜尋，進入 draw.io ，選擇要存儲在 Google drive、Dropbox、或是電腦上，注意記得每隔一段時間按一下儲存，最後再輸出。
區塊分成:
左邊選擇想要新增的圖形，分為在此較常使用到 General、Flowchart。
右邊則是設定，沒有點擊方塊狀態下為版面配置與環境設置，點擊任意 shape 後可以設定文字、顏色、標籤等等選項。
yEd
優點: 單機輕量，版面乾淨。
缺點: 需要下載，且冷門。
另外，分享一個 yEd 的 youtube 介紹影片(中文):
裡面有清楚的說明與介紹，而且這個軟體是免費的，也不太占用空間，介面相對 draw.io 感覺相對粗糙，但是也不失為一個可以簡單的軟體。
Visio
優點: 付費安裝，預設模板多。
缺點: 微軟出產，you know it…
微軟出品，如果學校或公司有買軟體版權，不妨安裝一下也許未來會用到?
這裡不多作介紹，因為在 Flowchart 個人認為較不方便。
原因是介面沒有比較簡便，拉線與新增文字都比不上前兩者方便，有興趣的人再上網搜尋教學資源吧。
小結
基本上用各種流程繪製的方式都是好方法，只要找到自己熟悉、可以快速畫出想要的模樣，並且清楚傳遞流程內容，就不需要擔心一定要使用哪一種方式繪製。
找到適合自己的好方法，
就是找到殊途同歸的羅馬大道。
