在数据库的两个表格中，用户可以通过点击来连接项目。这种连接工具提供了一个直观的图形表示，帮助用户理解他们之间的联系。用户可以通过再次点击已连接的项目来移除连接。这种连接方式是由Doga Arinir在其文章《在Mozilla基础浏览器和Internet Explorer中绘制线条》中描述的线条绘制方法的扩展。
所有功能都在一个HTML文件中实现（除了服务器端的保存功能，未包含在内）。当用户点击任一表格中的项目时，该项目就会被准备好进行连接。如果用户接着点击另一个表格中的未连接项目，则会建立连接，并绘制一条线来显示这种连接。这些连接是通过以下两个函数实现的：
function setSource(oSrc) {
if (oSource != null) {
if (oSource.className == "treeItem_hi") {
oSource.className = "treeItem";
}
oSource = null;
}
if (oSrc.className == "treeItem_set") {
clearElementSetting(oSrc.id);
}
oSrc.className = "treeItem_hi";
oSource = oSrc;
if (oTarget != null) {
drawLine();
oSource = null;
oTarget = null;
}
}
function setTarget(oTar) {
if (oTarget != null) {
if (oTarget.className == "treeItem_hi") {
oTarget.className = "treeItem";
}
oTarget = null;
}
if (oTar.className == "treeItem_set") {
clearElementSetting(oTar.id);
}
oTar.className = "treeItem_hi";
oTarget = oTar;
if (oSource != null) {
drawLine();
oSource = null;
oTarget = null;
}
}
当项目被点击时，它会清除其表格中之前点击过（但未连接）的项目。然后，如果另一个表格中已经点击了项目，它们就会连接起来。按照设计，如果一个项目已经连接，新的连接会覆盖旧的连接。
在HTML中，源项目和目标项目的onClick事件处理器分别调用这些函数：
<span id="Item0_0" class="treeItem" onclick="setSource(this)">源项目一</span>
<span id="Item1_0" class="treeItem" onclick="setTarget(this)">目标项目1</span>
这个项目唯一“棘手”的部分是当源或目标项目再次被点击时，连接线如何消失。由于这种模型是1对1的数据关系，不允许单个项目有多个连接。（可以通过在“打包”程序上做一些额外的工作来允许多个连接）。为了实现这一点，为每个“线段”DIV添加了两个自定义属性：mySrc和myTar。当页面上的元素被点击时，代码会检查它是否已经连接（通过检查其当前样式定义）。如果是，包含所有线条的“画布”会被搜索，找到连接该项目的线，然后从文档中移除该线。