How to draw a mindmap

Question

I'm working on an algorithm for drawing a mindmap. The main point there is to intelligently arrange the nodes, so that there are no overlaps and it looks nicely distributed. As an example see this screenshot (from MindNode):

Any ideas on how to arrange this structure nicely, given the space that each node occupies? Do you know of any codes that I could look into (something a bit simpler that graphviz)?

Before it comes up, I am not looking for "physical simulation" algorithms such as this, or finished programs like dot. In the end I want to implement it in JS, but for understanding the algorithm any language is fine.

Answer 1

I guess you could do this with CSS only. Give the right classes with JS to your nodes, and CSS will take care of arranging them as necessary.

For example, you can set margin: 1em 0 1em 0 on each node so that it has enough space, etc etc.