【專案管理】Mermaid.js 套件介紹，Markdown 語法簡單做出甘特圖
2021/09/21閱讀時間約 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
｜聯絡我：[email protected]
379會員
91內容數
留言0
查看全部
