Vue3 使用 vue-flow/core 插件创建可定制流程图

要实现流程图样式，可以使用 "vue-flow/core" 插件。该插件提供了一套流程图组件，可以轻松创建和定制流程图。\n\n首先，安装 "vue-flow/core" 插件：\n\n\nnpm install vue-flow/core\n\n\n然后，在 Vue 组件中引入 "vue-flow/core" 插件，并创建流程图组件：\n\nvue\n<template>\n <div>\n <vue-flow :elements=\"elements\" :editable=\"false\" style=\"height: 500px;\" />\n </div>\n</template>\n\n<script>\nimport VueFlow from \'vue-flow/core\';\n\nexport default {\n components: {\n VueFlow\n },\n data() {\n return {\n elements: [\n { id: \'node1\', type: \'input\', data: { label: \'Node 1\' }, position: { x: 250, y: 5 } },\n { id: \'node2\', data: { label: \'Node 2\' }, position: { x: 100, y: 100 } },\n { id: \'node3\', data: { label: \'Node 3\' }, position: { x: 400, y: 100 } },\n { id: \'node4\', type: \'output\', data: { label: \'Node 4\' }, position: { x: 250, y: 200 } },\n { id: \'edge1\', source: \'node1\', target: \'node2\', animated: true },\n { id: \'edge2\', source: \'node2\', target: \'node3\' },\n { id: \'edge3\', source: \'node3\', target: \'node4\' },\n ]\n };\n }\n}\n</script>\n\n<style>\n/* 自定义流程图样式 */\n.vfc-Node {\n background-color: #f0f0f0;\n border-radius: 5px;\n padding: 10px;\n}\n.vfc-Edge {\n stroke: #000;\n stroke-width: 2px;\n}\n</style>\n\n\n在上面的代码中，我们创建了一个简单的流程图，包含了 4 个节点和 3 个边。我们还通过自定义样式类 `.vfc-Node` 和 `.vfc-Edge` 来定义节点和边的样式。\n\n通过以上代码，你就可以实现一个带有自定义样式的流程图了。你可以根据需要进一步定制样式，例如修改背景颜色、边的颜色和宽度等。\n\n参考文档：https://vue-flow.io/