【工具分享】如何快速地、可视化地跟其他同学沟通复杂逻辑——用代码画流程图

版本	日期	修订人	描述
V1.0	2025/3/9	nick huang	创建文档
V1.1	2025/3/11	nick huang	添加「循环 或 遍历」章节

背景

做需求澄清、技术澄清的时候，我们需要给其他同学表述业务逻辑或技术实现逻辑。
这些逻辑，用文字往往冗长、可读性差。
这个时候，我们往往考虑用流程图来表达其中的逻辑。
流程图，因其可视化的特性，可读性确实提高了许多。
但画流程图的效率总是不如意，需要稍长的时间。
前段时间，使用了一款用代码生成流程图的工具，使用下来还不错。
故本文分享之。

文字描述 与 流程图描述 的对比

下图描述的「查询字典数据（先查询Redis，如没命中查数据补偿）」的逻辑。
如果用纯文字描述，因涉及2个判断、2个读数操作、1个写数操作，描述起来会比较冗长、繁琐。
而使用流程来可视化，则显得逻辑清晰：

这是用 PlantUML 画的，代码如下：

@startuml
start

:从Redis中查询指定字典数据;
if (判断查得的Redis字典数据是否为空？) then (不为空)
#palegreen:返回数据;
stop
else (为空)
:从数据库查询指定字段数据;

if (判断查得的数据库字典数据是否为空？) then (为空)
#pink:提示：没有找到数据;
stop
else (不为空)
:写入Redis，缓存起来，供下次快速查询;
#palegreen:返回数据;

stop
@enduml

PlantUML

上图是用 PlantUML 画的，官网是：https://plantuml.com/zh/。
流程图，在他的官网描述的是活动图。
他有 Web 在线的编辑器。但我习惯用他在IDE的插件，比如Java开发工具IntelliJ IDEA的插件PlantUML Integration。

Tips
除了活动图，他的序列图我感觉也不错。
本文主要介绍活动图。

常用的基础语法及解析

开始节点、结束节点

开始节点：实心圆点
结束节点：半实心圆点
代码：

@startuml
start

stop
@enduml

效果：

常规的流程节点

作用：用于表示常规流程操作，不涉及条件判断
形状：圆角长方形
代码：

@startuml
start

:业务操作;

stop
@enduml

效果：

判断节点

作用：用于表示条件判断
形状：菱形
代码：

@startuml
start

if (今天天气是否晴朗？) then (不晴朗)
:请带上雨伞哦！;
else (晴朗)
:去郊游吧！;
endif

stop
@enduml

效果：

对于判断节点，如果判断完毕后执行完业务节点后程序结束。
我有时候倾向这么写，觉得可读性更高（虽然这样流程图有多个结束节点）：

@startuml
start

if (今天天气是否晴朗？) then (不晴朗)
:请带上雨伞哦！;
stop
else (晴朗)
:去郊游吧！;

stop
@enduml

效果：

给节点加上颜色

作用：给节点加上颜色
代码：

@startuml
start

#palegreen:业务操作;

stop
@enduml

效果：

有时候，流程判断后，有时候有成功或失败的结果导向，给节点加上相应的「红绿灯」颜色，可读性更高：

@startuml
start

if (今天天气是否晴朗？) then (不晴朗)
#pink:请带上雨伞哦！;
stop
else (晴朗)
#palegreen:去郊游吧！;

stop
@enduml

效果：

循环 或 遍历

作用：用于表示循环、遍历
形状：循环是否结束的判断、返回的箭头、循环结束的箭头

判断在前面的代码示例：

@startuml
start

while (遍历“userLIst”是否结束) is (未结束)
    :操作1;
    :操作2;
endwhile (结束)
    :后续操作;

stop
@enduml

效果：

判断在后的代码示例：

@startuml
start

repeat :循环开始的那个业务操作;
:操作2;
:操作3;
repeat while (遍历“userLIst”是否结束)

stop
@enduml

效果：

其他

本文只列举本人经常使用的语法。
PlantUML的活动图还有其他特性和语法，可以上官网的文档查阅、使用。

最后

小弟不才，学识有限，如有错漏，欢迎指正哈。
如果本文对你有帮助，记得“一键三连”（“点赞”、“评论”、“收藏”）哦！