在 Hexo 部落格新增 Mermaid 語法功能

Hexo
, ,

做法

修改 themes/cactus/_config.yml 檔，新增 mermaid 欄位。

1
2
3
# Enable or disable the mermaid chart.
mermaid:
  enable: true

安裝 hexo-filter-mermaid-diagrams 依賴套件。

1
npm install hexo-filter-mermaid-diagrams

修改 themes/cactus/layout/_partial/scripts.ejs 檔。

1
2
3
4
<!-- Mermaid chart -->
<% if (theme.mermaid.enable){ %>
    <script src='https://unpkg.com/mermaid@7.1.2/dist/mermaid.min.js'></script>
<% } %>

使用 mermaid 語法標記，將「.」符號刪除後使用。

1
2
3
4
5
6
7
8
\.\.\mermaid
graph TD;
    A-->B;
    B-->C;
    C-->D;
    D-->E;
    E-->A;
\.\.\

繪製出的流程圖如下。

graph TD;
    A-->B;
    B-->C;
    C-->D;
    D-->E;
    E-->A;