Dugong

Dugong is a simple, un-sexy, mind-mapping application. If you squint - or if you've spent too long at sea - it might look a bit like a mermaid.

Dugong lets you quickly turn a list like this:

Sandwiches
	Egg-related
		Egg and cress
		Fried egg-chilli-chutney
	Meaty
		Chicken
		Ham and cheese
	Vegetarian
		Salad?
	Other misc.

into an SVG image like this:

Sandwiches Egg-related Egg and cress Fried egg-chilli-chutney Meaty Chicken Ham and cheese Vegetarian Salad? Other misc.

Even better: Dugong will do this automatically, inline, in your browser. Simply include the library somewhere on your page, and then call it:

Dugong.populate("dugong"); //Turn any element with a class "dugong" into a diagram

Your mind maps are so ugly!

Good thing these mind maps are stylable then!

/*Let's style the root*/
svg.dugong.gen-0{ stroke-width: 4; }

/*Connecting lines to first children are dashed*/
line.gen-1{ stroke-dasharray: 10 10; }

/*etc. etc.*/

Or maybe you want to edit some of the more basic properties of your mind-map, like:

Dugong.stalkLength =  100;  // Distance between nodes
Dugong.boxMinHeight =  50;  // How big are the smallest boxes?
Dugong.boxRatio =       2;  // Width-to-height ratio of boxes.
Dugong.canvasMargin = 100;  //Margin around outside of map
Dugong.boxMargin =      10; //Margin inside each box

(Just run these before populating.)

Can I include this in my thing?

That's kind of why I put it on the internet. If it's public, feel free to credit me! It does the ego good. (Actually, if you do use this, I'd love to know. Drop me a line!)

Can I modify this?

Sure! I'd love to know what you've done with it. Unless you did something terrible with it. No one needs to see that.

Grab the source

Dugong on Github