背景：本文是「Hugo 部落格支援 Mermaid 流程圖完整實現指南」的補洞紀錄。原指南建立了 Mermaid 整合的基礎、但 gitGraph 的自訂 commit type 顏色設定沒包含進去、文章用到才發現渲染失效。

問題情境

部落格用 Hugo + Mermaid 10.6.1 畫 gitGraph，文章裡寫了 type: HIGHLIGHT 和 type: REVERSE 想標出特定 commit、但渲染出來全部是預設灰色、type 標記沒生效。

gitGraph
   commit id: "A" type: HIGHLIGHT
   commit id: "C" type: REVERSE

期望：HIGHLIGHT 綠色、REVERSE 紅色 實際：兩個都跟普通 commit 一樣灰

根本原因

layouts/partials/custom_head.html 的 mermaid.initialize() 裡 themeVariables 只設了通用顏色（primaryColor、secondaryColor 等）、沒給 gitGraph 專用的顏色變數。Mermaid 找不到 HIGHLIGHT / REVERSE 對應的顏色就 fallback 到預設值。

 1// 原本的配置（不完整）
 2themeVariables: {
 3  primaryColor: '#2d3748',
 4  primaryTextColor: '#2d3748',
 5  primaryBorderColor: '#4a5568',
 6  lineColor: '#4a5568',
 7  secondaryColor: '#e2e8f0',
 8  tertiaryColor: '#f7fafc'
 9  // 缺：git0 / git1 / git2 等 gitGraph 變數
10}

Mermaid 的 themeVariables 對不同圖表類型有不同的命名空間 — flowchart 用 primaryColor、gitGraph 用 git0 / git1 / git2。原本的配置只覆蓋到通用 / flowchart 的命名空間。

解法

兩層補洞：JS 層補 themeVariables、CSS 層補 selector 規則做雙保險。

1. themeVariables 加 gitGraph 顏色

1themeVariables: {
2  // 原本的通用顏色保留
3  // ...
4
5  // 補 gitGraph 顏色
6  git0: '#90ee90',    // HIGHLIGHT
7  git1: '#ffb6c6',    // REVERSE
8  git2: '#4a5568'     // 其他
9}

2. CSS selector 補強

光靠 themeVariables 在某些 Mermaid 版本仍不穩定（命名規則隨版本改變、見下方注意事項）、加 CSS 直接針對渲染後的 SVG 元素：

1.mermaid svg [id$="_HIGHLIGHT"] circle {
2  fill: #90ee90;
3  stroke: #2d7a2d;
4}
5
6.mermaid svg [id$="_REVERSE"] circle {
7  fill: #ffb6c6;
8  stroke: #d32f2f;
9}

Mermaid 渲染 gitGraph 時、會在每個 commit 的 SVG node 加上 id="..._HIGHLIGHT" / id="..._REVERSE"、用 attribute selector [id$="_TYPENAME"] 命中。

注意事項

• 顏色變數命名隨 Mermaid 版本變動：10.6.1 用 git0 / git1 / git2、更早版本可能是 gitInv0 / gitInv1。升級 Mermaid 版本時要驗證一次顏色設定還生效。
• CSS selector 是防禦性的：themeVariables 配對的話 CSS 不會生效、但 themeVariables 失靈時 CSS 接住。雙保險、不重複設值。
• 這篇只解決「顏色沒出來」這個視覺問題：寫文章引用 gitGraph 的過程中還發現另一個議題 —「用 emoji 圖例區分 HIGHLIGHT / REVERSE」本身是語意混淆、不是視覺問題、修 CSS 解不了。那個議題見 report #92 視覺手段對齊錯誤層次。

驗證

修改後在本地 Hugo dev server 預覽包含 gitGraph 的文章、確認：

• HIGHLIGHT 的 commit circle 顯示綠色
• REVERSE 的 commit circle 顯示紅色
• 沒有 type 的 commit 維持預設灰色