如何绘制思维导图

【问题标题】：How to draw a mindmap如何绘制思维导图
【发布时间】：2025-12-10 23:20:05
【问题描述】：

我正在研究绘制思维导图的算法。要点是智能地排列节点，这样就没有重叠，看起来分布很好。作为一个例子看这个截图（来自MindNode）：

考虑到每个节点占用的空间，关于如何很好地安排这个结构的任何想法？你知道我可以研究的任何代码（比graphviz更简单的东西）吗？

在它出现之前，我不是在寻找像this这样的“物理模拟”算法，或者像dot这样的完成程序。最后我想用 JS 实现它，但是为了理解算法，任何语言都可以。

【问题讨论】：

【解决方案1】：

我猜你只能用 CSS 来做到这一点。使用 JS 为您的节点提供正确的类，CSS 会根据需要安排它们。

例如，可以在每个节点上设置margin: 1em 0 1em 0，使其有足够的空间等。

【讨论】：

现在 CSS 是否足够聪明，可以像图中那样绘制合适的样条线？
你可以用border-radius来玩这个，是的。但我猜使用canvas 会更好。需要注意的是，CSS 不会为您带来任何魔力，您必须在每次添加节点时进行计算。
嗯。非圆形边框半径在我的浏览器（Firefox）中非常丑陋，即使忽略这一点，我认为您不能仅使用椭圆来生成上面的曲线。但也许曲线并不是提问者真正关心的：只提到了定位。
嗯，我没想过只使用 CSS。我会尝试一下，但我非常怀疑它是否可行。
另外，样条线不是问题，使用画布很容易。