【專案管理】Mermaid.js 套件介紹，Markdown 語法簡單做出甘特圖
閱讀時間約 6 分鐘
最近很幸運的因為自己的學習進度與六角學院負責人籌辦的火箭隊培訓營相符，於是有幸成為了火箭隊培訓營的前端插班生。
近期因為完成了 Vue Cli 及 Router 的課程，培訓營的學習進度逐漸進入到最重要的階段：專題發表。
在專題發表前，講師要求我們在規劃自己的專案時需要使用到甘特圖來進行時程上的規劃。
身為一個 Excel 小菜雞，目前並沒有使用微軟的付費方案，所以就沒有在使用 Microsoft 365 的習慣，如果有任何文書上處理的需求我基本上都是使用 Google 的雲端辦公軟體，像是 Google Docs 、試算表等來處理文件需求。
經過查找，我發現要在 Google 試算表上實現甘特圖會很複雜，也要花很多時間研究，困難難度實在不亞於使用 Excel 來建置甘特圖。
誤打誤撞下，我發現了一個開放資源，可以透過簡單的 Markdown 語法來建置甘特圖，或是其他流程圖的套件：Mermaid.js。
Mermaid.js 榮獲 JS Open Source Awards (2019) 殊榮，協助開發者可以用簡易的方式進行專案流程的規劃。
註： Markdown 是一種標記式的程式語言，主要會使用一些簡單的語法進行文字或是圖像上的排版，支援多平台，檔案格式為 .md 結尾。
➤ Mermaid.js 解決什麼問題？
通常開發者是比較少接觸到專案管理的工具，如果會有專案管理的需求，可能會出現在需要建置自己的 side project 時，需要與他人協作溝通時。
所以在大部分的狀況下，開發者不會熟悉操作 Excel、Whimsical 等工具，更不會為了要打造自己的 side project 而特別去學習一套軟體。
另外一點是，大部分的開發者已經很習慣使用程式碼來快速產生圖像，如果要開發者使用拖拉、繪圖的方式來進行流程圖的規劃，其實非常的耗時。
Mermaid.js 可以很好的解決上述的幾個問題：
1. 開源套件是免費的，不需要額外購買
2. 使用簡單的程式碼進行流程圖規劃，不需要一直手動拖拉圖形
3. 不需要額外學習新工具，用既有的知識就可以操作
除了可以解決既有的問題外，我還額外發現使用 Markdown 語法來製作流程圖是一件很方便的事，當你想要將專案部署到 GitHub 時，就可以使用 Mermaid.js 直接更新專案進度，不需要額外開啟其他工具，可以說是專案整合上非常的方便。
➤ Mermaid.js 的環境部署
Mermaid.js 支援多環境，環境列表可以參照此外掛列表，需要注意的是，因為 Mermaid.js 本身並不是原身的 Markdown 語法，而是以 JavaScript 作為基礎，所以在各個環境中像是 Vs Code、GitHub 等都會需要額外安裝一些套件，或是透過新增環境變數的方式來進行編譯。
然而前面有講到，其實在技術沒有到一個程度時，要去看這些文件基本上都要通靈居多，時間上也不允許我們花過多時間在研究套件上。
因此 Mermaid.js 有自己的 sass compiler 服務：Mermaid Live Editor，這個服務就跟開發者常用的 JS Bin 或是 Codepen 服務很像，提供線上的編輯及預覽服務。
唯一的缺點是，目前 Mermaid Live Editor 還沒有提供註冊及登入服務，主要是以 localStorage 的方式暫存資料（這一點我不太確定）。
所以如果有需要儲存自己的 Markdown 程式碼的話，可能會需要在 Vs code 裡面編輯，並且將 .md（ MarkDown 檔案）用 Git 的方式來儲存，需要重新更新圖片的時候，再把語法丟進 Live Eidtor 中編譯。
我認為以上作法就完全不需要考慮到不同環境的編譯問題，因為只要你使用的環境有支援 Markdown 語法，就可以先由 Live Editor 編譯，並由該編譯器產生一組嵌入語法（就跟 CodePen 使用方式一樣），使用那一組嵌入語法就可以將該流程圖放到 GitHub 上了。
至於語法的部分，Mermaid.js 官方也有提供完整的語法教學，我認為對一個開發者來說，是非常容易理解的語法，可以等到需要用到時在打開官方文件比對使用，不需要額外花太多時間研究。
至於官方宣稱說，Mermaid.js 是不需要懂程式語言也可以操作的套件，我個人會覺得這點見仁見智，畢竟要修改樣式的話，還是得要仰賴 CSS。
但至少這個套件對於初級的開發者來說，不管是文件上的閱讀，或是操作的方法都是非常友善的。
而對於進階開發者來說，從文件上可以看的出有很多進階的指令，像是設定環境變數等，但因為我目前技術上還沒有到這個程度，我就暫且擱置，只有使用 Vs Code + Mermaid Live Editor 的方式來進行編譯使用。
➤ 如何在 Vs code 預覽 Mermaid 流程圖
先前有提到 Mermaid.js 並不是原生的 Markdown 語法，所以如果想要預覽效果流程圖效果的話要需要安裝其他套件才辦辦法做到，在 Vs code 可以找到以下套件：
安裝完後，我們可以在 .md 檔案上按右鍵，選取 Preview 選項，就可以即時預覽我們的流程圖：
這裡先說個小總結，如果是大型專案的管理需求，也許 Mermaid.js 並沒有到這麼的適合，但如果單純是個人小型的專案，我相信會非常的好用（畢竟人家是免費的）。
未來如果有用到更為進階的功能，會再這篇文章中同步更新，希望大家都可以找到適合自己使用的開發工具！
希望今天的文章有幫助到正在閱讀的你，如果你喜歡我的文章的話，可以留下你的愛心或是收藏我的文章，也或者可以點選「贊助」，你的一杯咖啡絕對是我持續寫下去的動力！或是透過拍拍手，用你小小的行動支持我的創作！
我是Vivian，我們下次見。
關於我：
2019年從英文系畢業，2021下定決心開啟轉職工程師的新生活，相信不斷學習會有成長的一天。
｜Instagram: Vivian Yeh｜vivian_enlife
｜聯絡我：vivian.enlife@gmail.com
422會員
99內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
本文從專案管理的角度，剖析如何有組織性的將『新事業規畫』專案順利完成。是一篇專案管理實戰案例好文。
流程亮點: 專案管理五大步驟
1. 子彈筆記、日誌、每日待辦清單checklist
把當天要做的進度列出來，如果有事情延後就挪到隔天繼續紀錄(用雲端文件打字複製項目很快，要搜尋以前的紀錄也很方便)。自己使用覺得的缺點是可能比較沒有大局觀(沒有設一個確切的完成時間，只能用體感估計)。優點就是能夠集中於當天要做的事，如果是主管處理事
哥布林殺手面對哥布林的態度
所謂的專案管理，其中一個很重要的目的就是將風險與意外降到最低。 有專案管理經驗的人應該都有深刻體會這一句話「計畫永遠趕不上變化」。 縱使事前規劃再縝密、過程是如何的小心翼翼，永遠都會發生意料之外的事情。
近日，與前公司同事聊天，該前輩拿著之前筆者手稿的專案管理教案，一塊討論在公司推行大型專案時，教育其他部門主管協作。這讓筆者回憶起2009年取得了PMP的往事。老實說，PMBOK細節已忘差不多了，但專案管理底層與豐田式管理所運作的一致。這些思維也深深影響筆者的工作習慣與思考方式。
Marty Cagan 是當前科技類專案管理方面公認的意見領袖。他曾在惠普、網景、eBay等全球最成功的公司擔任高階管理者，負責定義、打造產品。後來創辦矽谷產品團隊公司（SVPG），擔任許多知名公司的產品教練與顧問。2019年受邀至台灣分享產品思維，也是本書的重點精華。
人生也是一種專案管理。
有人問：「你的短期目標是甚麼?」老實說，我還真回答不出來。
但是，我會知道自己想要甚麼，像是「具備治好個案的能力」、「賺很多錢」這每個人都想的，哈只是，這些空泛的想要，要怎麼把它變成具體可被檢核?
直到今天上完大人學-專案管理一日特訓班，原來我們需要的是規劃力和執行力。
想法
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
本文從專案管理的角度，剖析如何有組織性的將『新事業規畫』專案順利完成。是一篇專案管理實戰案例好文。
流程亮點: 專案管理五大步驟
1. 子彈筆記、日誌、每日待辦清單checklist
把當天要做的進度列出來，如果有事情延後就挪到隔天繼續紀錄(用雲端文件打字複製項目很快，要搜尋以前的紀錄也很方便)。自己使用覺得的缺點是可能比較沒有大局觀(沒有設一個確切的完成時間，只能用體感估計)。優點就是能夠集中於當天要做的事，如果是主管處理事
哥布林殺手面對哥布林的態度
所謂的專案管理，其中一個很重要的目的就是將風險與意外降到最低。 有專案管理經驗的人應該都有深刻體會這一句話「計畫永遠趕不上變化」。 縱使事前規劃再縝密、過程是如何的小心翼翼，永遠都會發生意料之外的事情。
近日，與前公司同事聊天，該前輩拿著之前筆者手稿的專案管理教案，一塊討論在公司推行大型專案時，教育其他部門主管協作。這讓筆者回憶起2009年取得了PMP的往事。老實說，PMBOK細節已忘差不多了，但專案管理底層與豐田式管理所運作的一致。這些思維也深深影響筆者的工作習慣與思考方式。
Marty Cagan 是當前科技類專案管理方面公認的意見領袖。他曾在惠普、網景、eBay等全球最成功的公司擔任高階管理者，負責定義、打造產品。後來創辦矽谷產品團隊公司（SVPG），擔任許多知名公司的產品教練與顧問。2019年受邀至台灣分享產品思維，也是本書的重點精華。
人生也是一種專案管理。
有人問：「你的短期目標是甚麼?」老實說，我還真回答不出來。
但是，我會知道自己想要甚麼，像是「具備治好個案的能力」、「賺很多錢」這每個人都想的，哈只是，這些空泛的想要，要怎麼把它變成具體可被檢核?
直到今天上完大人學-專案管理一日特訓班，原來我們需要的是規劃力和執行力。
想法