方案一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flowchart Example</title>
<style>
.flowchart {
text-align: center;
}
.flowchart svg {
width: 100%;
max-width: 600px;
margin: auto;
}
.flowchart rect {
fill: #fff;
stroke: #000;
stroke-width: 2px;
}
.flowchart text {
text-align: center;
font-family: Arial, sans-serif;
font-size: 14px;
}
.flowchart line {
stroke: #000;
stroke-width: 2px;
}
</style>
</head>
<body>
<div class="flowchart">
<svg height="200" xmlns="http://www.w3.org/2000/svg">
<!-- Start Node -->
<rect x="50" y="30" width="100" height="50" rx="10" ry="10"/>
<text x="100" y="50" dy=".35em">Start</text>
<!-- Process Node -->
<rect x="200" y="30" width="100" height="50" rx="10" ry="10"/>
<text x="250" y="50" dy=".35em">Process</text>
<!-- Decision Node -->
<polygon points="350,30 400,80 350,130" fill="#fff" stroke="#000" stroke-width="2"/>
<text x="350" y="70" dy=".35em" text-anchor="middle">Decision</text>
<text x="350" y="110" dy=".35em" text-anchor="middle">?</text>
<!-- Yes Path -->
<rect x="200" y="150" width="100" height="50" rx="10" ry="10"/>
<text x="250" y="170" dy=".35em">Yes</text>
<!-- No Path -->
<rect x="500" y="150" width="100" height="50" rx="10" ry="10"/>
<text x="550" y="170" dy=".35em">No</text>
<!-- Lines -->
<line x1="150" y1="55" x2="195" y2="55" stroke="#000" stroke-width="2"/>
<line x1="300" y1="55" x2="345" y2="55" stroke="#000" stroke-width="2"/>
<line x1="345" y1="80" x2="345" y2="125" stroke="#000" stroke-width="2" stroke-dasharray="5,5"/>
<line x1="345" y1="125" x2="295" y2="175" stroke="#000" stroke-width="2"/>
<line x1="345" y1="80" x2="445" y2="125" stroke="#000" stroke-width="2" stroke-dasharray="5,5"/>
<line x1="445" y1="125" x2="495" y2="175" stroke="#000" stroke-width="2"/>
</svg>
</div>
</body>
</html>
点击查看详情
方案二
- 使用工具drawio，绘制完成后导出就是html，也可再导入进行编辑修改
