目的:Hexo 引入流程图-Mermaid的支持
Hexo 默认是markdown不支持Mermaid流程图的,需要添加支持,在 hexo 根目录下执行命令:
1 | npm install --save hexo-filter-mermaid-diagrams |
基础配置
编辑 hexo 根目录下的 _config.yml,在最后添加如下内容:
1 | # mermaid chart |
高级配置(可选)
以next主题为例,编辑 themes/next/layout/_partials/footer.swig 在最后添加如下内容
1 | {% if theme.mermaid.enable %} |
如果你的主题下没有footer.swig文件,你需要在你的主题目录下搜索文件名为after-footer.ejs和after_footer.pug的文件,
根据文件名的不同在其最后添加不同的内容,这点在github上的 hexo-filter-mermaid-diagrams 教程已经明确交代了。
1 | # 若是after_footer.pug,在最后添加内容 |
语法结构
语法结构如下:A[名称] --> B(名称)
其中,A、B均代表形状名称, -->表示箭头指向,形状样式用后面的括号来表示,括号里面的内容是形状中要显示的文本内容。其中有以下几种形状:
1 | 括号形式 形状样式 |
更多详细内容还可以参考网站:https://mermaid-js.github.io/mermaid/#/
测试
接下来,先进行测试一下,使用markdown进行编写mermaid语句。如下所示:
源码:
1 | graph TD |
写好后,可以在本地启动hexo查看效果如下图
效果:
graph TD
B((开始)) -->C{判断}
C -- a=1 -->D[执行语句1]
C -- a=2 -->E[执行语句2]
C -- a=3 -->F[执行语句3]
C -- a=4 -->G[执行语句4]
D--> AA((结束))
E--> AA
F--> AA
G--> AA
其他示例:
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
graph LR 开始 --> A:1人5天 A:1人5天 --> 结束 开始 --> B:1人3天 B:1人3天 --> 结束 开始 --> C:1人2天 C:1人2天 --> 结束
graph LR A:1 --> B:2 A:1 --> D:5 B:2 --> C:1 C:1 --> E:2 D:5 --> E:2
甘特图
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
title 产品计划表
gantt dateFormat YYYY-MM-DD axisFormat %m-%d section 初期阶段 明确需求: 2016-03-01, 10d section 中期阶段 跟进开发: 2016-03-11, 15d section 后期阶段 走查测试: 2016-03-20, 9d
文章参考:
https://xianmengfei.gitee.io/2021/03/01/09相关工具/hexo优化:Markdown语法引入Flowchart、Mermaid和sequence流程图
mermaid 官方文档:https://mermaid.js.org/intro/
mermaid 中文文档:https://mermaid.nodejs.cn/intro/
end