cyf-flow：一款高自定义性的 Vue3 流程编辑器组件

我是海绵宝宝呀
176 阅读3分钟

cyf-flow：一款高自定义性的 Vue3 流程编辑器组件

作者：null
在线演示地址：http://115.190.106.125:8555/#/
GitHub/npm：cyf-flow

🚀 一、项目简介

cyf-flow 是一款基于 Vue3 + TypeScript 的流程编辑器组件，
支持节点拖拽、连线、缩放、右键菜单、插槽扩展等功能。

相比传统的流程图组件（如 vue-flow、logic-flow），
cyf-flow 最大的特点就是“自定义性极高” ——
无论是节点样式、右侧配置面板、操作说明，还是连线样式，你都可以完全掌控。

🧩 二、主要特性

✅ 高度自定义节点

  • 支持插槽（slot）自定义内容；
  • 支持 HTML 渲染节点；
  • 支持自定义颜色、大小、标签。

✅ 完全开放的 API

  • 所有操作（增删改节点、获取连线、拖拽事件）均有回调；
  • 可通过 ref 调用 setNodesConfig()、canvasInit() 等方法；
  • 支持获取画布尺寸与所有节点信息。

✅ 右侧配置面板完全可定制

  • 可自定义显示哪些菜单；
  • 可替换为你自己的 UI 样式；
  • 可实现“选中节点显示节点配置”的效果。

✅ 预览模式

  • 一键切换为只读模式（不允许编辑）；
  • 适合在系统中展示设计后的流程图。

✅ 性能优异

  • 拖拽、缩放、连线流畅；
  • 轻量化依赖，无额外大型库。

💡 三、适用场景

cyf-flow 适合以下类型的项目使用：

  1. 🧱 低代码平台

    • 作为流程编排模块，支持用户拖拽自定义业务节点。
    • 可结合后端逻辑自动生成执行流程。

  2. ⚙️ 设备监控 / 拓扑编辑器

    • 展示设备之间的连接关系；
    • 点击节点显示设备详情。

  3. 🧭 审批流程设计器 / 工作流系统

    • 让管理员拖拽节点生成审批流程；
    • 自定义每个节点的审批逻辑与配置项。

  4. 🧬 算法可视化 / 数据流编排

    • 通过节点表示算法模块；
    • 连线表示数据流向。

🔧 四、快速开始

1️⃣ 安装

npm i cyf-flow

2️⃣ 在 Vue3 中引入

import { createApp } from 'vue'
import App from './App.vue'

import cyfFlow from 'cyf-flow'
import 'cyf-flow/dist/index.css'

const app = createApp(App)
app.use(cyfFlow)
app.mount('#app')

🧱 五、基础用法

<template>
  <CflowEditorLoader
    ref="CflowEditorLoaderRef"
    :isPview="false"
    :isPanning="true"
    :isZoom="true"
    :bg="'#f5f5f5'"
    :isConnectionType="true"
    :nodeTypes="nodeTypes"
    :canvasSize="{ width: 1200, height: 800 }"
    :connections="connections"
    :nodesValue="nodesValue"
    @getConnectionsValue="onGetConnections"
    @getNodesValue="onGetNodes"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const CflowEditorLoaderRef = ref()

const nodeTypes = [
  { type: 'start', label: '开始', width: 60, height: 60, color: 'green' },
  { type: 'slot', label: '自定义节点', width: 80, height: 50, color: '#000', slotName: 'slotName' },
  { type: 'html', label: 'HTML节点', width: 80, height: 50, color: '', target: `<h3>HTML</h3>` }
]

const nodesValue = [
  { id: 'node-1', type: 'start', x: 200, y: 150, width: 60, height: 60, color: 'green' }
]

const connections = []

const onGetConnections = (val) => console.log('连接线数据', val)
const onGetNodes = (val) => console.log('节点数据', val)
</script>

🪄 六、自定义节点插槽示例

<template #slotName="{ node }">
  <div class="custom-node">
    <img src="/img/custom-icon.png" width="24" />
    <span>{{ node.label }}</span>
  </div>
</template>

<style scoped>
.custom-node {
  display: flex;
  align-items: center;
  background: #fffbe6;
  border: 1px solid #d4b106;
  border-radius: 6px;
  padding: 6px 10px;
}
</style>

⚙️ 七、自定义右侧配置面板

<template>
  <CflowEditorLoader
    v-model:isShowConfig="true"
    :isRightConfig="true"
    @editNode="onEditNode"
  />
  <div v-if="activeNode" class="right-panel">
    <h3>节点配置</h3>
    <input v-model="activeNode.label" placeholder="修改节点名称" />
  </div>
</template>

通过 isRightConfig 控制是否显示右侧面板，
当用户选中节点时触发 editNode 事件，你可以加载自定义配置界面。

🧭 八、可调用的 API

方法说明
startDrag(event, node)将节点放置在画布上
setNodesConfig(id, key, value)设置节点属性
getNodesConfig(id)根据节点 ID 获取配置
canvasInit()初始化画布

🌈 九、效果预览

在线体验地址：http://115.190.106.125:8555/#/

📦 十、总结

cyf-flow 不只是一个流程编辑器，更是一套 高自由度的节点可视化框架。

它让前端开发者能在 Vue3 中轻松构建：

  • 自定义节点样式；
  • 自定义右侧配置；
  • 灵活拖拽与连线；
  • 低代码可视化系统。

无论是搭建工作流、算法编排，还是构建企业可视化平台，
cyf-flow 都能成为你的强力基础组件。

❤️ 十一、后续计划

  • 支持节点分组；
  • 支持多层画布缩放；
  • 提供更多可插拔的 UI 插件；
  • 发布配套文档网站。

📣 结尾

如果你觉得这个项目不错，
欢迎在 掘金点赞收藏 或 npm star 支持 🌟
也可以访问在线 Demo 👉 http://115.190.106.125:8555/#/

avatar
文章
阅读
粉丝