hexo优化：Markdown语法引入Flowchart和Mermaid流程图

最新推荐文章于 2024-07-10 15:51:30 发布

Nolimited-Study

最新推荐文章于 2024-07-10 15:51:30 发布

阅读量3.2k

点赞数 1

分类专栏： hexo 文章标签： hexo 流程图 markdown

本文链接：https://blog.csdn.net/wzh0709zml/article/details/103310405

版权

本文介绍了如何在Hexo博客中使用Markdown语法引入Flowchart和Mermaid，以创建流程图。首先，通过安装相关插件为Hexo添加支持，然后分别演示了Flowchart和Mermaid的测试、语法结构，包括转向控制和判断分支，并提供了在线参考资源链接，以帮助读者更好地理解和应用这两种图形工具。

摘要由CSDN通过智能技术生成

我们在写Hexo博客文章时候，常常需要用图形来描述。但是有的时候画图不易修改，原图需要在本地保存，另外上传图片比较麻烦，加载图片又相对耗时。所以如何直接使用Markdown编写的流程图能够在hexo博客上直接生成就成了一个问题，另外，怎样通过Markdown来画流程图呢？

接下来，相信这篇博客能对你起到一定的帮助哦~

引入flowchart流程图

1、添加支持

Hexo 默认下markdown不支持flowchart流程图，需要添加支持，用git-bash在hexo目录下进行输入：

npm install --save hexo-filter-flowchart

接下来只需要输入对应的实例来测试就可以了。

2、测试

接下来，先进行测试一下，使用markdown进行编写flowchart语句。如下所示：

···flow   #由于渲染问题，请自行将 · 替换为 `
st=>start: 开始语句
in=>inputoutput: 输入值
e=>end: 结束语句
op=>operation: 执行操作
cond=>condition: 是否成立？
out=>inputoutput: 输出值

st->in->op->cond
cond(yes)->out
cond(no)->op
out->e
···