html 绘制 拓扑图,如何绘制网页版拓扑图

最近为了实现一个网页版的拓扑图, 采用了qunee.js这个js库. 觉得挺不错 . 记一下自己的使用心得.

qunee是一个js库，封装了html5的canvas的许多方法，在上面也做了自己的很多开发， 可以实现许多效果。

下面列举和运维相关的一些应用：

除此之外， qunee还能用来绘制流程图， 思维导图， 地铁图， 中国地图等等，

其它应用的demo请移步qunne的官网

http://demo.qunee.com/。

我这边的项目要实现的是一个网络逻辑拓扑， 要绘制出各个IDC核心设备上的VRF和防火墙的逻辑连接关系。 之所以要实现逻辑路由是为了能够在交换机的vrf创建网关后， 可以实现自动在与其直连的防火墙上添加路由。 所以第一步就需要展示交换机的vrf和防火墙的关系。

qunee官网上建议的开发流程是： 1. 采集数据  2. 转换数据  3. 数据呈现  4. 交互和操作

我也基本上是参照这个开发流程来做的。

【数据采集】

1。 从核心交换机上抓取所有vrf的接口信息  show ip interface vrf

2.   抓取防火墙上的接口信息(可以通过设备厂商提供的api或者通过设备配置得到)

3.   遍历从交换机和防火墙上获取的接口信息，如果两个接口在同一vlan下，且ip属于同一网段， 则认为两个接口在逻辑上是连接的

【数据转换】

这个取决于你要绘制出什么样的图形。 不过你可以先生成一个图， 后面在进行修正。不需要一步到位，可以根据最后图形展现的效果做多次迭代修改。

数据格式可以转换成下面的形式：

{