logicflow.js实现流程图设计绘制工具效果代码-html代码-BFW代码库

代码语言：html

所属分类：图表

代码描述：logicflow.js实现流程图设计绘制工具效果代码，包括自定义菜单栏、编辑栏、流程图样式、保存Bpmn数据等示例代码。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
   <!--LogicFlow core包css-->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/logicflow-core-index.css">
<!--LogicFlow extension包css-->
<link rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/logicflow/extension/lib/style/index.css"/>
<!--LogicFlow core包js-->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/logic-flow.js"></script>
<!--LogicFlow的插件支持单个引入，这里以菜单插件为例-->
<script src="//repo.bfw.wiki/bfwrepo/js/logicflow/extension/lib/Menu.js"></script>
<script src="//repo.bfw.wiki/bfwrepo/js/logicflow/extension/lib/Control.js"></script>   

<script src="//repo.bfw.wiki/bfwrepo/js/logicflow/extension/lib/DndPanel.js"></script> 
<script src="//repo.bfw.wiki/bfwrepo/js/logicflow/extension/lib/SelectionSelect.js"></script> 
<script src="//repo.bfw.wiki/bfwrepo/js/logicflow/extension/lib/MiniMap.js"></script> 
<script src="//repo.bfw.wiki/bfwrepo/js/logicflow/extension/lib/Snapshot.js"></script> 
<script src="//repo.bfw.wiki/bfwrepo/js/logicflow/extension/lib/BpmnAdapter.js"></script> 
     <style>
      </style>
</head>
<body>
<div id="container"></div>;
 <script type="text/javascript">
 
 // 注册插件

 LogicFlow.use(Menu);
 LogicFlow.use(Control);
 LogicFlow.use(DndPanel);
LogicFlow.use(SelectionSelect);
LogicFlow.use(MiniMap);
LogicFlow.use(Snapshot);

// 数据
const data = {
  // 节点
  nodes: [
    {
      id: '21',
      type: 'rect',
      x: 100,
      y: 200,
      text: '矩形节点',
    },
    {
      id: '50',
      type: 'circle',
      x: 300,
      y: 400,
      text: '圆形节点',
    },
  ],
  // 边
  edges: [
    {
      type: 'polyline',
      sourceNodeId: '50',
      targetNodeId: '21',
    },
  ],
};


// 渲染画布
const lf = new LogicFlow({
  container: document.querySelector('#container'),
  width: 700,
  height: 600,
});
lf.setTheme({
   rect: {
      width: 100,
      height: 50,
      radius: 6,
      fill: '#34415b',
      strokeWidth: 0
     
    },
    circle: {
      r: 40,
      fill: '#34415b',
      strokeWidth: 0
     
    },
    diamond: {
    
      fill: '#34415b',
      strokeWidth: 0
     
    },
    
    nodeText: {
      fontSize: 16,
      color: '#ffffff'
    },
    edgeText: {
      fontSize: 16,
      color: '#34415b'
    },
    anchor: {
      fill: "#6edd97"
    }

})
lf.setPatternItems([
      {
    label: '保存',
    icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAOVJREFUOBGtVMENwzAIjKP++2026ETdpv10iy7WFbqFyyW6GBywLCv5gI+Dw2Bluj1znuSjhb99Gkn6QILDY2imo60p8nsnc9bEo3+QJ+AKHfMdZHnl78wyTnyHZD53Zzx73MRSgYvnqgCUHj6gwdck7Zsp1VOrz0Uz8NbKunzAW+Gu4fYW28bUYutYlzSa7B84Fh7d1kjLwhcSdYAYrdkMQVpsBr5XgDGuXwQfQr0y9zwLda+DUYXLaGKdd2ZTtvbolaO87pdo24hP7ov16N0zArH1ur3iwJpXxm+v7oAJNR4JEP8DoAuSFEkYH7cAAAAASUVORK5CYII=',
    callback: () => {
        LogicFlow.use(BpmnAdapter);

        console.log(lf.getGraphData());
       //lf.getSnapshot()
    }
  },
  {
    label: '选区',
    icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAOVJREFUOBGtVMENwzAIjKP++2026ETdpv10iy7WFbqFyyW6GBywLCv5gI+Dw2Bluj1znuSjhb99Gkn6QILDY2imo60p8nsnc9bEo3+QJ+AKHfMdZHnl78wyTnyHZD53Zzx73MRSgYvnqgCUHj6gwdck7Zsp1VOrz0Uz8NbKunzAW+Gu4fYW28bUYutYlzSa7B84Fh7d1kjLwhcSdYAYrdkMQVpsBr5XgDGuXwQfQr0y9zwLda+DUYXLaGKdd2ZTtvbolaO87pdo24hP7ov16N0zArH1ur3iwJpXxm+v7oAJNR4JEP8DoAuSFEkYH7cAAAAASUVORK5CYII=',
    callback: () => {
      lf.openSelectionSelect();
      lf.once('selection:selected', () => {
        lf.closeSelectionSelect();
      });
    }
  },
  {
    type: 'circle',
    text: '开始',
    label: '开始节点',
    icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAnBJREFUOBGdVL1rU1EcPfdGBddmaZLiEhdx1MHZQXApraCzQ7GKLgoRBxMfcRELuihWKcXFRcEWF8HBf0DdDCKYRZpnl7p0svLe9Zzbd29eQhTbC8nv+9zf130AT63jvooOGS8Vf9Nt5zxba7sXQwODfkWpkbjTQfCGUd9gIp3uuPP8bZ946g56dYQvnBg+b1HB8VIQmMFrazKcKSvFW2dQTxJnJdQ77urmXWOMBCmXM2Rke4S7UAW+/8ywwFoewmBps2tu7mbTdp8VMOkIRAkKfrVawalJTtIliclFbaOBqa0M2xImHeVIfd/nKAfVq/LGnPss5Kh00VEdSzfwnBXPUpmykNss4lUI9C1ga+8PNrBD5YeqRY2Zz8PhjooIbfJXjowvQJBqkmEkVnktWhwu2SM7SMx7Cj0N9IC0oQXRo8xwAGzQms+xrB/nNSUWVveI48ayrFGyC2+E2C+aWrZHXvOuz+CiV6iycWe1Rd1Q6+QUG07nb5SbPrL4426d+9E1axKjY3AoRrlEeSQo2Eu0T6BWAAr6COhTcWjRaYfKG5csnvytvUr/WY4rrPMB53Uo7jZRjXaG6/CFfNMaXEu75nG47X+oepU7PKJvvzGDY1YLSKHJrK7vFUwXKkaxwhCW3u+sDFMVrIju54RYYbFKpALZAo7sB6wcKyyrd+aBMryMT2gPyD6GsQoRFkGHr14TthZni9ck0z+Pnmee460mHXbRAypKNy3nuMdrWgVKj8YVV8E7PSzp1BZ9SJnJAsXdryw/h5ctboUVi4AFiCd+lQaYMw5z3LGTBKjLQOeUF35k89f58Vv/tGh+l+PE/wG0.........完整代码请登录后点击上方下载按钮下载查看