HTML5本身不支持原生可编辑流程图，需依赖第三方JS库：Mermaid适合只读渲染，diagrams.net iframe方案开箱即用可编辑，GoJS/JointJS适用于深度定制场景。
HTML5 本身不提供原生流程图绘制或编辑能力，所谓“嵌入可编辑流程图”，实际是借助第三方 JavaScript 库在 <canvas></canvas> 或 <svg></svg> 上渲染并交互。直接写 HTML 标签画不出可编辑流程图，必须引入运行时库。
用 Mermaid 快速渲染只读流程图（最轻量）
适合文档型页面、CI/CD 报告、静态站点，不需拖拽编辑，仅需文本定义结构。
- 在页面中引入 Mermaid：通过
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script> - 启用初始化：
mermaid.initialize({ startOnLoad: true }); - 在 HTML 中用
<div class="mermaid">graph TD; A[开始] --> B{判断}; B -- 是 --> C[执行]; B -- 否 --> D[结束]</div>即可渲染 - ⚠️ 注意：
Mermaid默认不可编辑；若强行改 DOM 或重绘，会丢失状态，也不支持节点拖拽/连线调整
用 diagrams.net（原 draw.io）嵌入可编辑流程图
这是目前最接近“开箱即用可编辑”的方案，支持 iframe 嵌入、保存到本地或后端，且完全免费开源。
- 最简嵌入方式：
<iframe width="800" height="600" src="https://app.diagrams.net/?embed=1&lightbox=1&edit=_blank&pages=1&title=Flowchart#Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fuser%2Frepo%2Fmain%2Fflowchart.drawio"></iframe> - 关键参数：
embed=1启用嵌入模式，edit=_blank允许编辑，pages=1限制单页，#U...指向一个 base64 或 URL 编码的 .drawio 文件 - ⚠️ 坑点：若想自动加载并保存回服务器，需自己实现
postMessage通信 + 后端接收 XML 数据（diagrams.net导出的是纯 XML 字符串） - 不推荐用
src直接指向公网未授权的 drawio 文件——跨域或 CSP 可能拦截
用 GoJS 或 JointJS 实现深度定制可编辑流程图
适合需要绑定业务逻辑、自定义节点行为、与 React/Vue 集成、或导出为 JSON/PNG 的中大型应用。
立即学习“前端免费学习笔记（深入）”；
-
GoJS商业授权免费用于非商业项目，API 清晰，Diagram实例支持拖拽、连线、撤销、序列化为 JSON；示例初始化：const $ = go.GraphObject.make; const myDiagram = $(go.Diagram, "myDiv"); -
JointJS开源版功能完整但依赖较多（Backbone），节点定义需手动写joint.shapes.standard.Rectangle等，事件监听靠cellView.on('change:position') - ⚠️ 性能注意：超过 200 个节点时，
SVG渲染可能卡顿；建议开启virtualized: true（GoJS）或分页加载 - 别漏掉 CSS：这些库依赖
position: relative容器和固定宽高，否则画布不显示
真正“可编辑”的核心不在 HTML5，而在 JS 库对鼠标事件、DOM/SVG 操作、数据序列化的封装。如果你只需要展示，Mermaid 足够；如果要用户在线画完导出，diagrams.net iframe 最省事；如果流程图要和表单联动、校验逻辑、或嵌入管理后台，就得选 GoJS 这类引擎——它不会替你定义“审批通过后跳转哪个节点”，那得你自己写条件逻辑。
