流程图中各种形状的含义(一文了解流程图)

一、开始/结束符号

1、开始/结束符号代表流程的开始和结束，通常用圆角矩形或椭圆形表示。

2、开始/结束符号应放置在流程图的最上方和最下方，分别表示开始和结束。

3、开始/结束符号通常使用绿色或红色，分别表示正常结束和异常结束。以下是使用HTML绘制的示例代码：

<div style="border-radius:50%;background-color:#00ff00;width:100px;height:100px;text-align:center;line-height:100px;color:#fff">开始</div>

二、流程符号

1、流程符号代表具体的流程执行步骤，通常用矩形表示。

2、流程符号应按照执行的先后顺序从上到下放置在流程图中。

3、流程符号通常使用浅蓝色，以下是使用HTML绘制的示例代码：

<div style="border:1px solid #00a0e9;background-color:#c9f2ff;width:200px;height:80px;text-align:center;line-height:80px;color:#333">收集用户信息</div>

三、判断符号

1、判断符号用于判断流程中的条件，通常用菱形表示。

2、判断符号有两个分支，分别表示条件成立和条件不成立的情况。

3、判断符号通常使用黄色，以下是使用HTML绘制的示例代码：

<svg width="120" height="60">
<polygon points="60,0 0,30 60,60 120,30" style="fill:#ffc107;stroke:#333;stroke-width:1" />
<text x="30" y="40" style="font-size:20px">是否登录</text>
</svg>

四、连接符号

1、连接符号用于连接不同的流程步骤。

2、连接符号通常用箭头表示，箭头的方向表示流程的执行方向。

3、连接符号通常使用灰色，以下是使用HTML绘制的示例代码：

<svg width="120" height="60">
<line x1="0" y1="30" x2="120" y2="30" style="stroke:#bbb;stroke-width:2;marker-end:url(#arrow)" />
<marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" style="fill:#bbb" />
</marker>
</svg>

五、数据符号

1、数据符号用于表示数据的输入或输出，通常用梯形或类似梯形的形状表示。

2、数据符号应该标注清楚输入或输出的数据类型。

3、数据符号通常使用浅紫色，以下是使用HTML绘制的示例代码：

<svg width="120" height="60">
<path d="M 20 10 L 0 30 L 20 50 L 100 50 L 120 30 L 100 10 Z" style="fill:#e6d3f2;stroke:#333;stroke-width:1" />
<text x="60" y="35" style="font-size:20px">用户数据</text>
</svg>

六、子程序符号

1、子程序符号用于表示子程序的调用，通常用带箭头的矩形表示。

2、子程序符号应标注清楚调用的子程序的名称。

3、子程序符号通常使用浅绿色，以下是使用HTML绘制的示例代码：

<svg width="120" height="60">
<rect x="0" y="0" width="120" height="40" style="fill:#b1ff85;stroke:#333;stroke-width:1" />
<text x="60" y="25" style="font-size:20px;text-anchor:middle">计算总价</text>
<line x1="60" y1="40" x2="60" y2="60" style="stroke:#333;stroke-width:1;marker-end:url(#arrow)" />
<marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" style="fill:#333" />
</marker>
</svg>