2021年10月5日 星期二

網頁流程圖函式庫 mermaid.js

今天發現一個很有趣的 Javascript 函式庫 : mermaid.js, 這是用來在網頁上繪製流程圖 (flowchart diagramming) 的開放原始碼函式庫, 只要用字串與繪圖程式碼即可在網頁上繪製精美的流程圖, 它的出現使得網頁文件在流程圖方面不需再依賴 img 元素載入外部圖檔, 而可直接在 script 元素 中使用類似 Mark Up 的特定語法繪製, 參考 :


官網提供了一個線上編輯器可以線上編輯流程圖, 結果可下載儲存為 png 或 svg 檔, 參考 :





如果要自行建立繪圖環境, 可以下載 mermaid.js 到自己的網站環境中 : 


例如 : 


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="cache-control" content="no-cache">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>mermaid.js test</title>
  <script src="../js/mermaid.min.js"></script>   
</head>
<body>
  <div class="mermaid">
    flowchart LR  
    Hello --> World    
  </div>
</body>
</html>

此處 mermaid.js 是放在網頁所在的上一層目錄 js 底下, 流程圖程式碼放在樣式類別為 mermaid 的 div 容器中, flowchart LR 表示要繪製一個方向是從左到右的流程圖 (其他方向還有由右向左 RL, 由上往下 TB, 與由下往上 BT), Hello --> World 表示要繪製內容為 Hello 與 World 的兩個節點, 結果如下 :



也可以使用 CDN 供檔, 例如 jsdelivr.net : 


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="cache-control" content="no-cache">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>mermaid.js test</title>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>  
</head>
<body>
  <div class="mermaid">
    flowchart TB
    Hello --> World
  </div>
</body>
</html>

此例流程圖方向改為由上到下 (TB), 結果如下 : 



其實除了畫流程圖外, mermaid,js 也可以繪製交談程序圖, 甘特圖, 物件導向的類別繼承圖, 有限狀態機的狀態圖, 里程碑時序圖, 圓餅圖等等, 感覺應用非常廣, Javascript 函式庫真是無奇不有, 有空再來好好研究一番. 

Mermaid.js 始自 2014 年, 目前版本是 8.7.0, 改版說明文件參考 :  


除了 GitHub 上的教學文件外, Mermaid.js 作者 Knut Sveidqvist 也親自寫了一本書來介紹其用法 : 



Source : Amazon


沒有留言:

張貼留言