LogicFlow Skill 说明与使用指南

基于 Cursor 的 LogicFlow 技能包，让 AI 助手帮你快速搭建流程图、工作流与 BPMN 编辑器。
技能下载地址 LogicFlow Skill

---

一、这个 Skill 是什么？

LogicFlow Skill 是放在 Cursor 项目里的一个 Agent 技能（Skill），用来教 AI 如何正确使用 LogicFlow 做图编辑相关开发。

• LogicFlow：滴滴开源的流程图编辑框架，支持脑图、ER 图、UML、工作流等。
• 本 Skill：把 LogicFlow 的安装、概念、API、插件、自定义节点/边、Vue3/React 集成等整理成结构化文档，供 Cursor 在回答你问题时自动加载使用。

也就是说：当你在 Cursor 里问「如何用 LogicFlow 做 xxx」时，AI 会优先参考这份 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  # 本文

文件	作用	适合什么时候看
SKILL.md	入门 + 核心概念 + 常用 API + 插件	想快速上手或查「怎么初始化、怎么注册节点」
reference.md	完整 API、Model 属性、事件、主题	查某个具体 API 或配置项
examples.md	可直接参考的 Vue3/React/BPMN 示例	做集成或抄一段可用代码

---

三、什么时候会触发这个 Skill？

当你的问题或任务描述里出现下面这些关键词时，Cursor 会倾向于加载 LogicFlow 技能来回答你：

• LogicFlow
• 流程图编辑器 / 工作流可视化
• 节点拖拽 / 自定义节点 / 自定义边
• BPMN / 工作流建模
• @logicflow/core

所以：想用好这个 skill，在提问时尽量带上「LogicFlow」或上述相关词，例如：

• 「用 LogicFlow 在 Vue3 里做一个简单流程图编辑器」
• 「LogicFlow 怎么自定义一个菱形节点？」
• 「LogicFlow 如何加右键菜单和小地图？」
• 「基于 LogicFlow 实现 BPMN 工作流」

---

四、怎么「使用」这个 Skill？

4.1 你不需要单独安装

只要项目里已经有 .cursor/skills/logic-flow/ 这套文件，Cursor 会根据你的问题自动判断是否加载该技能，无需额外配置。

4.2 推荐使用方式

1. 明确说出技术栈
   例如：「用 Vue3 + LogicFlow 做一个流程图页面」，AI 会结合 skill 给出 Vue3 的写法（如 onMounted 里创建实例、onUnmounted 里销毁）。

2. 一次只问一个方向
   例如先问「怎么初始化 LogicFlow 并画两个节点」，再问「怎么给节点加点击事件」，这样回答会更聚焦，也更容易对应到 skill 里的「快速开始」和「事件系统」。

3. 需要具体代码时
   直接说「给我一段在 React 里集成 LogicFlow 的完整示例」或「给我一个自定义矩形节点的 Model 和 View 代码」，AI 会参考 SKILL.md 和 examples.md 生成可用代码。

4. 做 BPMN 时
   提问里带上「BPMN」或「工作流」，AI 会用到 skill 里的 BPMN 插件、BpmnElement、XML 导入导出等说明。

---

五、Skill 能帮你做哪些事？（能力速览）

下面这些能力在 SKILL.md 里都有对应章节，AI 会按需引用：

能力	说明
创建图编辑器	流程图、工作流、脑图、ER 图、UML 图等场景的初始化与渲染
内置节点	矩形(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 等
框架集成	Vue3（onMounted/onUnmounted）、React（useEffect）的推荐用法
BPMN	BpmnElement、BPMN XML 的导入导出（adapterIn/adapterOut）

你在提问时只要说出目标（例如「加小地图」「导出图片」「可拖拽的节点面板」），AI 就会从 skill 里挑对应的插件和 API 来写示例。

---

六、一个最小可用的「使用」示例

下面是一个你可以直接对 Cursor 说的自然语言示例，用来验证 skill 是否被正确使用：

你说：

用 LogicFlow 在页面里画两个节点和一条线，并引入样式。不要用 Vue 或 React，就用原生 JS 和一个 div 容器。

AI 会倾向于给出类似下面的代码（来自 SKILL.md 的快速开始）：

• 一个 #container 的 div 和基础样式
• import LogicFlow from '@logicflow/core' 和 import '@logicflow/core/dist/style/index.css'
• new LogicFlow({ container, grid: true }) 与 lf.render({ nodes, edges })

如果你拿到的是这种结构，说明 LogicFlow 技能已经参与回答了。

---

七、和官方文档的关系

• 官方文档：https://site.logic-flow.cn/ — 查版本更新、更全的配置与高级用法。
• 本 Skill：提炼了常用场景和 API，方便在 Cursor 里「随问随答」，并且和当前项目里的示例、约定保持一致。

建议：日常开发在 Cursor 里用 skill 快速出代码和思路；遇到版本差异或非常冷门的 API，再到官网核对。

---

八、小结

• LogicFlow Skill = 一套给 Cursor 用的「LogicFlow 使用说明书」，放在 .cursor/skills/logic-flow/。
• 触发方式：提问里带上 LogicFlow、流程图、工作流、BPMN、节点拖拽等关键词。
• 使用方式：正常向 Cursor 提问即可，需要时指明框架（Vue3/React）和具体功能（插件、自定义节点、BPMN 等）。
• 文档分工：SKILL.md 入门与常用能力，reference.md 查 API，examples.md 抄示例。

如果你已经在用 LogicFlow 或打算在 Cursor 里做图编辑相关功能，希望这篇说明能帮你更好地利用这份 skill。

---

文档版本与 skill 一致，随 .cursor/skills/logic-flow/ 更新。