HTML5编辑器原生不支持流程图插入，需依赖第三方库或自建渲染层；mxGraph（drawio内核）是最成熟商用方案，Mermaid适合文本驱动轻量渲染，SVG自研可控但开发成本高。
HTML5 可视化编辑器本身不原生支持流程图插入——它只是个 DOM 渲染环境，没有内置的绘图逻辑或图形节点管理能力。真要实现“拖拽画流程图”，必须依赖第三方库或自建渲染层。
用 mxGraph（现为 drawio 开源内核）嵌入 HTML5 编辑器
这是目前最成熟、可商用的方案，mxGraph 提供完整的节点/连线/布局/导出能力，且完全基于 SVG + Canvas 渲染，兼容主流浏览器。
- 需加载
mxgraph.js（注意：不是 npm 上同名但已废弃的包，而是从 mxgraph2 仓库 构建） - 初始化时绑定到一个
<div id="graphContainer"></div>，不能直接塞进富文本contenteditable区域 - 流程图元素（如
start、decision）需通过graph.insertVertex和graph.insertEdge手动创建，不支持“粘贴 PNG 流程图自动识别” - 若编辑器是 React/Vue 构建的，需用 ref 获取容器 DOM，并在组件挂载后初始化
mxGraph，避免 SSR 渲染冲突
Mermaid 在 HTML5 页面中动态渲染流程图
适合轻量级、代码优先的场景：用户写 Mermaid 文本，前端实时转成 SVG 流程图。但它不是“可视化编辑”，而是“文本驱动可视化”。
- 引入
mermaid.min.js后调用mermaid.initialize({startOnLoad: false})，再用mermaid.render('id', 'graph TD...')触发渲染 - 不能拖拽调整节点位置——所有布局由 Mermaid 自动计算，仅支持有限的样式覆盖（如
classDef） - 常见报错如
TypeError: Cannot read property 'insertBefore' of null，多因目标容器未挂载或 ID 不存在 - 中文节点需加双引号，否则解析失败：
A["开始"] --> B["判断条件"]
自己用 SVG + drag/drop 实现简易流程图控件
可控性最强，但开发成本高。核心是：节点为 <g> 组合，连线用 <path>，所有坐标靠 JS 实时计算。
立即学习“前端免费学习笔记（深入）”；
- 每个节点需记录
x、y、width、height，拖拽时更新并重绘连线path d属性 - 连接点（port）建议用
<circle class="port output">定位在节点右边缘，mousedown 时记录起始 port，mousemove 画临时线，mouseup 时调用createEdge创建真实连线 - 别直接监听
document.onmousemove，应绑定到当前拖拽元素上，避免跨 iframe 或 modal 失效 - 缩放（
transform: scale()）下，鼠标坐标需反向换算，否则拖拽偏移——这是最容易卡住的点
真正难的不是“怎么画出来”，而是“怎么让流程图状态可序列化、可协同、可校验”。比如一个 decision 节点必须有且仅有两个出边，这种业务约束得自己写校验逻辑，库不会替你管。
