【專案管理】Mermaid.js 套件介紹，Markdown 語法簡單做出甘特圖
最近很幸運的因為自己的學習進度與六角學院負責人籌辦的火箭隊培訓營相符，於是有幸成為了火箭隊培訓營的前端插班生。
近期因為完成了 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
此篇文章會顯示動態置底廣告
為什麼會看到廣告
431會員
101內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
你可能也想看
Google News 追蹤
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
這篇文章介紹如何使用 Mermaid Live 來生成一個展示學習效果因果迴圈圖（Causal Loop Diagram, CLD）。Mermaid 是一個簡單且強大的語法，可以用來創建各種類型的圖表，並提供了系統動力學原理和從YouTube影片旁摘取資訊的優點。
這篇文章描述了作者從兼職開發轉為全職開發的過程，並分享了從混進學界指日可待的積極態度。作者也提及自己在專案製作與個人生活上的矛盾與感想，最後分享了專案管理和敏捷開發相關的文章與影片。
Google 試算表有個叫做 SPARKLINE 的函式，可以讓你在一個儲存格內生成一張迷你圖表。我寫了一篇系列文提供了教學，歡迎來看看唷！
在 Google Sheets 中，SPARKLINE 函數提供了一個方便的方法來創建迷你圖表，讓你可以輕鬆地視覺化數據。這些迷你圖表可以是折線圖、柱狀圖或其他類型，並且可以在單個儲存格中顯示。本教學將向你展示如何使用 SPARKLINE 函數來創建迷你圖表，讓你能夠快速而直觀地理解你的數據。
Google 試算表在 2022 年隆重推出了 LAMBDA 函式跟它的輔助函式，讓使用者可以製作自己的函式，還可以在指定範圍內做複雜的運算。LAMBDA 的出現，讓我們在試算表的資料處理能力帶來了革命性的進步，可以更輕鬆地完成複雜的工作！一起來看看。
在數位化時代，傳統表單設計方式已無法滿足現代的需求。Tally 的出現，讓我們重新思考表單設計的可能性。無論是問卷調查還是數據收集，Tally 都將讓你感受到從未有過的便捷和效率。它結合了簡潔的設計與強大的功能，讓你可以輕鬆設計出專業和高效的問卷。現在，讓我們一起來體驗 Tally 的魅力吧！
列出一套完整的程式
程式設計有許多種方法，不過通常會先列出清單的再逐一執行，這樣會加快程式設計的速度。設計通常會採取順推的辦法。所以順推的程式設計方式就是經歷觀念溝通、系統分析、資料統合、權限管理、頻率與時間、後台管理、畫面設計等等階段後，將框架設計完了以後，先列出一套完整的程式，將所有使用者都確
有沒有想過，即使沒有任何編程背景，你的創意也能在六個月內轉化成真實的App？我可以以自身經歷跟你說有了 No-Code Tool (無代碼工具) 和 AI 的幫助，這一切都是可能的！你一行 code 都不需要打，甚至也無須學習任何編程語言！沒有什麼比實踐一個自小認為不可能的任務還振奮人心的事了！
對於許多企業而言，試算表是日常業務和決策過程中不可或缺的工具。它們被用於各種目的，從財務預算和盈虧分析到庫存管理和客戶數據記錄。然而，隨著業務的發展和數據量的增加，許多人會發現自己面臨著試算表管理和維護的挑戰，這些挑戰可能妨礙效率、準確性和生產力。
1. 數據管理的繁瑣性
試算表中數據的輸入
流程圖是流程中各個步驟的直覺表示，在我們的工作生活中都能用到流程圖。如果你是新手，想要學習如何繪製流程圖，那麽不妨看看下面的5個流程圖範例，包括泳道圖、樹狀圖、組織圖等，快速幫你熟悉流程圖。
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
這篇文章介紹如何使用 Mermaid Live 來生成一個展示學習效果因果迴圈圖（Causal Loop Diagram, CLD）。Mermaid 是一個簡單且強大的語法，可以用來創建各種類型的圖表，並提供了系統動力學原理和從YouTube影片旁摘取資訊的優點。
這篇文章描述了作者從兼職開發轉為全職開發的過程，並分享了從混進學界指日可待的積極態度。作者也提及自己在專案製作與個人生活上的矛盾與感想，最後分享了專案管理和敏捷開發相關的文章與影片。
Google 試算表有個叫做 SPARKLINE 的函式，可以讓你在一個儲存格內生成一張迷你圖表。我寫了一篇系列文提供了教學，歡迎來看看唷！
在 Google Sheets 中，SPARKLINE 函數提供了一個方便的方法來創建迷你圖表，讓你可以輕鬆地視覺化數據。這些迷你圖表可以是折線圖、柱狀圖或其他類型，並且可以在單個儲存格中顯示。本教學將向你展示如何使用 SPARKLINE 函數來創建迷你圖表，讓你能夠快速而直觀地理解你的數據。
Google 試算表在 2022 年隆重推出了 LAMBDA 函式跟它的輔助函式，讓使用者可以製作自己的函式，還可以在指定範圍內做複雜的運算。LAMBDA 的出現，讓我們在試算表的資料處理能力帶來了革命性的進步，可以更輕鬆地完成複雜的工作！一起來看看。
在數位化時代，傳統表單設計方式已無法滿足現代的需求。Tally 的出現，讓我們重新思考表單設計的可能性。無論是問卷調查還是數據收集，Tally 都將讓你感受到從未有過的便捷和效率。它結合了簡潔的設計與強大的功能，讓你可以輕鬆設計出專業和高效的問卷。現在，讓我們一起來體驗 Tally 的魅力吧！
列出一套完整的程式
程式設計有許多種方法，不過通常會先列出清單的再逐一執行，這樣會加快程式設計的速度。設計通常會採取順推的辦法。所以順推的程式設計方式就是經歷觀念溝通、系統分析、資料統合、權限管理、頻率與時間、後台管理、畫面設計等等階段後，將框架設計完了以後，先列出一套完整的程式，將所有使用者都確
有沒有想過，即使沒有任何編程背景，你的創意也能在六個月內轉化成真實的App？我可以以自身經歷跟你說有了 No-Code Tool (無代碼工具) 和 AI 的幫助，這一切都是可能的！你一行 code 都不需要打，甚至也無須學習任何編程語言！沒有什麼比實踐一個自小認為不可能的任務還振奮人心的事了！
對於許多企業而言，試算表是日常業務和決策過程中不可或缺的工具。它們被用於各種目的，從財務預算和盈虧分析到庫存管理和客戶數據記錄。然而，隨著業務的發展和數據量的增加，許多人會發現自己面臨著試算表管理和維護的挑戰，這些挑戰可能妨礙效率、準確性和生產力。
1. 數據管理的繁瑣性
試算表中數據的輸入
流程圖是流程中各個步驟的直覺表示，在我們的工作生活中都能用到流程圖。如果你是新手，想要學習如何繪製流程圖，那麽不妨看看下面的5個流程圖範例，包括泳道圖、樹狀圖、組織圖等，快速幫你熟悉流程圖。