如何實現(xiàn)這種樹狀結(jié)構(gòu)

目前有個類似家譜的樹狀結(jié)構(gòu)的需求（如下圖，樣式基本一樣）

數(shù)據(jù)是從后端傳過來的，不是定死的。
后端管理頁需要對這個樹結(jié)構(gòu)進(jìn)行增刪改查，前端APP是調(diào)用h5來只展示而已。
是用canvas來實現(xiàn)嗎？我目前存疑的問題是，用canvas畫時，豎向的如何避免重疊，畢竟橫向的距離基本不會變，但縱向的得根據(jù)后代的高度自動變化，這樣才能避免重疊。
可以用html標(biāo)簽來實現(xiàn)嗎？
大家有什么好的想法嗎？有類似的插件嗎？難道只能原生寫了？如果原生寫，這個高度問題怎么解決呢？
實在沒思路，特地來提問，希望大佬不吝賜教，萬分感謝。