如何动态生成下面的图

[img]http://dl.iteye.com/upload/attachment/245534/0f0bf029-cd0b-373e-bfa6-c95cd0241555.jpg[/img]
如上图，每条不同的竖线代表一个交换机，箭头代表交换机之间发送消息的方向。每次会收到一对交换的信息，比如说(A,B)表示从A发到B，（B，A）表示从B发到A，如此类推，请问如何在页面中实现这样的效果
接受消息是这样的：
function MsgReceive(msg)
{
//在这里根据msg处理
}