vscode中使用plantuml插件绘制活动图

绘制uml活动图是信息系统分析与设计的一个作业，而plantuml是很好的一个开源项目，支持各种图形的绘制。除了使用方便，它本身还支持各种插件，今天就介绍vscode对应的支持并完成商品选购功能的活动图使用简单的文字描述画UML图的开源工具。轻松从简单的文字说明创建UML图。也有许多种可用的图表。它也可以以PNG，LaTeX，EPS，SVG格式图像导出。https://plantuml.com/zh/

vscode下载plantuml插件

如下在vscode插件中输入plantuml，下载如下两个插件

创建新的文件，在保存格式中有PlantUML格式

Alt+D打开预览

vscode中plantuml的插件一个比较方便的地方就是可以实时预览

编写商品选购uml活动图

具体语法可以去官网查看，这里不做介绍

下面创建开始标志，第二行是用于设置判断语句，具体效果官网例子有讲解

@startuml 商品查找、选购功能
skinparam ConditionEndStyle hline 

下面代码创建“泳道”，也就是把不同流程进行区分。

|#Pink|= 进入商品页面|
start
#PaleGreen:登录/注册;
#White:进入商品界面;
|#AntiqueWhite|= 商品查找|
if (有明确要购买的商品) then (选择检索框方式)
    #White:输入商品名称;
    #White:进入包含所有该类商品的页面;
    #White:根据该类商品属性进一步限定条件;
elseif (无明确商品但可以确定类型) then (选择分类浏览)
    #White:进入分类浏览区;
    #White:点击某一类型商品;
    #White:进入该类型商品的页面;
    #White:根据该类商品属性进一步限定条件;
elseif (无明确购物目标) then (浏览个性化推荐)
    #White:进入个性推荐页面;
    #White:浏览每件商品信息;
elseif (想参考有相同爱好的用户所购商品) then (查看有相似购物习惯的用户近期所购商品)
    #White:进入“相似用户近期所购页面”;
    #White:浏览其他用户近期所购商品;
endif
#White:点击单个想购买的商品;

 下面代码构建第三个模块，并绘制结束标志

|#Pink|= 商品选购|
#PaleGreen:进入单个商品详情页面;
if (是否购买) then (yes)
    #White:确认配送地址;
    #White:选择购买数量;
    #White:根据不同商品配置其他购物信息;
    #White:加入购物车;
else (no)
    #White:取消商品购买;
endif
#White:结束商品选购;
stop

 效果图如下