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.

Reduplicative

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.

Thrift

Is CSS smart enough now to draw suitable splines as in the diagram? – Wifely

You could play around with border-radius for this, yes. But using canvas would be better I guess. The caveat is that CSS won't do any magic for you and you will have to calculate every time you add a node. – Thrift

Hmm. Non-circular border-radiuses are pretty fugly in my browser (Firefox), and even ignoring that, I don't think you can produce the curves above using only ellipses. But maybe the curves aren't what the questioner really cares about: only positioning is mentioned. – Wifely

Hm, I didn't think of using CSS only. I'll play around with it a bit, but I'm very sceptic that it's feasible. – Reduplicative

Also, the splines aren't the issue, that's pretty easy using canvas. – Reduplicative

@SteveJessop actually, after thinking about it, it'd be just better to use images for these lines. Three different images would be enough (playing with repeat and/or rotation). – Thrift

Alright, I managed to do it with CSS, it was actually way easier than I thought at first, just placing divs around each node and its subnodes. Thanks for the hint! – Reduplicative