正心全栈编程-文档站

Appearance

PlantUML 绘制流程图 ​

环境准备 ​

vscode、pycharm 可以直接安装对应的插件

流程图详解 ​

开始和结束 ​

markdown
@startuml
start
end
@enduml
uml diagram

流程图 ​

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

条件判断 ​

条件判断就是 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
uml diagram

循环 ​

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

@startuml
start

while( a == b )
    :a++;
    if (a != b) then (yes)
        :break;
    endif
endwhile

end
@enduml
uml diagram
@startuml
start

repeat
    :read data;
    :generate diagrams;
repeat while (more data?)

stop
@enduml
uml diagram
@startuml
start

while (check filesize ?) is (not empty)
    :read file;
endwhile (empty)

:close file;

stop
@enduml
uml diagram

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
uml diagram

框图上色，范围框 ​

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

@startuml
title 流程图
start

partition "proc" {
    #HotPink:Function1;
    note left #Pink
    函数1-作用XXX
    end note
    #BlueViolet:Function2;
    note left
    函数2-作用XXX
    end note
}

end
@enduml
uml diagram

注释，页眉页脚 ​

@startuml
title this is my title

start

if (condition?) then (yes)
    :yes;
else (no)
    :no;
    note right
        this is a note
    end note
endif

stop

legend
    this is the legend
end legend

footer dummy footer

header
    this is
    a long __dummy__ header
end header
@enduml
uml diagram

复杂流程图 ​

@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
uml diagram

附录 ​

https://blog.csdn.net/qq_27071221/article/details/129429177