# Day-17 這我真的想不到標題,不如先做個流程圖吧 MermaidChart、Show Me ## 0. 前言 沒錯 ! 看到標題應該就知道今天要介紹的插件是有關什麼功能了吧 ! 就是做流程圖啦 ! 那麼就事不宜遲直接開始吧 ! ## 1. MermaidChart - 首先是MermaidChart,我使用獵人中發動念能力的步驟來做為範例。(雖然我沒有直接告訴它漫畫中的正確發動步驟,也沒有使用WebPilot先叫他爬資料,不過從2021開始到現在富奸也沒更新多少進度所以應該沒有太大差別) (酷拉皮卡可以下船了沒啦 ! ) ![](https://hackmd.io/_uploads/BJy2qSs62.png) - 圖是產出來了啦,但就是有點大、占版面 ![](https://hackmd.io/_uploads/BJYT9rjTh.png) - 接下來試試看甘特圖,這邊用進擊的巨人來舉例。 ![](https://hackmd.io/_uploads/HyVMHPo63.png) - 雖然看起來它是用漫畫推出時間而不是用內容故事時間做為時間軸,不過還是可以清楚地得知一些有用資訊,更厲害的是我完全不用告訴它除了主題以外的細節它就能生出圖來,非常方便。 - 這邊再測試一個阿路加的許願過程時序圖,商面prompt會變橘色可能是因為裡面有==死==這個字,依照ChatGPT的過濾器可能對於這類的字比較敏感。 ![](https://hackmd.io/_uploads/rkkZD3aah.png) ## 2. Show Me - 接下來是Show Me,一樣先用獵人念能力做示範,可以看到這次它對於資料的判讀方式和前一個MermaidChart不太一樣,是以四大行作為主結構。而且大小也比較適中。 ![](https://hackmd.io/_uploads/r1LivLia2.png) - 另外他還在輸出結果這邊提醒可以使用`show ideas`,讓你可以改善流程圖 ![](https://hackmd.io/_uploads/r1sjC8o62.png) - 這邊是它連結的編輯頁面,假如你有實際用過MermaidChart又有注意到右上角的話,那你就會發現這個插件其實跟它是可以互相通用的,所以使用的感覺上其實大同小異。 ![](https://hackmd.io/_uploads/Hk1oAIop3.png) - 這裡一樣再測試阿路加的許願過程,可以發現他給的圖比上面MermaidChart的清楚好理解一點,而且奇犽的犽這邊可以顯示出來。 ![](https://hackmd.io/_uploads/S1Nzrha62.png) - 完整時序圖 ![](https://hackmd.io/_uploads/S1uVBhT62.png) ## 3. 結語 兩個插件使用下來其實都不錯用,但假如硬要選出一個,我會選擇Show Me。因為首先他的圖比較有粒粒分明(?)的感覺,再來就是編輯連結MermaidChart點進去跑不出東西來,但Show Me可以。實際上作流程圖、甘特圖等等,也是一個團隊在開始一項任務時最終要的環節,希望大家在學會使用這些插件之後能夠應用在日常生活中哦 !