今天發現一個很有趣的 Javascript 函式庫 : mermaid.js, 這是用來在網頁上繪製流程圖 (flowchart diagramming) 的開放原始碼函式庫, 只要用字串與繪圖程式碼即可在網頁上繪製精美的流程圖, 它的出現使得網頁文件在流程圖方面不需再依賴 img 元素載入外部圖檔, 而可直接在 script 元素 中使用類似 Mark Up 的特定語法繪製, 參考 :
官網提供了一個線上編輯器可以線上編輯流程圖, 結果可下載儲存為 png 或 svg 檔, 參考 :
如果要自行建立繪圖環境, 可以下載 mermaid.js 到自己的網站環境中 :
例如 :
測試 1 : 用 mermaid.js 顯示 Hello World (本地供檔) [看原始碼]
<!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 :
測試 2 : 用 mermaid.js 顯示 Hello World (CDN 供檔) [看原始碼]
<!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 也親自寫了一本書來介紹其用法 :
# The Official Guide to Mermaid.js (Packt, 2021)
Source : Amazon
沒有留言 :
張貼留言