我之前也踩过这个坑！你现在的问题核心是把mxGraph中的边（Edge）当成顶点（Vertex）来创建了——这两种是完全不同的Cell类型，不能复用创建顶点的addVertex函数来生成边的工具栏项。

问题根源分析 #

你代码里写的addVertex('images/rounded.gif', 100, 40, 'shape=link');，本质还是在创建一个标记为vertex=true的单元格，哪怕你设置了shape=link，它依然是个顶点，不是可以连接两个节点的边。mxGraph中，边必须显式设置setEdge(true)，并且工具栏添加边的逻辑和顶点也不一样。

修正方案：单独编写添加边的工具栏函数 #

我们需要写一个专门用于添加边的工具函数，替代原来用addVertex处理边的逻辑：

// 原有的addVertex函数保持不变
var addVertex = function(icon, w, h, style) { 
    var vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style); 
    vertex.setVertex(true); 
    var img = addToolbarItem(graph, toolbar, vertex, icon); 
    img.enabled = true; 
    graph.getSelectionModel().addListener(mxEvent.CHANGE, function() { 
        var tmp = graph.isSelectionEmpty(); 
        mxUtils.setOpacity(img, (tmp) ? 100 : 20); 
        img.enabled = tmp; 
    }); 
}; 

// 新增：专门用于添加边的工具栏函数
var addEdge = function(icon, style) {
    // 创建边Cell，设置setEdge(true)而不是setVertex
    var edge = new mxCell(null, new mxGeometry(), style);
    edge.setEdge(true);
    
    // 添加到工具栏
    var img = addToolbarItem(graph, toolbar, edge, icon);
    img.enabled = true;
    
    // 边的工具栏项需要监听选择变化：当选中至少一个顶点时才启用
    graph.getSelectionModel().addListener(mxEvent.CHANGE, function() {
        // 边需要至少选中一个顶点才能启用（或者两个，根据需求调整）
        var tmp = graph.getSelectionCount() >= 1;
        mxUtils.setOpacity(img, tmp ? 100 : 20);
        img.enabled = tmp;
    });
};

// 调用原有函数添加顶点
addVertex('images/rectangle.gif', 100, 40, '');
addVertex('images/ellipse.gif', 40, 40, 'shape=ellipse');
addVertex('images/rhombus.gif', 40, 40, 'shape=rhombus');
addVertex('images/triangle.gif', 40, 40, 'shape=triangle');
addVertex('images/cylinder.gif', 40, 40, 'shape=cylinder');
addVertex('images/actor.gif', 30, 55, 'shape=umlActor');

// 调用新增的addEdge函数添加边工具
// 这里可以设置边的样式，比如edgeStyle=elbowEdgeStyle（默认直角边）或者其他样式
addEdge('images/rounded.gif', 'edgeStyle=elbowEdgeStyle;html=1');

关键注意点 #

1. Cell类型区分：顶点必须setVertex(true)，边必须setEdge(true)，这是mxGraph最核心的区分逻辑，不能混着来。
2. 边的工具栏启用逻辑：边的工具通常需要在选中至少一个顶点时才启用（这样用户可以从选中顶点拖出边），所以监听选择变化时要判断选中数量，而不是像顶点那样判断是否为空。
3. 边的样式设置：边的样式参数和顶点不同，比如用edgeStyle指定边的连接样式（直角、曲线等），而不是shape（shape是针对顶点的）。

这样修改后，你就能在工具栏中正常添加边工具，点击后可以在画布上的顶点之间创建连接了。

内容的提问来源于stack exchange，提问作者Tailson Andrade