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

[walle007]

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

缺点：

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

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

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

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

先谢谢各位~

[learnshare]

用 PPT 画

[walle007]

@learnshare 不好意思忘了说，最后不光光是要图，那个连接关系也要保留的，PPT 画取不到连接关系，

[gearkey]

原型设计？ Axure ？理解有点困难，，

[walle007]

@gearkey 谢谢，不好意思，没表达清楚，想请教的问题其实是两个：
1. 怎样能实现在网页上可以拖动的方框，并获取这个框的坐标
2. 点一下这个方框，可以显示一个可编辑的表格，双击这个方框可以打开新的页面

小白术语不大了解，可能表述不准确，见谅

[learnshare]

@walle007 Adobe XD