Hexo-NexT 畫出漂亮的圖表 (Mermaid) (含明暗模式切換)

發表於 2024-04-20 更新於 2024-05-01 分類於教學文閱讀次數：文章字數： 2.1k 所需閱讀時間 ≈ 4 分鐘

前言

常常想要畫一些圖表但總是要去用其他的工具畫完然後再把圖片貼上，這樣很麻煩，所以這邊就來介紹一下怎麼在 NexT 中畫出漂亮的圖表

注意
用 mermaid 可以畫出各種你想表達複雜的圖，但可能不會是你想像中的樣子例如說你想畫出這種圖：

但你會畫出這種：

flowchart LR
    a-->b-->c
    d-->e-->f
    c-->d

或是這樣：

flowchart LR
    subgraph x[" "]
        direction TB
        subgraph Z[" "]
        direction LR
            A --> B
            B --> C
        end

        subgraph ZA[" "]
        direction RL
            D-->E
            E-->F
        end

        Z ~~~ ZA
        Z ~~~ ZA
        Z ~~~ ZA
        Z ~~~ ZA
        Z ~~~ ZA
        Z ~~~ ZA
        Z ~~~ ZA
        Z ~~~ ZA
        Z ~~~ ZA
        Z ~~~ ZA
    end
        Z --> ZA

Mermaid 的重點是把各種關係自動生成圖表，

能畫出哪些圖表

Flowchart（流程圖）
Pie chart diagrams (圓餅圖)
XY Chart (長條圖＆折線圖)
Mindmap (心智圖)
Timeline (時間軸)
Gantt diagrams (甘特圖)
Sequence Diagram（時序圖）
Class diagrams（類別圖）
Block Diagrams (區塊圖)
State diagrams（狀態圖）
Entity Relationship Diagrams（實體關係圖）
User Journey Diagram（使用者旅程圖）
Quadrant Chart (四象限圖)
Requirement Diagram (需求圖)
Gitgraph diagrams
ZenUML

如何使用

環境設置

首先要先配置一下環境，到./themes/NexT/_config.yml 中找到 mermaid 的配置並改成以下程式碼

# Mermaid tag
mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme:
    light: default
    dark: dark

然後這邊他有叫你設定在亮暗模式下的主題，這邊我設定的是 default 和 dark，你也可以試試看其他的，但是，如果你跟我你樣是可以切換亮暗模式的話，會發現不會隨著背景切換而改變

解決切換亮暗的問題
修改 themes/NexT/source/js/third-party/tags/mermaid.js 中的程式碼，修改判定亮暗模式的部分
CONFIG.darkmode && window.matchMedia('(prefers-color-scheme: dark)').matches \(\rightarrow\) document.body.classList.contains("darkmode--activated")

themes/NexT/source/js/third-party/tags/mermaid.js

document.addEventListener('page:loaded', () => {
  const mermaidElements = document.querySelectorAll('.mermaid');
  if (mermaidElements.length) {
    NexT.utils.getScript(CONFIG.mermaid.js, {
      condition: window.mermaid
    }).then(() => {
      mermaidElements.forEach(element => {
        const newElement = document.createElement('div');
        newElement.innerHTML = element.innerHTML;
        newElement.className = element.className;
        const parent = element.parentNode;
        // Fix issue #347
        // Support mermaid inside backtick code block
        if (parent.matches('pre')) {
          parent.parentNode.replaceChild(newElement, parent);
        } else {
          parent.replaceChild(newElement, element);
        }
      });
      mermaid.initialize({
        theme    : document.body.classList.contains("darkmode--activated") ? CONFIG.mermaid.theme.dark : CONFIG.mermaid.theme.light,
        logLevel : 4,
        flowchart: { curve: 'linear' },
        gantt    : { axisFormat: '%m/%d/%Y' },
        sequence : { actorMargin: 50 }
      });
      mermaid.run();
    });
  }
});

不過這樣子的話，要重整頁面才會切換，我還想不到怎麼辦法即時切換，如果有人知道的話拜託告訴我～

插入文本方式

在文本中插入

```mermaid
type

```

或是

1 2	{% mermaid type %} {% endmermaid %}

type 的部分後面會講到，這邊要注意的是如果是放在 codeblock 中的話，會需要到_config.yml 中的 highlight 中移除 mermaid，這樣子才能正確顯示 (會建議使用這種方式，因為這樣子使用其他有支援 mermaid 的工具檢視 markdown 時 (如 vscode 或是 github)，這些圖表才會自動生成)

Hexo config file

1
2
3

highlight:
  exclude_languages:
    - mermaid

Flowchart (流程圖)

type: flowchart
由數個節點（幾何形狀）和邊（箭頭或現）組成

flowchart LR
  A[This is the text in the box]-->B
  B<-->D
  D-.->C

箭頭指向

TB / TD：Top to bottom
BT：Bottom to top
RL：Right to left
LR：Left to right

… 未完待補：可以到官網查看

Pie chart diagrams (圓餅圖)

XY Chart (長條圖＆折線圖)

Mindmap (心智圖)

Timeline (時間軸)

Gantt diagrams (甘特圖)

Sequence Diagram（時序圖）

Class diagrams（類別圖）

Block Diagrams (區塊圖)

State diagrams（狀態圖）

Entity Relationship Diagrams（實體關係圖）

User Journey Diagram（使用者旅程圖）

Quadrant Chart (四象限圖)

Requirement Diagram (需求圖)

Gitgraph diagrams

ZenUML

補充 - 畫數位時序圖（wavedrom）

這個先不講，之後有空再補 (主要是我也不太清楚他怎麼用 xd)。然後他和 Mermaid 同時使用會造成字體大小會打架，如果想知道用法的話可以看看官方文件，或是語法教學