企业官网建设流程全解析

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.md（Vue3/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、自定义节点 └── LICENSE

SKILL.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）、常用 API（getGraphData、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 拿到可用的模型 Key

Skill 负责"喂知识"，模型负责"出代码"，两者配合才完整。如果你本地没有现成的模型调用通道，可以用 TaoToken 来拿 Key。它的接口地址是https://taotoken.net/api，兼容常见的对话补全格式，配置到 Cursor 的自定义模型或你自己的脚本里都行。

先去控制台创建 API Key：

https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api_keys&utm_campaign=rewrite

拿到 Key 之后，在 Cursor 的模型设置里填 Base URL 为https://taotoken.net/api，把 Key 粘进去。如果你更习惯用命令行验证，也可以直接 curl：

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": "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 ref="containerRef" class="flow-container"></div> </template> <script setup lang="ts"> import { onMounted, onUnmounted, ref } from 'vue' import LogicFlow from '@logicflow/core' import '@logicflow/core/dist/style/index.css' const containerRef = ref<HTMLDivElement | 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 null

new LogicFlow的container参数传的是ref对象而不是 DOM 元素。在 Vue3 里containerRef是Ref<HTMLDivElement | null>，要传containerRef.value。另外确保创建实例的代码在onMounted里，此时 DOM 才挂载完成。

5.3 插件方法报undefined

lf.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是否覆盖了你的文件路径，以及提问里有没有带上"LogicFlow""Vue3"这类关键词。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 来管理模型调用额度，避免频繁切换 Key：

https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding_plan&utm_campaign=rewrite

需要直接和模型对话调试提示词时，用模型对话入口：

https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=model_chat&utm_campaign=rewrite

接入文档里有更完整的参数说明和示例：

https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite

如果你用的是 Claude Code 这类命令行工具，Anthropic 兼容接入的配置方式可以参考：

https://taotoken.net/claude-code-anthropic?utm_source=taotoken_aicg_blog_end&utm_content=claude_code&utm_campaign=rewrite

把 Skill 目录、Cursor 规则、Vue3 组件这三样配好，再配合一个稳定的模型出口，你在 Cursor 里做 LogicFlow 流程图编辑器的效率会有明显变化。遇到问题先按第 5 节的排查清单过一遍，大部分坑都能自己填上。