方案一
| <!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"> |
| |
| <rect x="50" y="30" width="100" height="50" rx="10" ry="10"/> |
| <text x="100" y="50" dy=".35em">Start</text> |
| |
| |
| <rect x="200" y="30" width="100" height="50" rx="10" ry="10"/> |
| <text x="250" y="50" dy=".35em">Process</text> |
| |
| |
| <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> |
| |
| |
| <rect x="200" y="150" width="100" height="50" rx="10" ry="10"/> |
| <text x="250" y="170" dy=".35em">Yes</text> |
| |
| |
| <rect x="500" y="150" width="100" height="50" rx="10" ry="10"/> |
| <text x="550" y="170" dy=".35em">No</text> |
| |
| |
| <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，也可再导入进行编辑修改
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
2023-11-29 linux安装spark
2023-11-29 Tableau安装
2023-11-29 Xshell使用
2021-11-29 mybatis plus 项目模板