Javascript 在网页中显示（语法）树

我希望能够在网页上显示动态语法树，可能使用jQuery组件。让你明白我的意思，这个

是一个语法树，这是我希望它显示的一般方式

---

如何使用HTML和CSS构建类似的内容？

编辑：解决方案 为了防止后来发现这个问题的人也在尝试同样的问题，我做了以下几点：

最后，我用Graphviz作为SVG绘制了这棵树，然后用一些魔法将SVG树移动到DOM中。这样，我仍然可以与元素交互，例如拖放或悬停/单击事件

---

结果可以看到。

试试看，它有一个非常好的

另一个选择是，你可以找到一个介绍，问题是什么？我如何用HTML和CSS构建这样的东西？我不确定，它本身似乎做得太多了。我的场景的一个要求是根节点始终位于顶部，子节点位于下一层，以此类推。。但我会调查的。谢谢你的反馈。