【hexo指南】hexo配置ER图流程图时序图插件
偏技术的文章有时会用到各种图形,一般来说可以做好图然后截图放到文章中就好了,虽然但图片本身也很小,但存一大堆图片占用空间总觉得不是很好。
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>
参考和推荐
- 【hexo指南】hexo中运行shader和threejs
- 【hexo指南】hexo配合github action 自动构建(多种形式)
- 【hexo指南】hexo发布内容到gitee page
- 【hexo指南】hexo发布内容到多个git仓库
- 【hexo指南】hexo发布内容到多个git仓库
【hexo指南】hexo配置ER图流程图时序图插件的更多相关文章
- powerdesign、navacat、ER图、uml、类图、时序图
关于建表和生成实体以及ER图的简便方法 a:用navacat客户端生成简单的ER图,并生成建表sql,执行生成表. b:用powerdesign连接数据库,反向生成带有注释的ER图. c:用ideal ...
- Pownerdesigner画用例图_类图_时序图
1. 问题描述 软件过程中,设计阶段有几个常用的工具:Rational Rose.Visio.Pownerdesigner,一般用Rose用例图/类图/时序图,Visio画流程图,Pownerdesi ...
- eclipse下生成Java类图和时序图,生成UML图
1.安装和使用AmaterasUML 安装AmaterasUML前,需要先安装GEF采用eclipse在线安装方式安装就好.eclipse在线安装GEF的地址:http://download.ecli ...
- 看懂UML类图与时序图
看懂UML类图和时序图 这里不会将UML的各种元素都提到,我只想讲讲类图中各个类之间的关系: 能看懂类图中各个类之间的线条.箭头代表什么意思后,也就足够应对 日常的工作和交流: 同时,我们应该能将类图 ...
- 设计模式——1.概述&UML类图和时序图
声明:本博客设计模式相关文章均整理和修改自网络,原文地址:图说设计模式 学习设计模式的3个层次—— 1.熟悉所有设计模式: 2.能够用代码实现: 3.运用到工作的项目中. 设计模式指导软件开发,学习设 ...
- 看懂UML类图和时序图
看懂UML类图和时序图 这里不会将UML的各种元素都提到,我只想讲讲类图中各个类之间的关系: 能看懂类图中各个类之间的线条.箭头代表什么意思后,也就足够应对 日常的工作和交流: 同时,我们应该能将类图 ...
- [转] 看懂UML类图和时序图
PS: 组合关系:实心,一个类A属于另一个类,或多个类,但是类A不能单独存在去使用,A一般是一种抽象的东西 聚合关系:空心,一个类A可以单独存在使用 不论组合聚合,A的方法都会被直接调用. 看懂UML ...
- 【UML九种图系列】之如何利用三层来绘制类图、时序图?
UML并发视图:实体之间行为的交互,是动态.分为:时序图.协作图.状态图.活动图 一.时序图简述: 时序图(Sequence Diagram):描述对象之间的交互行为,按照时间顺序排列. 元素: 角色 ...
- 阅读UML类图和时序图
这里不会将UML的各种元素都提到.我仅仅想讲讲类图中各个类之间的关系. 能看懂类图中各个类之间的线条.箭头代表什么意思后,也就足够应对 日常的工作和交流: 同一时候,我们应该能将类图所表达的含义和终于 ...
随机推荐
- Docker从入门到精通(八)——Docker Compose
恭喜大家,学到这里,对于 docker 的基础玩法大家应该都会了,下面会介绍 docker的一些编排工具. 1.为什么需要 Docker Compose? 官网镇楼:https://www.runoo ...
- 手动上下eureka上面服务
手动下eureka curl -X PUT http://eureka.xxx.xxx.com/eureka/apps/VIDEO-API/111.111.111.111:test-api:0000/ ...
- 一个windows主题网站-
地址 地址 说明 选择适合自己的,下载,双击安装,就可使用了
- Android 崩溃错误
SIGSEGV ---段错误. 遇到此错误的可能情况是: 1.缓冲区溢出---通常由指针引用超出范围引起. 2.堆栈溢出---请记住默认堆栈大小为8192K. 3.我们的判断系统禁止文件访问---文件 ...
- 【LeetCode】694. Number of Distinct Islands 解题报告 (C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 DFS 日期 题目地址:https://leetcod ...
- 【LeetCode】15. 3Sum 三数之和
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 个人公众号:负雪明烛 本文关键词:3sum, 三数之和,题解,leetcode, 力扣,P ...
- 【LeetCode】449. Serialize and Deserialize BST 解题报告(Python)
[LeetCode]449. Serialize and Deserialize BST 解题报告(Python) 标签: LeetCode 题目地址:https://leetcode.com/pro ...
- 【LeetCode】705. Design HashSet 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 位图法 数组法 日期 题目地址:https://le ...
- anaconda安装PIL
PIL仅支持到python2.7: Pillow支持Python 3.x: conda install pillow 参考文献: 使用anaconda安装python3版本的PIL_不行不至-CSDN ...
- 版本不兼容Jar包冲突该如何是好?
一.引言 "老婆"和"妈妈"同时掉进水里,先救谁? 常言道:编码五分钟,解冲突两小时.作为Java开发来说,第一眼见到ClassNotFoundExceptio ...