前端使用div+svg画流程图的详细流程记录

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>