工作需要使用mxGraph。依著葫蘆畫瓢慢慢學(xué)，不足之處還望大家指點(diǎn)。

function main(container) {
    if (!mxClient.isBrowserSupported()) {
        mxUtils.error('Browser is not supported!', 200, false);
    } else {
        var graph = new mxGraph(container);//創(chuàng)建視圖
        graph.setHtmlLabels(true);
        graph.setTolerance(20);
        graph.setEnabled(false); // 禁用選擇和單元格處理

        var style = graph.getStylesheet().getDefaultVertexStyle();
        // style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_BOTTOM;//文字對齊方式
        // style[mxConstants.STYLE_FILLCOLOR] = 'rgb(251, 148, 79)'; //填充色 
        style[mxConstants.STYLE_FONTSIZE] = 14; //文字大小
        style[mxConstants.STYLE_FONTCOLOR] = "#fff"; //文字顏色
        style[mxConstants.STYLE_WHITE_SPACE] = 'wrap'; //自動換行
        delete style[mxConstants.STYLE_STROKECOLOR]; //去掉邊框
        //鼠標(biāo)拖動
        graph.setAutoSizeCells(true);
        graph.setPanning(true);
        graph.panningHandler.useLeftButtonForPanning = true;

        graph.setCellsResizable(false); // 禁止改變元素大小
        mxEvent.disableContextMenu(container); // 禁用瀏覽器默認(rèn)的右鍵菜單欄

        // 縮放
        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');
            console.log(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); //連接兩個模塊
        } finally {
            graph.getModel().endUpdate();
        }
    }
}

20170113201156.png