topology是一款开源免费的绘图前端工具。
运用它我们可以绘制各种流程图、活动图、时序图和类图。

• 项目仓库 https://github.com/le5le-com/topology
• 在线演示 http://topology.le5le.com/workspace

但是在使用他的父子组件时，遇到一个蛋疼的问题，当连接父子组件的左右锚点时，总是会连接到子组件的锚点。

虽然看图看不出问题，但是当我们需要在后端处理节点时，就很麻烦。

所以最好的办法就是屏蔽子节点的锚点。

以下是源码中类图中的简单类

{
        name: '简单类',
        icon: 'icon-simple-class',
        data: {
          text: 'Topolgoy',
          rect: {
            width: 270,
            height: 200
          },
          paddingTop: 40,
          font: {
            fontFamily: 'Arial',
            color: '#222',
            fontWeight: 'bold'
          },
          fillStyle: '#ffffba',
          strokeStyle: '#7e1212',
          name: 'simpleClass',
          children: [
            {
              text: '- name: string\n+ setName(name: string): void',
              name: 'text',
              paddingLeft: 10,
              paddingRight: 10,
              paddingTop: 10,
              paddingBottom: 10,
              rectInParent: {
                x: 0,
                y: 0,
                width: '100%',
                height: '100%',
                rotate: 0
              },
              font: {
                fontFamily: 'Arial',
                color: '#222',
                textAlign: 'left',
                textBaseline: 'top'
              }
            }
          ]
        }
      }

我们只要修改children的节点属性。添加以下属性

 hideAnchor: true,
 rectInParent: {
	x: 0,
	y: 0,
	width: '96%',
	height: '96%',
	marginTop:'2%',
	marginLeft:'2%',
	marginBottom:'2%',
	marginRight:'2%',
	rotate: 0
 },

说明：hideAnchor是隐藏锚点，但是topology即使隐藏了子节点锚点，连线到锚点位置还是会自动连上子节点的。所以需要将子节点相对父节点的位置缩小下。让鼠标移到节点的边缘上的时候不至于触发子节点事件。