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:

1
2
3
4
5
6
7
8
9
10

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:

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

1

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!

1
2
3
4
5
6
7

/*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:

1
2
3
4
5

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