mxGraph

mxGraph定义：mxGraph是一个js绘图组件，适用在网页设计/编辑流程图、图表、网络图和普通图形的web应用程序。
mxGraph支持：mxGraph支持拖动和克隆细胞，重新调整和改造，连接和断开，拖动和下降，从外部来源，编辑细胞中的标签和更多。

mxGraph.insertVertex（parent，id，value，x，y，width，height，style ）
parent——作为组结构中新单元的直接父级的单元
id——这是描述单元格的全局唯一标识符，它始终是一个字符串。这主要用于在外部引用持久输出中的单元格。如果您不希望自己维护id，请将null传递给此参数并确保mxGraphModel.isCreateIds（）返回true。这样，模型将管理ID并确保它们是唯一的。
value——这是单元格的用户对象。它将在顶点或边缘上显示为标签。（传值之后，该值会出现在所连的线上）
x——该元素左上角到浏览器的横向距离
y——该元素左上角到浏览器的纵向距离
width——该元素的宽
height——该元素的高

v1指代第一元素，v2指代第二个元素
从第一个连线指向第二，直接是默认：graph.insertEdge(parent, null, '', v1, v2);
从第二连线指向第一个：
graph.insertEdge(parent, null, '', v2, v1, 'edgeStyle=orthogonalEdgeStyle;');

注：

1.获取方法

• //始终从选择的mxcells返回数组的第一个细胞
  graph.getSelectionCell()
• //获取所有被选择的元素
  graph.getSelectionCells()
• //返回所选择所有cells的所有信息
  graph.getSelectionModel()

2.设置方法

//设置选中节点cell
graph.setSelectionCell(v1);

API

http://jgraph.github.io/mxgraph/docs/js-api/files/index-txt.html

demo

http://jgraph.github.io/mxgraph/javascript/index.html