概述
hexo-filter-flowchart 是一个基于 flowchart.js 的 hexo 插件，用于在 markdown 中添加流程图。本文将详细介绍如何安装和使用该插件。
安装
前置条件
安装命令
使用 npm 命令进行安装：
npm install --save hexo-filter-flowchart
使用
编写流程图
在 markdown 文件中添加以下代码：
-- -------------------- ---- ------- -- --------- -- ---------- ----- -------------- ---- --------- ---------------- --- -- --- ------- --- ------------ ------------ ------------ -- ------------ --
其中，flowchart 和 endflowchart 之间的内容为流程图的定义。其中使用了四个符号 =>, ->, yes 和 no，分别表示：
=>: 定义一个元素，如st=>start: Start；->: 定义两个元素间的连接关系，如st->op;yes和no: 表示连接关系的两个方向，如cond(yes)->e表示连接到e节点。
渲染流程图
在 hexo 博客中使用 hexo-filter-flowchart 插件将以上流程图进行渲染。具体步骤如下：
在 hexo 博客中的配置文件
source/_config.yml中添加以下配置：filter_plugins: - hexo-filter-flowchart
这里
filter_plugins表示使用的过滤器插件列表，hexo-filter-flowchart表示要使用的插件名称。在 hexo 博客的主题中添加 flowchart.js 的脚本和样式文件。以
next主题为例，在主题配置文件themes/next/_config.yml中添加以下配置：# 自定义样式 custom_css: - /css/flowchart.min.css # 自定义脚本 custom_js: - /js/jquery.min.js - /js/flowchart.min.js
这里通过
custom_css和custom_js分别引入了flowchart.min.css和jquery.min.js、flowchart.min.js两个文件。在博客预览或者发布后即可看到流程图的渲染效果。
示例代码
以下是一个完整的 markdown 文件，其中包含了一个含有四个节点的流程图：
-- -------------------- ---- ------- --- ------ --------------------- ---- ----- ---------- -------- --- -- --------- -- ---------- ----- -------------- ---- --------- ---------------- --- -- --- ------- --- ------------ ------------ ------------ -- ------------ -- -- ---- ------- -------- ------- -- -- - ---- ----- ----------------------- ---------------------------------------------- - ------------------------------------------------------------------------------ -------- ------------------------------------------------------------------------------------------------------------------------