2

Using org-mode to generate mindmaps from heading structure has been elusive. There is a Freemind export, but I don't want to have to fire up an external app, and anyway Freemind mind maps look ugly to me.

What about using org-export-html, along with a custom CSS stylesheet, to generate a mindmap in HTML?

I found this Gist: pure css mindmap with nest list element

It creates HTML mindmaps by styling list elements such as:

ul>li:nth-child(even):after

For an org-mode mindmap export, you would want a CSS stylesheet that used H1, H2, H3 for its mindmap nodes, instead of using list elements as the above does. Nine heading levels would be more than sufficient. The mindmap's HTML would display only headings, hiding non-heading text using something like:

p, li {display:none}

What would such CSS look like? How would you modify the above gist, or create a new CSS stylesheet, to permit such a mindmap export?

incandescentman
  • 6,168
  • 3
  • 46
  • 86
  • [jsFiddle demo](http://jsfiddle.net/roryokane/Sz5t7/) of the [linked Gist](https://gist.github.com/defims/3418187) “pure CSS mindmap with nested list elements” – Rory O'Kane Aug 20 '13 at 19:02
  • 1
    It looks like the CSS in that Gist is kind of hacky. In Firefox and in Chrome, there are vertical lines in the center that shouldn't be there, and the line are too high for the elements on the bottom half. The example also breaks if you delete some elements. I think you can't do a mindmap in pure CSS; you also need JavaScript to lay out the elements properly. Try a library such as [js-mindmap](https://github.com/kennethkufluk/js-mindmap). – Rory O'Kane Aug 20 '13 at 19:07
  • 1
    OK. Anyone know how to do an org-mode export to js-mindmap? – incandescentman Aug 20 '13 at 19:53
  • Is this the same one? http://codepen.io/defims/details/LsIAK It looks fine on mine (OSX chrome). I think HTML/css is sufficient for my needs. The trick is writing a stylesheet to do it from pure org. – incandescentman Aug 21 '13 at 08:17

0 Answers0