1. 为什么要在 Cursor 里给 Vue3 项目配一个 LogicFlow Skill如果你正在用 Vue3 做 BPMN 流程图、审批流设计器或者工作流编排页面大概率会遇到一个很具体的痛点LogicFlow 的 API 不算少插件体系又分得细每次让 AI 帮你写代码它给出的写法要么是 React 版本要么是旧版本 API要么干脆把lf.render的参数结构记错。你复制进项目一跑控制台报Cannot read properties of undefined然后只能自己翻官方文档一点点对。LogicFlow 是滴滴开源的流程图编辑框架支持脑图、ER 图、UML、工作流等多种图编辑场景核心包是logicflow/core插件生态里有logicflow/extension提供菜单、小地图、拖拽面板、BPMN 适配等能力。它本身对框架没有强绑定Vue3 里就是在onMounted创建实例、onUnmounted销毁实例这么个套路。问题在于AI 助手默认不知道你项目里用的是哪个版本、装了哪些插件、节点命名约定是什么于是它只能猜猜出来的代码自然容易跑偏。LogicFlow Skill 就是解决这个问题的。它本质上是放在 Cursor 项目.cursor/skills/logic-flow/目录下的一套结构化文档包含SKILL.md快速开始、核心概念、常用 API、插件、reference.md完整 API、Model 属性、事件、主题、examples.mdVue3/React/BPMN 完整示例。当你在 Cursor 里提问时带上LogicFlow流程图BPMN自定义节点这类关键词Cursor 会倾向加载这份技能文档让 AI 的回答贴近官方用法和你项目里的约定。这篇面向的是需要快速搭建流程图编辑器的 Vue3 前端开发者。我会把 Skill 的目录骨架、Cursor 规则文件片段、Vue3 集成示例、以及验证 Skill 是否真的生效的操作步骤都写清楚你可以直接照着做。整个流程里如果需要模型能力来辅助生成或校验代码我会用 TaoToken 的接口来演示因为它兼容常见的大模型调用格式配置起来不折腾。2. 前置准备Skill 目录骨架与 TaoToken 接入2.1 先把 Skill 目录放进项目Skill 不需要单独安装它就是一个放在项目里的文件夹。你在项目根目录建出这样的结构.cursor/ └── skills/ └── logic-flow/ ├── README.md # 技能总览中文 ├── README.en.md # 英文说明 ├── SKILL.md # 核心文档快速开始、概念、API、插件 ├── reference.md # 详细 API / Model / 事件 / 主题 ├── examples.md # 完整示例Vue3/React、BPMN、自定义节点 └── LICENSESKILL.md是 AI 最常读的一份里面应该覆盖LogicFlow 的安装方式、new LogicFlow({ container, grid })的初始化、内置节点rect/circle/diamond/polygon/ellipse、内置边line/polyline/bezier、自定义节点继承RectNode/RectNodeModel、自定义边继承PolylineEdgeModel、连接规则getConnectedSourceRules/getConnectedTargetRules、常用事件node:click、edge:click、history:change、常用 APIgetGraphData、render、addNode、addEdge、zoom、fitView、undo/redo、以及插件清单Control、Menu、DndPanel、MiniMap、Snapshot、SelectionSelect、BpmnElement、NodeResize、DynamicGroup。reference.md用来查具体某个 API 或配置项examples.md用来抄一段能直接跑的 Vue3 或 BPMN 代码。这三份文档分工明确AI 会根据你问题的粒度去挑对应的文件。2.2 在 Cursor 规则文件里声明触发条件光有 Skill 目录还不够你需要在 Cursor 的规则文件里告诉它什么时候该读这份技能。在项目根目录建.cursor/rules/logic-flow.mdc内容大致如下--- description: LogicFlow 流程图与 BPMN 开发规则 globs: [src/**/*.vue, src/**/*.ts, src/**/*.js] alwaysApply: false --- 当用户提问涉及以下关键词时优先加载 .cursor/skills/logic-flow/ 下的文档 - LogicFlow、流程图、工作流、BPMN、节点拖拽 - 自定义节点、自定义边、logicflow/core、logicflow/extension 回答时遵循 1. Vue3 项目统一使用 onMounted 创建实例、onUnmounted 销毁实例。 2. 插件从 logicflow/extension 引入样式文件单独 import。 3. 自定义节点优先继承 RectNode / RectNodeModel不要手写 DOM。 4. 涉及 BPMN 时使用 BpmnElement 插件与 adapterIn/adapterOut。alwaysApply: false表示不是每次都加载而是靠关键词触发这样不会拖慢无关问题的响应。globs限定在源码目录避免在写文档时也去读技能。2.3 用 TaoToken 拿到可用的模型 KeySkill 负责喂知识模型负责出代码两者配合才完整。如果你本地没有现成的模型调用通道可以用 TaoToken 来拿 Key。它的接口地址是https://taotoken.net/api兼容常见的对话补全格式配置到 Cursor 的自定义模型或你自己的脚本里都行。先去控制台创建 API Keyhttps://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite拿到 Key 之后在 Cursor 的模型设置里填 Base URL 为https://taotoken.net/api把 Key 粘进去。如果你更习惯用命令行验证也可以直接 curlcurl https://taotoken.net/api/v1/chat/completions \ -H Content-Type: application/json \ -H Authorization: Bearer $TAOTOKEN_API_KEY \ -d { model: claude-sonnet-4-20250514, messages: [ {role: user, content: 用一句话说明 LogicFlow 的 render 方法作用} ] }返回里能看到choices[0].message.content就说明通道是通的。这一步的意义在于后面验证 Skill 是否生效时你需要一个稳定的模型出口来对比带 Skill和不带 Skill的回答差异。3. 可复制配置Vue3 集成 LogicFlow 的完整片段3.1 安装依赖在 Vue3 项目里装核心包和扩展包npm install logicflow/core logicflow/extension如果你用的是 pnpm 或 yarn把npm install换成对应命令即可。核心包提供LogicFlow类和内置节点边扩展包提供插件。3.2 一个最小可跑的 Vue3 组件下面这段可以直接放进src/components/FlowEditor.vue它创建了一个带网格的画布渲染两个节点和一条连线template div refcontainerRef classflow-container/div /template script setup langts import { onMounted, onUnmounted, ref } from vue import LogicFlow from logicflow/core import logicflow/core/dist/style/index.css const containerRef refHTMLDivElement | null(null) let lf: LogicFlow | null null onMounted(() { if (!containerRef.value) return lf new LogicFlow({ container: containerRef.value, grid: true, width: containerRef.value.clientWidth, height: containerRef.value.clientHeight, }) lf.render({ nodes: [ { id: n1, type: rect, x: 150, y: 120, text: 开始 }, { id: n2, type: diamond, x: 420, y: 120, text: 判断 }, ], edges: [ { id: e1, type: polyline, sourceNodeId: n1, targetNodeId: n2 }, ], }) }) onUnmounted(() { lf?.destroy() lf null }) /script style scoped .flow-container { width: 100%; height: 600px; border: 1px solid #e5e7eb; } /style几个容易踩的点container必须是一个已经挂载到 DOM 的元素所以要在onMounted里创建logicflow/core/dist/style/index.css一定要引入否则节点和边没有样式画布上看起来是空白的onUnmounted里调destroy()释放实例否则热更新时会残留多个画布。3.3 加上拖拽面板和小地图插件工作流编辑器通常需要左侧节点面板拖拽、右下角小地图。这两个能力都在扩展包里import LogicFlow from logicflow/core import { DndPanel, MiniMap } from logicflow/extension import logicflow/extension/lib/style/index.css LogicFlow.use(DndPanel) LogicFlow.use(MiniMap) lf new LogicFlow({ container: containerRef.value, grid: true, }) lf.extension.dndPanel.setPatternItems([ { type: rect, text: 矩形, label: 矩形 }, { type: circle, text: 圆形, label: 圆形 }, { type: diamond, text: 菱形, label: 菱形 }, ]) lf.extension.miniMap.show()DndPanel的setPatternItems决定了面板里有哪些可拖拽的节点类型MiniMap的show()把缩略图显示出来。注意扩展包的样式文件路径是logicflow/extension/lib/style/index.css和核心包不是同一个。3.4 BPMN 场景的适配如果你做的是 BPMN 工作流需要引入BpmnElement插件并用adapterIn/adapterOut做 XML 与图数据的互转import { BpmnElement } from logicflow/extension LogicFlow.use(BpmnElement) lf new LogicFlow({ container: containerRef.value, grid: true, }) // 从 BPMN XML 导入 lf.render(bpmnXml, (data) { return lf.adapterIn(data) }) // 导出为 BPMN XML const graphData lf.getGraphData() const xml lf.adapterOut(graphData)adapterIn把 BPMN XML 转成 LogicFlow 能识别的图数据adapterOut反过来。这一步在 Skill 的examples.md里通常有完整示例AI 读到之后给出的代码会带上这两个适配方法而不是让你自己去拼。4. 验证 Skill 是否生效对比请求与成功结果4.1 用同一个问题做对照验证 Skill 生效最直接的办法是问一个只有读了 Skill 才会答对的问题。比如在 Cursor 里输入用 LogicFlow 在 Vue3 里画两个节点和一条线引入样式并在组件卸载时销毁实例。如果 Skill 被正确加载AI 的回答应该包含这几个特征onMounted里new LogicFlow、import logicflow/core/dist/style/index.css、onUnmounted里lf.destroy()、lf.render({ nodes, edges })的结构。如果它给的是 React 的useEffect写法或者忘了引入样式文件说明 Skill 没被触发。4.2 通过 TaoToken 接口做一次程序化校验如果你想更确定可以把 Skill 文档作为上下文通过 TaoToken 的接口发一次请求看模型是否按 Skill 里的约定回答curl https://taotoken.net/api/v1/chat/completions \ -H Content-Type: application/json \ -H Authorization: Bearer $TAOTOKEN_API_KEY \ -d { model: claude-sonnet-4-20250514, messages: [ {role: system, content: 你是 Vue3 LogicFlow 开发助手遵循项目 .cursor/skills/logic-flow/SKILL.md 的约定。}, {role: user, content: 给出 Vue3 中初始化 LogicFlow 并渲染两个节点的最小代码要求包含样式引入和卸载销毁。} ] }把返回的代码贴进项目跑一遍能正常渲染出节点和连线就说明 Skill 里的约定被模型吃进去了。这一步同时也是在验证 TaoToken 通道的稳定性。4.3 成功结果的判断标准跑通之后你应该看到画布上有网格背景两个节点一个矩形、一个菱形和一条折线边正常显示拖拽画布能平移滚轮能缩放。打开控制台没有报错组件切换路由再回来画布不会重复叠加。如果这些都满足说明 Skill 配置、Vue3 集成、模型调用三件事都到位了。5. 本篇常见错误排查5.1 画布空白控制台无报错最常见的原因是样式文件没引入。logicflow/core/dist/style/index.css必须 import否则节点和边虽然渲染在 DOM 里但没有宽高和颜色看起来就是空白。检查你的组件顶部有没有这行 import。5.2container is not defined或Cannot read properties of nullnew LogicFlow的container参数传的是ref对象而不是 DOM 元素。在 Vue3 里containerRef是RefHTMLDivElement | null要传containerRef.value。另外确保创建实例的代码在onMounted里此时 DOM 才挂载完成。5.3 插件方法报undefinedlf.extension.dndPanel报 undefined通常是因为没有LogicFlow.use(DndPanel)或者 use 的时机在new LogicFlow之后。LogicFlow.use要在创建实例之前调用。另外扩展包的样式文件路径容易写错是logicflow/extension/lib/style/index.css不是dist。5.4 热更新后出现多个画布Vite 的 HMR 会重新执行onMounted如果没在onUnmounted里destroy()旧实例还挂在 DOM 上新实例又叠一层。加上lf?.destroy()就能解决。如果还不行检查destroy是否被调用在lf为 null 的情况下。5.5 Skill 没被触发AI 还是给 React 代码检查.cursor/rules/logic-flow.mdc里的globs是否覆盖了你的文件路径以及提问里有没有带上LogicFlowVue3这类关键词。Cursor 的 Skill 加载依赖关键词匹配问题里不提 LogicFlow它可能就去读别的规则了。另外确认.cursor/skills/logic-flow/SKILL.md文件确实存在且内容完整。5.6 BPMN XML 导入后节点错位adapterIn转换出来的坐标可能和你的画布尺寸不匹配。导入后调一次lf.fitView()让视图自适应或者手动设置lf.zoom和lf.translateCenter。如果节点类型对不上检查 BPMN XML 里的元素名是否在BpmnElement的映射表里。6. 继续深入把 Skill 用顺手的几个建议Skill 的价值在于随问随答但前提是你提问的方式对。一次只问一个方向比如先问怎么初始化并画两个节点再问怎么给节点加点击事件这样 AI 每次都能精准命中SKILL.md里的对应章节回答更聚焦。需要具体代码时直接说给我一段 Vue3 集成 LogicFlow 的完整示例它会去翻examples.md。日常开发用 Skill 快速出代码和思路遇到版本差异或冷门 API再去官方文档核对。如果你在 Cursor 里做的是长期编码或 Agent 类任务可以考虑用 Coding Plan 来管理模型调用额度避免频繁切换 Keyhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite需要直接和模型对话调试提示词时用模型对话入口https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite接入文档里有更完整的参数说明和示例https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite如果你用的是 Claude Code 这类命令行工具Anthropic 兼容接入的配置方式可以参考https://taotoken.net/claude-code-anthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_codeutm_campaignrewrite把 Skill 目录、Cursor 规则、Vue3 组件这三样配好再配合一个稳定的模型出口你在 Cursor 里做 LogicFlow 流程图编辑器的效率会有明显变化。遇到问题先按第 5 节的排查清单过一遍大部分坑都能自己填上。