绘制流程图

【实例简介】使用jquery.jsPlumb实现简单流程图绘制
【实例截图】
【核心代码】

function addNode(parentId, nodeId, nodeLable, position) {
    var panel = d3.select("#" parentId);
    panel.append('div').style('width','auto').style('height','auto')
    .style('position','absolute')
    .style('top',position.y).style('left',position.x)
    .style('border','2px #9DFFCA solid').attr('align','center')
    .attr('id',nodeId).classed('node',true)
    .text(nodeLable);
    return jsPlumb.getSelector('#' nodeId)[0];
    }

function addPorts(instance, node, ports, type) {
  //Assume horizental layout
  var number_of_ports = ports.length;
  var i = 0;
  var height = $(node).height();  //Note, jquery does not include border for height
  var y_offset = 1 / ( number_of_ports 1);
  var y = 0;

  for ( ; i < number_of_ports; i ) {
    var anchor = [0,0,0,0];
    var paintStyle = { radius:5, fillStyle:'#FF8891' };
    var isSource = false, isTarget = false;
    if ( type === 'output' ) {
      anchor[0] = 1;
      paintStyle.fillStyle = '#D4FFD6';
      isSource = true;
    } else {
      isTarget =true;
    }

    anchor[1] = y y_offset;
    y = anchor[1];

    instance.addEndpoint(node, {
      uuid:node.getAttribute("id") "-" ports[i],
      paintStyle: paintStyle,
      anchor:anchor,
      maxConnections:-1,
      isSource:isSource,
      isTarget:isTarget
    });
  }
}

function connectPorts(instance, node1, port1, node2 , port2) {
  // declare some common values:
  var color = "gray";
  var arrowCommon = { foldback:0.8, fillStyle:color, width:5 },
  // use three-arg spec to create two different arrows with the common values:
  overlays = [
    [ "Arrow", { location:0.8 }, arrowCommon ],
    [ "Arrow", { location:0.2, direction:-1 }, arrowCommon ]
  ];

  var uuid_source = node1.getAttribute("id") "-" port1;
  var uuid_target = node2.getAttribute("id") "-" port2;

  instance.connect({uuids:[uuid_source, uuid_target]});
}

function getTreeData() {
  var tree = [
    {
      text: "Nodes",
      nodes: [
        {
          text: "Node1",
        },
        {
          text: "Node2"
        },
        {
          text: "Node3"
        },
        {
            text: "Node4"
        },
        {
            text: "Node5"
        },
        {
            text: "Node6"
        }
      ]
    }
  ];

  return tree;
}

jsPlumb.ready(function() {
    var color = "#E8C870";
    var instance = jsPlumb.getInstance({  
        Connector: ["Flowchart", { curviness: 50 }],//Flowchart折线、Straight直线、Bezier贝塞尔曲线
      DragOptions : { cursor: "pointer", zIndex:2000 },
      PaintStyle : { strokeStyle:color, lineWidth:2 },
      EndpointStyle : { radius:5, fillStyle:color },
      HoverPaintStyle : {strokeStyle:"#7073EB" },
      EndpointHoverStyle : {fillStyle:"#7073EB" },
      Container:"Diagrampanel"
    });

    $('#control-panel').treeview({data: getTreeData()});
   
    $('.list-group-item').attr('draggable','true').on('dragstart', function(ev){
      ev.originalEvent.dataTransfer.setData('text',ev.target.textContent);
    });

    $('#Diagrampanel').on('drop', function(ev){
     
      if (ev.target.className.indexOf('_jsPlumb') >= 0 ) {
        return;
      }

      ev.preventDefault();
      var mx = '' ev.originalEvent.offsetX 'px';
      var my = '' ev.originalEvent.offsetY 'px';

      var uid = new Date().getTime();
      var node = addNode('Diagrampanel','node' uid, 'node', {x:mx,y:my});
      addPorts(instance, node, ['out'],'output');
      addPorts(instance, node, ['in1','in2'],'input');
      instance.draggable($(node));
    }).on('dragover', function(ev){
      ev.preventDefault();
      console.log('on drag over');
    });
 
    instance.doWhileSuspended(function() {

      var arrowCommon = { foldback:0.8, fillStyle:color, width:5 },
      overlays = [
        [ "Arrow", { location:0.8 }, arrowCommon ],
        [ "Arrow", { location:0.2, direction:-1 }, arrowCommon ]
      ];

      var node1 = addNode('Diagrampanel', 'node1', "<img src='sbimage/BDZ.png' />", { x: '80px', y: '20px' });
      node1.style.backgroundImage = "url(sbimage/BDZ.png)";
      node1.style.backgroundRepeat = "no-repeat";
      var node2 = addNode('Diagrampanel', 'node2', "<img src='sbimage/BG.png' />", { x: '280px', y: '20px' });
      node2.style.backgroundImage = "url(sbimage/BG.png)";
      node2.style.backgroundRepeat = "no-repeat";
      var node3 = addNode('Diagrampanel', 'node3',"<img src='sbimage/DL.png' />", { x: '480px', y: '20px' });
      node3.style.backgroundImage = "url(sbimage/DL.png)";
      node3.style.backgroundRepeat = "no-repeat";
      var node4 = addNode('Diagrampanel', 'node4',"<img src='sbimage/SNG.png' />", { x: '80px', y: '220px' });
      node4.style.backgroundImage = "url(sbimage/SNG.png)";
      node4.style.backgroundRepeat = "no-repeat";
      var node5 = addNode('Diagrampanel', 'node5', "<img src='sbimage/TT.png' />", { x: '280px', y: '220px' });
      node5.style.backgroundImage = "url(sbimage/TT.png)";
      node5.style.backgroundRepeat = "no-repeat";

      addPorts(instance, node1, ['out1','out2'],'output');
      addPorts(instance, node2, ['in', 'in1', 'in2'], 'input');
      addPorts(instance, node3, ['out1', 'out2'], 'output');
      addPorts(instance, node3, ['in', 'in1', 'in2'], 'input');
      addPorts(instance, node4, ['out1', 'out2'], 'output');
      addPorts(instance, node4, ['in', 'in1', 'in2'], 'input');
      addPorts(instance, node5, ['out1', 'out2'], 'output');
      addPorts(instance, node5, ['in', 'in1', 'in2'], 'input');

      connectPorts(instance, node1, 'out2', node2, 'in');

      instance.draggable($('.node'));
 
    });

    jsPlumb.fire("jsFlowLoaded", instance);
   
});