偏技術的文章有時會用到各種圖形，一般來說可以做好圖然後截圖放到文章中就好了，雖然但圖片本身也很小，但存一大堆圖片佔用空間總覺得不是很好。
mermaid
mermaid支援很多種圖形的渲染，用它是個不錯個選擇。它可以渲染出多種複雜的圖形。例如下面這個。
而繪製它也僅僅需要幾行程式碼
sequenceDiagram
par Alice to Bob
Alice->>Bob: Go help John
and Alice to John
Alice->>John: I want this done today
par John to Charlie
John->>Charlie: Can we do this today?
and John to Diana
John->>Diana: Can you help us today?
end
end
安裝
安裝步驟很簡單，只需要三步
安裝hexo外掛
npm i hexo-filter-mermaid-diagrams
配置hexo
# mermaid chart
mermaid: ## mermaid url https://github.com/knsv/mermaid
enable: true # default true
version: "8.13.8" # default v7.1.2
options: # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
#startOnload: true // default true
主題配置
進入你的專案檔案中的themes\stun\layout\_partials\footer\footer.pug檔案下，我用的主題使用pug語言，所以我加入這一行程式碼即可
script(src="https://cdn.bootcdn.net/ajax/libs/mermaid/8.13.8/mermaid.min.js")
如果是.swig結尾的主題頁面檔案，可以參考如下配置
{% if theme.mermaid.enable %}
<script src='https://unpkg.com/mermaid@{{ theme.mermaid.version }}/dist/mermaid.min.js'></script>
<script>
if (window.mermaid) {
mermaid.initialize({theme: 'forest'});
}
</script>
{% endif %}
如果是原生js的則更簡單,插入這行程式碼即可
<script src="https://cdn.bootcdn.net/ajax/libs/mermaid/8.13.8/mermaid.min.js"></script>