用 CSS 變數幫流程圖換裝
很多人請 ChatGPT、Claude 等 AI 畫流程圖時，拿到的是一段 Mermaid 語法。Pele 做的事很單純：把 Mermaid 文字渲染成 SVG，再讓你用 CSS 變數設定顏色與字型。
官網示範的變數包括背景、前景、線條、表面與邊框顏色，例如 --pele-bg、--pele-fg、--pele-line。官方說明：換顏色不需要重新渲染。換句話說，同一張圖可以直接套上網站或筆記軟體的主題。
跟 Mermaid.js 比一比
官網提供的對照如下（數字皆為官方說法）：
| 項目 | Pele | Mermaid.js |
|---|---|---|
| Bundle 大小（gzip） | 230 kB | 1.6 MB |
| 渲染時間 | 0.05 至 0.3 ms | 6 至 82 ms |
| 直接依賴 | 0 | 23 |
| 小螢幕 | 調整版面 | 縮放整張圖 |
| 主題 | CSS 變數 | 主題設定 |
官方表示 Pele 支援 Mermaid 12.1.0 內建的所有圖表類型。它是開源專案，原本為 Obsidian 開發，目的是快速渲染並配合使用者的主題；名稱來自夏威夷神話中的火山女神 Pele。
AI 出圖到成品的流程
可以這樣把 Pele 放進日常工作：
- 請 AI 用 Mermaid 輸出：描述流程後，要求「只輸出 Mermaid flowchart 語法」。
- 貼進 Pele 預覽：官網首頁就能直接編輯範例並即時看到 SVG。
- 套用品牌色：把 CSS 變數改成自己的配色，整份文件的圖就會一致。
- 放進網站或 App：用
npm install pele安裝，呼叫render()取得 SVG 後插入頁面。
對常寫教學、提案或內部文件的人，這省掉了「AI 畫完還要手動重畫一次」的步驟。
