偏技术的文章有时会用到各种图形,一般来说能够做好图而后截图放到文章中就好了,尽管但图片自身也很小,但存一大堆图片占用空间总感觉不是很好。
mermaid
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
而绘制它也仅仅须要几行代码
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>
参考和举荐
- 【hexo 指南】hexo 中运行 shader 和 threejs
- 【hexo 指南】hexo 配合 github action 主动构建(多种形式)
- 【hexo 指南】hexo 公布内容到 gitee page
- 【hexo 指南】hexo 公布内容到多个 git 仓库
- 【hexo 指南】hexo 公布内容到多个 git 仓库