js+svg实现类似coze扣子多节点拖拽连线流程图可视化设计代码-html代码-BFW代码库

js+svg实现类似coze扣子多节点拖拽连线流程图可视化设计代码

代码语言：html

所属分类：其他

代码描述：js+svg实现类似coze扣子多节点拖拽连线流程图可视化设计代码

代码标签： js svg 类似 coze 扣子多节点拖拽连线流程图可视化设计代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlowCraft - 流程编辑器</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
:root {
  --bg: #0b0d13;
  --bg2: #111420;
  --bg3: #1a1f30;
  --fg: #e4e7f0;
  --fg2: #7c829e;
  --accent: #00d4aa;
  --accent-g: rgba(0,212,170,.25);
  --border: #232840;
  --card: #151928;
  --danger: #ef4444;
  --c-input: #fbbf24;
  --c-process: #f97316;
  --c-generate: #ec4899;
  --c-output: #10b981;
  --c-condition: #f43f5e;
  --c-transform: #06b6d4;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Space Grotesk',sans-serif;background:var(--bg);color:var(--fg);overflow:hidden;height:100vh;display:flex;flex-direction:column}
#topbar{height:50px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:14px;flex-shrink:0;z-index:100}
#topbar .logo{font-weight:700;font-size:18px;letter-spacing:-.5px;display:flex;align-items:center;gap:8px}
#topbar .logo i{color:var(--accent);font-size:20px}
#topbar .sep{width:1px;height:24px;background:var(--border)}
#topbar .hint{font-size:12px;color:var(--fg2)}
.main-wrap{display:flex;flex:1;overflow:hidden}
#sidebar{width:256px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
.sb-title{padding:16px 18px 8px;font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--fg2);font-weight:600}
.nt-item{padding:11px 14px;margin:3px 10px;border-radius:8px;border:1px solid var(--border);background:var(--card);cursor:grab;display:flex;align-items:center;gap:11px;transition:all .18s;user-select:none;font-size:13px;font-weight:500}
.nt-item:hover{border-color:rgba(255,255,255,.12);transform:translateX(3px)}
.nt-item:active{cursor:grabbing;opacity:.8}
.nt-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor}
.nt-label{flex:1}
.nt-icon{font-size:13px;color:var(--fg2);width:18px;text-align:center}
#canvas-wrap{position:relative;flex:1;overflow:hidden;background:var(--bg)}
#canvas-wrap .grid-layer{position:absolute;inset:0;pointer-events:none;z-index:0}
#canvas{position:absolute;top:0;left:0;width:0;height:0;transform-origin:0 0;z-index:1}
#svg-layer{position:absolute;top:0;left:0;width:1px;height:1px;overflow:visible;z-index:0}
#svg-layer path{pointer-events:stroke;cursor:pointer}
#svg-layer path:hover{filter:brightness(1.6);stroke-width:3!important}
.flow-node{position:absolute;width:264px;background:var(--card);border:1.5px solid var(--border);border-radius:12px;user-select:none;transition:box-shadow .2s,border-color .2s;z-index:2}
.flow-node:hover{border-color:rgba(255,255,255,.13)}
.flow-node.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-g),0 8px 32px rgba.........完整代码请登录后点击上方下载按钮下载查看