有许多优秀的Vue3流程图插件可以帮助创建可视化的工作流、数据流或业务流程。
先总结
| 插件 | 适用场景 | Vue 版本 |
|---|---|---|
| Vue Flow | 低代码、数据流 | Vue 3 |
| Vue-Super-Flow | 业务流程、审批流 | Vue 2 |
| Bpmn-js | BPMN 业务流程 | Vue 2/3 |
| LogicFlow | 低代码、流程建模 | Vue 2/3 |
| JointJS | UML、工程图 | Vue 2/3 |
| Mermaid | Markdown 流程图 | Vue 2/3 |
- Vue 3 原生支持 👉 Vue Flow
- BPMN 业务流程 👉 Bpmn-js
- 低代码/企业级流程 👉 LogicFlow
- Markdown 文档集成 👉 Mermaid
1. Vue Flow（推荐！好用！）✨🎉🎊
🔹 GitHub: github.com/bcakmakoglu…
🔹 Demo: vueflow.dev/
🔹 适用场景: 低代码平台、数据流可视化、流程管理
特点：
- 基于 Vue 3，使用 TypeScript 编写
- 支持拖拽、缩放、连接节点
- 提供 MiniMap、Controls、Background 组件
- 适用于复杂的工作流和数据可视化
安装：
npm install @vue-flow/core
示例代码：
<template>
<VueFlow>
<Background />
<Controls />
<MiniMap />
</VueFlow>
</template>
<script setup>
import { VueFlow, Background, Controls, MiniMap } from '@vue-flow/core';
</script>
2. Vue-Super-Flow
🔹 GitHub: github.com/caohuatao/v…
🔹 Demo: 在线演示
🔹 适用场景: 业务流程管理、审批流、任务流
特点：
- 基于 Vue 2，支持拖拽、连线、缩放
- 可动态配置节点、连线样式
- 适用于企业级流程管理
安装：
npm install vue-super-flow
示例代码：
<template>
<SuperFlow />
</template>
<script>
import SuperFlow from 'vue-super-flow';
export default {
components: { SuperFlow }
};
</script>
3. Bpmn-js（Vue 兼容）
🔹 GitHub: github.com/bpmn-io/bpm…
🔹 Demo: demo.bpmn.io/
🔹 适用场景: BPMN 业务流程建模、企业审批流
特点：
- 支持 BPMN 2.0 标准
- 可用于企业级工作流管理
- 提供拖拽建模、事件监听、导入导出等功能
安装：
npm install bpmn-js
示例代码：
<template>
<div ref="bpmnContainer" style="width: 100%; height: 500px;"></div>
</template>
<script>
import BpmnModeler from 'bpmn-js/lib/Modeler';
export default {
mounted() {
this.bpmnModeler = new BpmnModeler({
container: this.$refs.bpmnContainer
});
}
};
</script>
4. LogicFlow
🔹 GitHub: github.com/didi/LogicF…
🔹 Demo: site.logic-flow.cn/examples
🔹 适用场景: 低代码平台、流程建模、可视化编排
特点：
- 由滴滴开源，支持 Vue 和 React
- 提供丰富的节点和连线样式
- 支持自定义节点、事件监听
安装：
npm install @logicflow/core @logicflow/vue
示例代码：
<template>
<lf-vue ref="lfContainer" :options="options" style="width: 100%; height: 500px;"></lf-vue>
</template>
<script>
import { defineComponent, ref } from 'vue';
import { LogicFlow } from '@logicflow/core';
import LfVue from '@logicflow/vue';
export default defineComponent({
components: { LfVue },
setup() {
const options = ref({
grid: true
});
return { options };
}
});
</script>
5. JointJS（Vue 集成）
🔹 GitHub: github.com/clientIO/jo…
🔹 Demo: www.jointjs.com/demos
🔹 适用场景: 复杂流程建模、工程图、UML 设计
特点：
- 支持 Vue、React、Angular
- 提供丰富的图形库，如 UML、ER 图
- 适用于企业级应用
安装：
npm install jointjs
示例代码：
<template>
<div ref="jointContainer" style="width: 100%; height: 500px;"></div>
</template>
<script>
import { Graph, Paper } from 'jointjs';
export default {
mounted() {
const graph = new Graph();
new Paper({
el: this.$refs.jointContainer,
model: graph,
width: 800,
height: 600,
gridSize: 10
});
}
};
</script>
6. Mermaid（Vue 兼容）
🔹 GitHub: github.com/mermaid-js/…
🔹 Demo: mermaid-js.github.io/mermaid/#/
🔹 适用场景: Markdown 流程图、文档可视化
特点：
- 适用于 Markdown 解析
- 支持流程图、时序图、甘特图
- 轻量级，易于集成
安装：
npm install mermaid
示例代码：
<template>
<div ref="mermaidContainer"></div>
</template>
<script>
import mermaid from 'mermaid';
export default {
mounted() {
mermaid.initialize({ startOnLoad: true });
this.$refs.mermaidContainer.innerHTML = mermaid.render('graphDiv', 'graph TD; A-->B; A-->C; B-->D; C-->D;');
}
};
</script>
