mxgraph是一款通过js来画图的工具库。
    draw.io就是通过mxgraph来实现的,官网也提供了一些复杂的例子

    graph中我们需要关心的只有点和边,以及点和边是如何连接的

    数据的存储

    可编辑界面

    1. <div id="containter"></div>
    2. let doc = mxUtils.parseXML(xmlString) // 可以将xml字符串解析为xml
    3. let node = doc.documentElement
    4. let editor = new mxEditor()
    5. editor.readGraphModel(node)

    创建一个元素

    mxConstraintHandler

    1. 当鼠标划过图形时,负责展示连接点
    2. 约束一个连接的创建, 只能通过连接点创建连线

    修改固定连接点的样式

    1. mxConstraintHandler.prototype.pointImage = new mxImage(src, width, height)

    修改mouseover到连接点的样式
    创建连接线的样式

    展示界面