快捷導(dǎo)航

前端使用div+svg畫流程圖的詳細流程記錄

更新時間：2025年09月14日 15:17:41 作者：可愛的小果蛋兒

流程圖的邏輯結(jié)構(gòu)通常由一系列節(jié)點和連線構(gòu)成,每一個節(jié)點代表了流程中的一個步驟或決策點,而連線則表示節(jié)點之間的流轉(zhuǎn)關(guān)系,這篇文章主要介紹了前端使用div+svg畫流程圖的相關(guān)資料,需要的朋友可以參考下

前言

基于div+svg實現(xiàn)的輕量級SOP流程圖組件，專為智能質(zhì)檢、智能外呼、AI陪練等流程化場景設(shè)計。純原生實現(xiàn)，無第三方依賴，提供高度可定制的節(jié)點與連線功能。話不多說，先貼圖。

使用教程

環(huán)境與框架

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>