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

Sandwiches

2

    Egg-related

3

        Egg and cress

4

        Fried egg-chilli-chutney

5

    Meaty

6

        Chicken

7

        Ham and cheese

8

    Vegetarian

9

        Salad?

10

    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

/*Let's style the root*/

2

svg.dugong.gen-0{ stroke-width: 4; }

3

4

/*Connecting lines to first children are dashed*/

5

line.gen-1{ stroke-dasharray: 10 10; }

6

7

/*etc. etc.*/

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

1

Dugong.stalkLength =  100;  // Distance between nodes

2

Dugong.boxMinHeight =  50;  // How big are the smallest boxes?

3

Dugong.boxRatio =       2;  // Width-to-height ratio of boxes.

4

Dugong.canvasMargin = 100;  //Margin around outside of map

5

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