一图胜千言，实时掌握流程走到哪一步了！

松哥正在录制关于TienChin项目的视频教程，使用的技术栈包括Spring Boot和Vue3，并涉及许多有趣的技术。这个项目旨在实现超过90%的完成率，配套视频教程也已发布。

在之前的文章中，松哥介绍了Flowable工作流引擎中的一个功能，即能够绘制图片来展示流程执行到的具体步骤。虽然之前没有详细介绍如何绘制这些图片，本次分享将详细探讨这个话题。

首先，松哥展示了流程图的效果图，其中已执行的节点和连线被红色标记。然后，介绍了如何使用Flowable的API将流程图绘制成图片。主要步骤包括查找流程定义对象、获取BpmnModel对象、创建图片生成器DefaultProcessDiagramGenerator，并调用generatePngDiagram方法生成图片输入流，最后将输入流保存为图片文件。

为了高亮显示已执行的节点，可以使用一个具有多个参数的generateDiagram方法，其中关键参数是对已经执行的活动节点和连线进行高亮处理。通过查询ACT_RU_ACTINST表，可以获取当前执行的活动信息，然后将活动ID和连线ID添加到相应的集合中，最终生成带有高亮的流程图。

如果流程已经执行完成，ACT_RU_ACTINST表中的数据将被清空。此时，可以通过查询ACT_HI_ACTINST表来获取执行完毕的活动信息，并绘制出包含高亮节点和连线的流程图。绘制流程图的方法已经介绍完毕，现在可以尝试实践。

松哥强调，TienChin项目视频旨在帮助开发者一起实现一个高完成率的项目，视频教程提供了一个实用的案例学习机会。