Agent Skills
返回列表
💻

网页流程图编辑器

开发编程 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @kunlungrowth/js-flowchart-library。

技能介绍

它解决什么问题

很多 Web 应用真正需要的是让用户「连一连」，而不是手写 JSON 配置。流程图式的交互比表单更直觉：拖一个节点到画布，把它和另一个节点连起来，规则编排、工作流配置这类需求就完成了。但从零实现拖拽、连线、环检测、序列化和校验，前端很容易陷入「界面先跑起来、数据模型后补」的坑，最后序列化方案推倒重来。

核心能力与落地步骤

这个技能的核心是让图的数据模型与渲染解耦：

  • 拖拽放置：从侧栏拖节点进画布，但移动端不支持拖拽
  • 连线与校验：连边时做规则校验，如禁止自环、类型匹配，漏校验会产生脏图
  • 导出与持久化：把图序列化为 JSON 存后端，加载时重建

落地时建议按以下顺序：

  1. 先定数据模型——想清楚 节点 和 边 怎么序列化
  2. 接拖拽——实现准确的落点定位
  3. 连边与校验——拦截非法连接
  4. 持久化——存 JSON、加载重建
  5. 适配移动端——提供点选等替代路径

适用边界与注意点

  • 交互与数据设计以实际产品需求为准
  • 涉及用户生成内容要做好校验与存储兼容
  • 纯拖拽方案在触屏上不可用，必须有替代交互
  • 关键信息请以官方文档为准核实

使用场景

  • 为 SaaS 产品配置可视化规则引擎，让用户拖节点连边搭建审批流，并用 JSON 保存。
  • 给内部系统做工作流配置页面，业务方通过连线配置节点流转，而非写代码改配置。
  • 在网页里实现决策树编辑工具，拖拽分支节点、连线定义条件路径，并校验非法连接。
  • 构建数据管线可视化编辑器，用户拖入处理节点、连线定义数据流向，再序列化存储。

适合人员

  • 前端工程师：要给产品加拖拽连线式流程图编辑能力，缺数据模型与校验经验。
  • 全栈开发者：负责从零搭建可视化工作流配置界面，需要序列化与持久化方案。
  • 低代码平台开发者：在编辑器里嵌流程画布，关注节点拖拽与移动端交互适配。
  • 内部工具团队：给业务方提供可视化规则编排界面，避免他们手写 JSON 配置。