Vincent Wen

← 文章

Mermaid 深色主題範本：九色語意配色與 Pele CSS 設定

發布 2026-11-02・約 4 分鐘讀完

用 Mermaid 原文畫深色、分區的流程圖：每個節點掛九類語意色之一，Pele 用 CSS 變數套整體配色，classDef 套節點顏色。

為什麼選 Pele、它跟原生 Mermaid 和其他工具比起來差在哪，見〈Mermaid 美化工具比較：Pele、beautiful-mermaid、Diagram Design 實測〉。

九類語意色

每個節點都要掛其中一類，顏色只用來表達節點的意思，不拿來裝飾單一條線。底色是深色帶一點該色的色調，文字一律白色粗體，節點圓角 10px。

class 用在 底色 框色 備註
input 起點、輸入、外部來源 #191C20 灰 #64748B
step 一般處理步驟 #1B1B26 靛 #818CF8
agent AI 或自動化程式的產出 #1F1A23 紫 #C084FC
handoff 交接給下一個人或系統 #181D25 藍 #60A5FA
decide 要判斷的地方 #221F18 琥珀 #F59E0B 虛線框 4 3，配菱形 {}，不設圓角
check 檢查、稽核、對帳 #191F1F 青 #2DD4BF
ok 成功、完成、核准 #19231F 綠 #34D399
fail 失敗、重試、被擋下 #241A19 紅 #F87171
archive 封存、結束 #191C20 石板 #94A3B8

分區（subgraph）用深藍面板：底 #111827、框 #334155。要跟其他區分開的分區（例如夜間流程）改用深紫：底 #1C1725、框 #4C1D95。

Pele 怎麼設

Pele 不吃 Mermaid 的主題設定，整體配色要用 CSS 變數設在圖的根節點 .pele 上；節點顏色照樣靠原文裡的 classDef。下面這段貼進頁面的 CSS 就好。

