基礎(chǔ)效果圖

代碼解析

var graph = new mxGraph(container); //創(chuàng)建視圖
graph.setHtmlLabels(true); // Label 將顯示 Html 格式的 Value
graph.setTolerance(20);
graph.setEnabled(true); //設(shè)置啟用,就是允不允許你改變CELL的形狀內(nèi)容捷雕。
graph.setVertexLabelsMovable(true); // 允許移動(dòng) Vertex 的 Label

graph.setConnectable(true); // 是否允許Cells通過(guò)其中部的連接點(diǎn)新建連接,false則通過(guò)連接線連接    
graph.setDropEnabled(true); // 從工具欄拖動(dòng)到目標(biāo)細(xì)胞時(shí)細(xì)胞邊界是否產(chǎn)生光圈    
graph.setTooltips(true); // 是否顯示提示,默認(rèn)顯示Cell的名稱 
graph.setResizeContainer(true); // 容器大小自適應(yīng)
graph.setMultigraph(false); // 重復(fù)連接
graph.setAllowLoops(true); // 允許連線的目標(biāo)和源是同一元素

new mxRubberband(graph); // 左鍵框選(編輯狀態(tài)下生效)

var style = graph.getStylesheet().getDefaultVertexStyle();
// style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_BOTTOM;//文字對(duì)齊方式
// style[mxConstants.STYLE_FILLCOLOR] = 'rgb(251, 148, 79)'; //填充色
style[mxConstants.STYLE_FONTSIZE] = 14; //文字大小
style[mxConstants.STYLE_FONTCOLOR] = "#fff"; //文字顏色
style[mxConstants.STYLE_WHITE_SPACE] = "wrap"; //自動(dòng)換行
delete style[mxConstants.STYLE_STROKECOLOR]; //去掉邊框
graph.getView().updateStyle = true; // 動(dòng)態(tài)改變樣式

graph.setAutoSizeCells(true); // 鼠標(biāo)拖動(dòng)
graph.setPanning(true); // 移動(dòng)鏡頭(移動(dòng)容器坐標(biāo)軸)
graph.panningHandler.useLeftButtonForPanning = true; // 設(shè)置左鍵可移動(dòng)容器坐標(biāo)軸

graph.setCellsResizable(false); // 禁止改變?cè)卮笮?mxEvent.disableContextMenu(container); // 禁用瀏覽器默認(rèn)的右鍵菜單欄
graph.connectionHandler.setCreateTarget(true); // 是否創(chuàng)建目標(biāo)
mxGraphHandler.prototype.setMoveEnabled(false);//是否可以移動(dòng)  
mxGraphHandler.prototype.guidesEnabled = true;//顯示細(xì)胞位置標(biāo)尺  /*禁用節(jié)點(diǎn)雙擊必逆，防止改變數(shù)據(jù) */  
graph.dblClick = function (evt, cell) {           var model = graph.getModel();           if (model.isVertex(cell)) {                   return false;           }  };  //重寫(xiě)方法不允許那條線(edge)可以編輯    
graph.isCellEditable = function(cell)  {    return !this.getModel().isEdge(cell)&&!this.getModel().isVertex(cell);    };  

// 滾輪縮放
mxEvent.addMouseWheelListener(function(evt, up) {
    if (up) {
        graph.zoomIn();
    } else {
        graph.zoomOut();
    }
    mxEvent.consume(evt);
});

style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.TopToBottom;
style[mxConstants.STYLE_STROKECOLOR] = "rgb(115, 121, 133)"; //連接線顏色
delete graph.getStylesheet().getDefaultEdgeStyle()["endArrow"]; //去掉箭頭

graph.addListener(mxEvent.DOUBLE_CLICK, function(sender, evt) {
    var cell = evt.getProperty("cell");
}); //雙擊事件

var parent = graph.getDefaultParent();
graph.getModel().beginUpdate();
try {
    var v1 = graph.insertVertex(parent, null, "Hello,", 20, 20, 80, 30); //生成模塊
    var v2 = graph.insertVertex(parent,null,"World!",200,150,80,30); //生成模塊
    graph.insertEdge(parent, null, " ", v2, v1); //連接兩個(gè)模塊
} finally {
    graph.getModel().endUpdate();
}