vue 流程图组件

### Vue.js 流程图组件与库推荐 对于在 Vue.js 中绘制流程图的需求，有多个优秀的组件和库可供选择。以下是几个值得推荐的选项： #### 1. **Flowchart-Vue** 这是一个专门为 Vue.js 设计的流程图组件[^1]。它提供了直观的设计界面以及灵活的功能支持，能够满足大多数开发者对流程图编辑和显示的要求。 安装方式如下： ```bash npm install flowchart-vue ``` 基本使用方法： ```javascript import { FlowChart } from 'flowchart-vue'; export default { components: { FlowChart, }, }; ``` 此组件不仅支持简单的节点连接操作，还允许自定义节点样式和行为[^1]。 --- #### 2. **mxGraph (Draw.io 的核心库)** 虽然 mxGraph 并不是一个专门针对 Vue.js 的组件，但它是一个功能强大的通用图形库，可以通过封装集成到 Vue.js 项目中。其特点是支持复杂的图表设计、拖拽布局等功能[^4]。 官方文档链接：https://jgraph.github.io/mxgraph/ Vue 封装示例： ```javascript <template> <div id="graph-container"></div> </template> <script> import * as mx from 'mxgraph'; const { mxGraph, mxClient } = mx; export default { mounted() { if (!mxClient.isBrowserSupported()) { alert('浏览器不被支持'); } else { const container = document.getElementById('graph-container'); const graph = new mxGraph(container); const parent = graph.getDefaultParent(); graph.getModel().beginUpdate(); try { const v1 = graph.insertVertex(parent, null, 'Hello', 20, 20, 80, 30); const v2 = graph.insertVertex(parent, null, 'World!', 240, 150, 80, 30); graph.insertEdge(parent, null, '', v1, v2); } finally { graph.getModel().endUpdate(); } } }, }; </script> ``` --- #### 3. **JointJS + Rappid** JointJS 是一个专注于复杂数据可视化的 JavaScript 图形库，而 Rappid 则是基于 JointJS 构建的一套完整的 UI 工具包。两者都可以很好地适配 Vue.js，并提供丰富的 API 支持高级定制化需求[^4]。 GitHub 地址：https://github.com/clientIO/joint 简单集成例子： ```html <div id="paper"></div> ``` ```javascript import joint from 'jointjs'; new Vue({ el: '#app', data() { return {}; }, mounted() { let graph = new joint.dia.Graph(); let paper = new joint.dia.Paper({ el: document.getElementById('paper'), width: 600, height: 200, model: graph, gridSize: 1, }); let rect = new joint.shapes.standard.Rectangle(); rect.position(50, 50).size(100, 40).attr({ body: { fill: 'blue', }, label: { text: 'Hello!', fill: 'white', }, }); graph.addCells([rect]); }, }); ``` --- #### 4. **GoJS** GoJS 是另一个非常流行的商业级图形库，适用于构建动态交互式的流程图应用。尽管它是收费软件，但对于企业级项目来说是非常可靠的选择[^4]。 官方网站：https://gojs.net/latest/index.html Vue 集成实例： ```javascript import go from 'gojs'; export default { mounted() { const $ = go.GraphObject.make; const myDiagram = $(go.Diagram, this.$refs.diagramDiv); myDiagram.nodeTemplate = $(go.Node, 'Auto', $(go.Shape, 'RoundedRectangle', { strokeWidth: 0 }, new go.Binding('fill', 'color')), $(go.TextBlock, new go.Binding('text', 'key')) ); myDiagram.model = new go.GraphLinksModel([ { key: 'Alpha', color: 'lightblue' }, { key: 'Beta', color: 'orange' }, ]); }, }; ``` --- ### 总结 如果需要轻量级解决方案并希望快速上手，则可以选择 `Flowchart-Vue` 或者其他类似的专用插件；而对于更复杂场景下的高度可配置性和扩展能力而言，像 `mxGraph`, `JointJS`, 及 `GoJS` 这样的工具将是更好的长期投资对象[^4]。