请教大家几个画流程图的js库。

最近需要用纯js做一些流程图，想问问有没有好点的js库?
以前我自己做过一个静态的流程图 ，但是画箭头和画斜线时会非常恶心 每个点画一个div
一般这种功能用js实现好不好？除了js库一般用什么来实现在页面上画出流程图？？？

解决方案 »

  1.   

    JS画流程图，有点难度，期待高手出现！另外给你介绍一个画流程图的flash插件:SpringGraph,研究下就懂了
      

  2.   

    我们原来做的是用FLEX 做了个jbpm  当设计完成后自动生成流程图 
      

  3.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>工作流定义</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script language="javascript"> 
    <!--
    String.prototype.trim = function()
    {
        return this.replace(/(^\s*)|(\s*$)/g, "");
    }
     
    String.prototype.toXml = function()
    {
        var xml = this.replace(/&/g, "&amp;");
        xml = xml.replace(/>/g, "&gt;");
        xml = xml.replace(/</g, "&lt;");    
        xml = xml.replace(/"/g, "&#34;");
            
        return xml;
    }
     
    document.onkeypress = function()
    {
        if(event.keyCode==13 && window.event.srcElement.tagName != "TEXTAREA")
        {
            event.keyCode=0;
            event.cancelBubble = true
            event.returnValue = false;
            return false;
        }
    }
      
    function document::onkeyDown()
    {
        var obj = window.event.srcElement
        
        if(event.keyCode != 8) return true;
        if(obj.tagName == "INPUT" || obj.tagName == "TEXTAREA")
        {
            if(obj.readOnly)
            {
                return false;
            }
            else
            {
                return true;
            }
        }
       
        return false;
    }
     
    function showPermitWindow(value)
    {
        return window.showModalDialog("/sysplat/selector/groupselector1.jsp", value, "dialogWidth:560px;dialogHeight:520px;help: no;scroll:no; status:no")
    }
     
    function selectRoleId()
    {
        var txt = window.event.srcElement;        
        var strArr = null;
        var strCompositeValue
        var _value = showPermitWindow(txt.value);
        var hids = "";
        var pos = -1;
     
        if(_value != null)
        {
            var arr = _value.split("\r\n");
            for(var i=0; i<arr.length; i++)
            {
                pos = arr[i].indexOf("/");
                if(hids != "") hids = hids + ",";
                hids = hids + arr[i].substring(pos+1);
            }
            txt.value = hids;
            document.getElementById("btnApply").disabled = 0;
        }
    }
     
    function Group()
    {
        this.id=null;
        this.name=null;
        this.count=0;
        this.taskCount = 0;
        this.nodes=[];
        this.lines=[];
        this.selectedObj=[];
        this.selectedLineFrom=[];
        this.selectedLineTo=[];
        this.mouseX= -1;
        this.mouseY= -1;
        this.mouseEndX= -1;
        this.mouseEndY= -1;
        this.action=null;
        this.lineFlag=null;
        this.multiSelect=false;
        this.ctrlKey=false;
        this.nodeMirror=null;
        this.lineMirror=null;
        this.bottomHeight=10;
        this.rightWidth=10;
        this.nodeType = {"start":"开始节点","end":"结束节点","node":"普通节点","task":"任务节点","cal":"条件节点"};
        this.init=function()
        {
            var obj=document.getElementById('group');
            obj.setAttribute('bindClass',this);
            obj.onmousedown=GroupEvent.mouseDown;
            obj.onmousemove=GroupEvent.mouseMove;
            obj.onmouseup=GroupEvent.mouseUp;
            obj.onkeydown=GroupEvent.keyDown;
            obj.onkeyup=GroupEvent.keyUp;
            obj.ondblclick=function(){var win=document.getElementById('propWin');win.style.display="";var x=event.x;var y=event.y;win.style.left=x;win.style.top=y-10}
            this.lineMirror=new Line();
            this.lineMirror.textFlag=false;
            this.lineMirror.mirrorFlag=true;
            this.lineMirror.init();
            this.lineMirror.setDisplay('none');
            this.lineMirror.strokeObj.dashStyle='dashdot';
            this.lineMirror.obj.strokecolor='#000000';
            this.nodeMirror=new Node();
            this.nodeMirror.strokeFlag=true;
            this.nodeMirror.shadowFlag=false;
            this.nodeMirror.textFlag=false;
            this.nodeMirror.mirrorFlag=true;
            this.nodeMirror.init();
            this.nodeMirror.setDisplay('none');
            this.nodeMirror.obj.strokecolor='black';
            this.nodeMirror.obj.style.zIndex='100';
            this.nodeMirror.obj.filled=false;
            this.nodeMirror.strokeObj.dashstyle='dot';
        };
        this.isExistStartNode=function()
        {
            var l = this.nodes.length;
            for(var i=0;i<l;i++)
            {
                if(this.nodes[i].type=='start') return true;
            }
            return false;
        }
        this.getObjectNum=function()
        {
            this.count++;
            return this.count;
        };
        this.point=function(flag)
        {
            if(flag=='down')
            {
                this.mouseX=GroupEvent.getMouseX();
                this.mouseY=GroupEvent.getMouseY();
            }
            else if(flag=='up')
            {
                this.mouseEndX=GroupEvent.getMouseX();
                this.mouseEndY=GroupEvent.getMouseY();
            }
        };
        this.getEventNode=function(flag)
        {
            var res=null;
            var nodeNum=this.nodes.length;
            var node=null;
            var x;
            var y;
            if(flag=='down')
            {
                x=this.mouseX;
                y=this.mouseY;
            }
            else if(flag=='up')
            {
                x=this.mouseEndX;
                y=this.mouseEndY;
            }
            for(var i=(nodeNum-1);i>=0;i--)
            {
                node=this.nodes[i];
                if(node.pointInObj(x,y))
                {
                    res=node;break;
                }
            }
            return res;
        };
        this.getEventLine=function()
        {
            var res=null;
            var lineNum=this.lines.length;
            var line=null;
            var x=this.mouseX;
            var y=this.mouseY;
            var isStroke= -1;
            for(var i=(lineNum-1);i>=0;i--)
            {
                line=this.lines[i];
                if(line.pointInObj(x,y))
                {
                    if(res==null||line.obj.style.zIndex=='22')
                    {
                        res=null;
                        res=GroupEvent.insertObjInArr(res,line);
                        isStroke=line.pointInStroke(x,y);
                        if(isStroke==0)
                        {
                            this.selectedLineTo=[];
                            this.selectedLineFrom=[];
                            this.selectedLineTo=GroupEvent.insertObjInArr(this.selectedLineTo,line);
                        }
                        else if(isStroke==1)
                        {
                            this.selectedLineTo=[];
                            this.selectedLineFrom=[];
                            this.selectedLineFrom=GroupEvent.insertObjInArr(this.selectedLineFrom,line);
                        }
                    }
                }
            }
            return res;
        };
      

  4.   

    vml
    楼主可以研究一下这个东西
      

  5.   

    好吧 感谢各种答案 我自己也找了几个 希望能和大家分享一下。
    raphaeljs
    mxgraph
    excanvas
    springgraph用flex和svg做都不错。