小白请教一个前端设计的问题

背景： 工作中经常要画流程图，而且要准确描述功能模块之间的连接关系，目前的做法是用 yaml 描述每一个模块（输入 /输出）以及他们直接的连接关系，以及每个模块的坐标（这个很傻。。。），然后通过 cairo 生成图

缺点：

1. 用 yaml 去描述每个模块比较花时间，而且不直观。 本质就是一张表格，输入 /输出 /连接，但是因为也要描述每个输入 /输出的类型，所以整个 yaml 显的比较臃肿
2. 前面说到了，每个模块的坐标得靠脑补

所以我想能不能通过搞一张网页，直观的把这些问题解决了，但无奈网页设计 0 基础所以向各位大佬请教下面的想法是否可行，如果可行的话用那些工具 /库能比较好的实现。

1. 网页类似于画布，点个按钮新增一个块，但这个块是可以拖动的。
2. 单击这个块能显示一张可以编辑的表格用于描述当前块（希望不是打开新的网页，而是在当前网页直接显示）
3. 双击这个块能打开新的网页，用于描述这个的块的下层模块

这样我希望通过拖动这些块的位置自动获取模块的摆放坐标，另外每个模块的描述可以在表格上些清楚，直接通过后台把流程图给生成出来。

先谢谢各位~