寻一个javascript的可画ER图的工具

自己会一点java和javascript，想着自己弄个网页，可以用来维护一个或多个ER图。如下图所示

大概的想法是，前端拿到后端提供的表关系之后，画出类似的图来。要求有：
1.用户可以拖动以改变各表格之间的相对位置
2.用户可以新增表之间的关系，比新增一个safety_risk_list表中con_id字段与safety_risk_list_item表格中的con_id字段相关联的关系
3.最好是有源码，我可以安装到自己的服务器上。

我自己看了下canvas，感觉直接写的话，有些麻烦。我自己在Gitee上也找过，关键词可能用的不是太好，找到了下面这个看着很漂亮的，但是这个是收费的。想问下各位有没有可以方便画这样的表格结构，也可以方便连线的组件可以用的哦。当然了，肯定是要可以免费用的哈

JointJS mxGraph draw.io jgraph

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 以下回答来自chatgpt:

  我推荐你使用JointJS这个javascript库。它可以帮助你实现ER图的可视化，并且非常灵活易用。

  1. 拖动表格以改变表格间的相对位置

  JointJS可以通过使用draggable和linkView的自定义函数来实现拖拽功能，并且可以使用Rappid等工具来简化开发。以下是一个简单的实例代码：

  // 创建graph对象
  var graph = new joint.dia.Graph();
  
  // 创建paper对象
  var paper = new joint.dia.Paper({
      el: $('#paper'),
      width: 800,
      height: 600,
      model: graph,
      gridSize: 10,
      drawGrid: true,
      background: {
          color: 'rgba(0, 255, 0, 0.3)'
      }
  });
  
  // 创建一个表格模型
  var table = new joint.shapes.basic.Rect({
      position: { x: 100, y: 100 },
      size: { width: 100, height: 60 },
      attrs: {
          rect: { fill: '#ffffff', 'stroke-width': 2, stroke: 'black' },
          text: { text: 'Table', fill: 'black' }
      }
  });
  
  // 将表格模型添加到graph对象中
  graph.addCell(table);
  
  // 表格模型拖动事件
  table.on('change:position', function(model, position) {
      var links = graph.getConnectedLinks(model);
      _.each(links, function(link) {
          link.get('vertices').splice(1, 1, { x: position.x + 50, y: position.y - 50 });
      });
  });
  

  1. 新增表间的关系

  JointJS可以通过定义link模型来实现表格之间的关系，并且可以通过连线事件来关联不同的表格。以下是一个简单的实例代码：

  // 创建graph对象
  var graph = new joint.dia.Graph();
  
  // 创建paper对象
  var paper = new joint.dia.Paper({
      el: $('#paper'),
      width: 800,
      height: 600,
      model: graph,
      gridSize: 10,
      drawGrid: true,
      background: {
          color: 'rgba(0, 255, 0, 0.3)'
      }
  });
  
  // 创建两个表格模型
  var table1 = new joint.shapes.basic.Rect({
      position: { x: 100, y: 100 },
      size: { width: 100, height: 60 },
      attrs: {
          rect: { fill: '#ffffff', 'stroke-width': 2, stroke: 'black' },
          text: { text: 'Table1', fill: 'black' }
      }
  });
  
  var table2 = new joint.shapes.basic.Rect({
      position: { x: 300, y: 100 },
      size: { width: 100, height: 60 },
      attrs: {
          rect: { fill: '#ffffff', 'stroke-width': 2, stroke: 'black' },
          text: { text: 'Table2', fill: 'black' }
      }
  });
  
  // 将表格模型添加到graph对象中
  graph.addCells([table1, table2]);
  
  // 创建一条链接模型
  var link1 = new joint.dia.Link({
      source: { id: table1.id },
      target: { id: table2.id },
      connector: { name: 'rounded' },
      attrs: {
          '.marker-source': { d: 'M 10 0 L 0 5 L 10 10 z' },
          '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z' }
      }
  });
  
  // 将链接模型添加到graph对象中
  graph.addCell(link1);
  

  你可以根据需要通过改变source和target来指定不同的表格之间的链接。通过定义属性attrs，你可以更改链接的样式以添加/删除箭头或其他元素。

  1. 有源码，并且可以安装到你的服务器上

  JointJS有完整的源码，并且可以通过npm或cdn或手动下载的方式安装。以下是npm的安装方法：

  npm install jointjs
  

  你可以从官网（https://www.jointjs.com）下载完整的文档和示例代码。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^