.pele {
  --pele-bg: #181818;          /* 圖的背景 */
  --pele-fg: #E8E8E8;          /* 一般文字 */
  --pele-fg-on-dark: #FFFFFF;  /* 深色節點上的文字 */
  --pele-muted: #94A3B8;       /* 次要文字 */
  --pele-line: #64748B;        /* 連線與箭頭 */
  --pele-surface: #191C20;     /* 沒掛 class 的節點底色 */
  --pele-surface-alt: #111827; /* 分區底色 */
  --pele-border: #64748B;      /* 節點與分區邊框 */
  --pele-accent: #818CF8;      /* 強調色 */
  --pele-radius: 10px;         /* 圓角 */
  background: #181818;
}
.pele-cluster > rect { fill: #111827; stroke: #334155; }  /* 分區面板 */
.pele-cluster-label { fill: #E8E8E8; }                     /* 分區標題 */
/* 所有連線統一灰色：分區用了深色填色時，Pele 會自動把區內連線換成白色 */
.pele .pele-edge { stroke: var(--pele-line); }
.pele .pele-edge .pele-marker { fill: var(--pele-line); }
  • 節點文字自動配色：Pele 會在「淺底用深字、深底用淺字」之間自己挑對比高的，所以 --pele-fg-on-dark 一定要設成白色。
  • 深淺色切換不用重畫：要做淺色版，另寫一組變數套在 @media (prefers-color-scheme: light) 即可；但 classDef 的顏色是寫死的，不會跟著變。
  • 字型：換字型會影響文字量測與版面，要在 render() 時用 fontFamily 指定，不要只在 CSS 改。中文可用 Arial, PingFang TC, Microsoft JhengHei, sans-serif。
  • 想單獨改某一種元素，可用 Pele 的 class：pele-node（節點）、pele-edge（連線）、pele-edge-label（連線標籤）、pele-cluster（分區）、pele-label（節點文字）。

Mermaid 原文範本

複製後改文字就能用：每個節點用 :::class 掛一類，九行 classDef 放在圖的最後；要跟其他區分開的分區加一行 style。這份範本 2026-11-01 用 Pele 1.13.0 實測過。

flowchart TD
    subgraph DAY["☀️ 白天：分區標題"]
        A["📥 起點／輸入"]:::input --> B["一般處理步驟<br/>第二行說明"]:::step
        B --> C{"要判斷？"}:::decide
        C -->|"是"| D["AI／自動化產出"]:::agent
        C -->|"否"| E["交接給下一關"]:::handoff
    end
    subgraph NIGHT["🌙 夜間：分區標題"]
        N1["夜間排程"]:::step --> N2["檢查／稽核"]:::check
        N2 -.->|"失敗"| NF["失敗、隔晚重試"]:::fail
    end
    D --> OK["成功／完成"]:::ok
    E --> OK
    N2 --> OK
    OK --> AR["封存／結束"]:::archive

    classDef input   fill:#191C20,stroke:#64748B,stroke-width:2px,color:#FFFFFF,font-weight:bold,rx:10px,ry:10px
    classDef step    fill:#1B1B26,stroke:#818CF8,stroke-width:2px,color:#FFFFFF,font-weight:bold,rx:10px,ry:10px
    classDef agent   fill:#1F1A23,stroke:#C084FC,stroke-width:2px,color:#FFFFFF,font-weight:bold,rx:10px,ry:10px
    classDef handoff fill:#181D25,stroke:#60A5FA,stroke-width:2px,color:#FFFFFF,font-weight:bold,rx:10px,ry:10px
    classDef decide  fill:#221F18,stroke:#F59E0B,stroke-width:2px,stroke-dasharray:4 3,color:#FFFFFF,font-weight:bold
    classDef check   fill:#191F1F,stroke:#2DD4BF,stroke-width:2px,color:#FFFFFF,font-weight:bold,rx:10px,ry:10px
    classDef ok      fill:#19231F,stroke:#34D399,stroke-width:2px,color:#FFFFFF,font-weight:bold,rx:10px,ry:10px
    classDef fail    fill:#241A19,stroke:#F87171,stroke-width:2px,color:#FFFFFF,font-weight:bold,rx:10px,ry:10px
    classDef archive fill:#191C20,stroke:#94A3B8,stroke-width:2px,color:#FFFFFF,font-weight:bold,rx:10px,ry:10px
    style NIGHT fill:#1C1725,stroke:#4C1D95,color:#E8E8E8

寫法規則：

  • 方向：預設直向 flowchart TD；5 格以內的單線流程才用橫向 LR。
  • 線條：主流程實線 -->；失敗、旁支、通知用虛線 -.->。不用 linkStyle 幫單一條線換色。
  • 斷行：每行自己用 <br/> 斷，一行約 14 個中文字以內。
  • 引號：節點、分區標題、連線標籤遇到中文標點、emoji、括號、冒號，一律用 ["…"] 包住。數字開頭的標籤（1. …）改用圈圈數字 ①。
  • 太複雜就拆：連線繞回頭的大圖，拆成幾張小圖比硬調排版清楚。

實際畫出來的樣子

上面的範本配上「Pele 怎麼設」那段 CSS，用 Pele 1.13.0 畫出來就是這樣（Chrome 無頭模式截圖）。九類語意色、分區面板、判斷框的虛線都有套上；連線是 Pele 自己的圓弧折線。

用 Pele 畫出的範本流程圖：白天分區含輸入、步驟、判斷、AI 產出、交接；夜間分區含排程、檢查、失敗；底下接成功與封存

跟原生 Mermaid 不一樣的地方

同一份原文兩邊都能畫，但配色與排版的來源不同：原生 Mermaid 靠開頭的 %%{init}%%，Pele 靠 CSS 變數。

項目 原生 Mermaid Pele
整體配色 %%{init}%% 的 themeVariables CSS 變數；themeVariables 只當系列色盤，其他不生效
節點顏色 classDef classDef（一樣）
排版 Mermaid 自己的版面引擎 Pele 自己的版面引擎；節點位置、間距、連線路徑都不同，設定支援度依圖種而異
節點文字 可用 HTML 只支援換行、粗體、斜體；不吃任意 HTML
點擊 連結與 JavaScript 回呼 只支援開連結，JavaScript 回呼忽略
窄螢幕 整張縮小 會縮小，給 maxWidth 時可能改成直向排版；responsive: false 固定尺寸
外掛圖種 依安裝 ZenUML 等外掛不支援

同一份原文也要給原生 Mermaid 看（例如 GitHub、筆記軟體）時，在最上面加這段開頭；Pele 會略過它的配色部分，兩邊可以共用。有分區的直向圖，最後一行的 rankSpacing 改成 100 並加 "subGraphTitleMargin": {"top": 14, "bottom": 10}，分區標題才不會貼著方框。

%%{init: {
  "theme": "base",
  "themeVariables": {
    "background": "#181818", "fontSize": "15px",
    "primaryColor": "#191C20", "primaryTextColor": "#FFFFFF", "primaryBorderColor": "#64748B",
    "lineColor": "#64748B", "textColor": "#E8E8E8", "titleColor": "#E8E8E8",
    "clusterBkg": "#111827", "clusterBorder": "#334155", "edgeLabelBackground": "#131313",
    "noteBkgColor": "#221F18", "noteBorderColor": "#F59E0B", "noteTextColor": "#FFFFFF"
  },
  "flowchart": {"curve": "stepAfter", "nodeSpacing": 40, "rankSpacing": 50, "padding": 14, "wrappingWidth": 320}
}}%%

原生 Mermaid 的兩個坑：edgeLabelBackground 不要刪，刪了連線標籤會變成淺粉底、讀不到；classDef 的圓角要寫 rx:10px 帶單位，不帶單位在 Safari／iPhone 上會變直角。

每張圖畫完的檢查清單

實際打開畫好的圖看，只看程式沒報錯不算通過。

  • 內容：沒有漏掉節點、分支、條件或連線方向
  • 每個節點都掛了 class，而且掛對類別（判斷用 decide、失敗用 fail…）
  • 文字：不截字、不重疊，分區標題跟方框之間有留白
  • 連線：箭頭確實指到目標，不擦邊、不穿過別的節點；顏色全部是灰色
  • 交付格式：交 SVG 或 PNG 就打開那個檔案看；會在手機上看的，在手機上實際打開過
  • 原文留著：每張圖的 Mermaid 原文跟成品一起保存，之後改內容才不用重畫

來源

本文的版本與實測結果以 Pele 1.13.0 為準；升版後先用範本重畫一次再使用。