前端使用div+svg画流程图简直不要太爽了

原创已于 2025-06-23 10:21:40 修改 · 666 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#流程图 #sop #vue3 #自定义节点 #自定义分支

于 2025-06-06 17:16:50 首次发布

基于div+svg实现的轻量级SOP流程图组件，专为智能质检、智能外呼、AI陪练等流程化场景设计。纯原生实现，无第三方依赖，提供高度可定制的节点与连线功能。话不多说，先贴图。

使用教程

环境与框架

Vue3 + TypeScript
Node.js 18.x+（兼容更高版本）

安装

npm install flow-topology-vue3

使用

全局引入

<!-- main.ts -->
import FlowTopologyVue3 from 'flow-topology-vue3'
import 'flow-topology-vue3/dist/flow-topology-vue3.css'
app.use(FlowTopologyVue3)

按需引入

<!-- page.vue -->
<template>
  <div class="contianer">
    <Topology v-model="nodes"></Topology>
    <div class="quick-elements">
      <TemplateWrapper v-for="item in templateNode" :key="item.id" :generator="item">
        <div class="quick-element">{{ item.title }}</div>
      </TemplateWrapper>
    </div>
  </div>
</template>
<script setup>
import { Topology, TemplateWrapper, AnchorWrapper } from 'flow-topology-vue3'
import 'flow-topology-vue3/dist/flow-topology-vue3.css'
const nodes = ref([])
</script>

自动引入

// vite.config.js
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import { FlowTopologyVue3Resolver } from 'flow-topology-vue3/dist/flow-topology-vue3.es.js'

export default defineConfig({
  plugins: [
    Components({
      resolvers: [FlowTopologyVue3Resolver()]
    })
  ]
})


<!-- page.vue -->
<template>
  <div class="contianer">
    <Topology v-model="nodes"></Topology>
    <div class="quick-elements">
      <TemplateWrapper v-for="item in templateNode" :key="item.id" :generator="item">
        <div class="quick-element">{{ item.title }}</div>
      </TemplateWrapper>
    </div>
  </div>
</template>
<script setup>
import 'flow-topology-vue3/dist/flow-topology-vue3.css'
const nodes = ref([])
</script>