方案一
<!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，也可再导入进行编辑修改
