一：环境准备

1，本地安装好vscode

2，vscode安装PlantUML插件

3，本地安装java环境，我本地用的是jdk-11.0.17+8，配置好环境变量

4，在vscode上新建一个文件以wsd结尾，输入以下两行，然后按alt+d按键，右边可以调出预览视图，并且预览是实时的，每写一行在右边都会呈现出总体流程图，效果如下

@startuml
@enduml

至此本地环境就准备好了，接下来就是逐步讲解每个组件的使用了

二：流程图详解

1，开始和结束

@startuml
start
end
@enduml

2，流程框

@startuml
start
:我要从南走到北;
:还要从北走到黑;
:我要人们都告诉我;
end
@enduml

3，条件判断

条件判断就是if-else，有两种形式，如下所示

@startuml
start
if( a == b )then(yes)
    :a = 1;
else(no)
    :b = 100;
endif

if( a ) equals ( b ) then
    : c = 888;
else
    : d = 999;
endif

end
@enduml

4，循环

循环主要展示了如下三种样式，第一种就是常规的while循环流程图，第二种用的是repeat有些类似do-while的循环流程图，第三种是while的另一种表达方式，大家可以根据实际需要去选择使用哪一种的循环

@startuml
start
while( a == b )
:a++;
if(a != b)then(yes)
:break;
endif
endwhile
end
@enduml

@startuml
start
repeat
:read data;
:generate diagrams;
repeat while (more data?)
stop
@enduml

@startuml
start
while (check filesize ?) is (not empty)
:read file;
endwhile (empty)
:close file;
stop
@enduml

5，switch case

switch case应该是程序设计中比较常见的语句了，在PlantUML中当然也有switch case的一席之地，建议大家在写 PlantUML语句时候，也和写代码一下，通过行的缩进来保持层次感，这样一是易读，二是也方便修改

@startuml
start
switch(type)
    case(1)
        :process-1;
    case(2)
        :process-2;
    case(3)
        :process-3;
    case(default)
        :process-default;
endswitch
end
@enduml

6，框图上色，范围框

这个这是锦上添花了，如果想要流程图好像些，可以给组件上色，语法如下，另外如果对某个流程相加注释也是可以的。有的流程是属于一个模块可以用partition来囊括这个模块内的流程，使流程图更加的清晰。

@startuml
title 流程图
start
partition "proc" {
    #HotPink:psFunction1;
    note left #Pink
    函数1-作用XXX
    end note
    #BlueViolet:psFunction2;
    note left
    函数2-作用XXX
    end note
}
end
@enduml

7，注释，页眉页脚

@startuml
title this is my title
if (condition?) then (yes)
:yes;
else (no)
:no;
note right
this is a note
end note
endif
stop
legend
this is the legend
endlegend
footer dummy footer
header
this is
a long __dummy__ header
end header
@enduml

8，箭头

9，复杂流程图

下面展示一个比较复杂的流程图，大家写复杂流程图的需求可以参考一下

@startuml
start
:ClickServlet.handleRequest ();
:new page;
if (Page.onSecurityCheck) then (true)
:Page.onInit();
if (isForward?) then (no)
:Process controls;
if (continue processing?) then (no)
stop
endif
if (isPost?) then (yes)
:Page.onPost();
else (no)
:Page.onGet();
endif
:Page.onRender ();
endif
else (false)
endif
if (do redirect?) then (yes)
:redirect process;
else
if (do forward?) then (yes)
:Forward request;
else (no)
:Render page template;
endif
endif
stop
@enduml