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

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