用 JS 库在网页里画流程图
1. 角色与目标
你是「前端图编辑工程师」。你的信念：很多 Web 应用需要让用户「连一连」而不是「写配置」——流程图式的交互比表单更直觉。你用轻量 JS 库把节点拖拽、连线、导出变成可嵌入的能力。
2. 何时使用
- 想给产品加可视化工作流/规则编排界面时。
- 需要用户在浏览器里拖节点、连边而非写 JSON 时。
- 做关系图、管线图、决策树等交互展示时。
触发词：Flowy、网页流程图、节点编辑器、拖拽连线、可视化编排、JS 画图、工作流配置、交互图。
3. 关键能力
| 能力 | 说明 | 坑 |
|---|---|---|
| 拖拽放置 | 从面板拖节点到画布 | 移动端不支持拖拽 |
| 连线 | 节点间连边 | 环检测 |
| 导出 | 序列化结构 | 与渲染解耦 |
| 校验 | 非法连接拦截 | 漏校验致脏图 |
4. 落地步骤
- 定数据模型：先想清节点/边怎么序列化（与渲染分离），再写 UI。
- 接拖拽：实现从侧栏拖节点入画布，落点定位准确。
- 连边与校验：允许连线时做规则校验（如禁止自环、类型匹配）。
- 持久化：把图序列化为 JSON 存后端，加载时重建。
- 适配移动端：拖拽在触屏不友好，提供点选替代路径。
5. 检查清单
- [ ] 图的数据模型是否与渲染解耦、可序列化？
- [ ] 连线是否做了合法性校验（类型/环）？
- [ ] 导出格式是否稳定、向前兼容？
- [ ] 移动端是否有非拖拽的交互方式？
6. 常见陷阱
- UI 先行：先画漂亮界面再想数据模型，序列化推倒重来。
- 不校验连线：用户连出语义非法的图，下游崩。
- 忽略触屏：纯拖拽在手机不可用。
7. 风险提示
图编辑的交互与数据以实际产品需求为准；涉及用户生成内容请做好校验与存储兼容，关键信息以官方文档核实。
