如何实现这种树状结构

Question

目前有个类似家谱的树状结构的需求（如下图，样式基本一样）

数据是从后端传过来的，不是定死的。
后端管理页需要对这个树结构进行增删改查，前端APP是调用h5来只展示而已。
是用canvas来实现吗？我目前存疑的问题是，用canvas画时，竖向的如何避免重叠，毕竟横向的距离基本不会变，但纵向的得根据后代的高度自动变化，这样才能避免重叠。
可以用html标签来实现吗？
大家有什么好的想法吗？有类似的插件吗？难道只能原生写了？如果原生写，这个高度问题怎么解决呢？
实在没思路，特地来提问，希望大佬不吝赐教，万分感谢。