One: Environmental preparation

1. Install vscode locally

2, vscode installs the PlantUML plugin

3. Install the java environment locally. I use jdk-11.0.17+8 locally, and configure the environment variables

4. Create a new file on vscode that ends with wsd, enter the following two lines, and then press the alt+d button, the preview view can be called up on the right, and the preview is real-time, and the overall flow chart will be displayed on the right for each line written, the effect as follows

@startuml
@enduml

At this point, the local environment is ready, and the next step is to explain the use of each component step by step

Two: detailed flow chart

1. Start and end

@startuml
start
end
@enduml

2. Process box

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

3. Condition judgment

Conditional judgment is if-else, which has two forms, as shown below

@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. Loop

The loop mainly shows the following three styles, the first is the conventional while loop flowchart, the second uses repeat which is somewhat similar to the do-while loop flowchart, and the third is another expression of while, everyone You can choose which cycle to use according to actual needs

@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 should be a relatively common statement in programming. Of course, there is a place for switch case in PlantUML. It is recommended that you also write code when writing PlantUML statements, and maintain a sense of hierarchy by indenting lines. This is easy Read, and second, it is also convenient to modify

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

6. Color the block diagram, range box

This is the icing on the cake. If you want to make the flow chart look better, you can color the components. The syntax is as follows. In addition, it is also possible to add comments to a certain process. Some processes belong to a module, and partitions can be used to include the processes in this module to make the flow chart clearer.

@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. Notes, header and footer

@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, arrow

9. Complex flow chart

The following shows a relatively complex flow chart. You can refer to it for writing complex flow charts.

@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

Three: Summary

The above is only part of the flow chart showing PlantUML, and the capabilities of PlantUML are far more than that. Will continue to update

You can also refer to the PlantUML document, which describes all usages in detail: https://download.csdn.net/download/qq_27071221/87553416?spm=1001.2014.3001.5503

PlantUML draws a beautiful flow chart like a goddess