Creating a mind map - marcelklehr/buzzmap GitHub Wiki

Download the latest version from GitHub (zip|tar) and unpack the source files.

After that, embed the following files on your page:

  <!-- Custom buzzmap styles -->
  <link href="styles.css" type="text/css" rel="stylesheet"/>

  <!-- Core functionality (minified) -->
  <script src="buzzmap.min.js" type="text/javascript"></script>

As buzzmap is a jQuery plugin, you also need jQuery. Additionally you need Raphaël.js for drawing the connecting lines, and jQueryUI for draggable nodes.

First you'll have to create a placeholder element for the mind map (preferably a <div> container):

<div class="mindmap-placeholder"></div>

You can apply position and size styles to this placeholder, in order to set position and size of the mind map. (You can even dynamically resize or move the container, having the mindmap being resized synchronously and following its movements.)

To render a mindmap, select your placeholder and invoke the .buzzmap() method on it, passing the structure of the mindmap.

$('#mindmap-placeholder').buzzmap({
    structure: /* mind map structure */;
});

Every call of .buzzmap() returns the Buzzmap object (see Objects).

The structure option can be one of these

• a jQuery selector (or the DOM object) of an html unordered list, following the rules below
• the html code of such an <ul> as a string
• the serialized JSON data, as returned by the onchange event (see Events).

For now, it's a good start to use nested lists:
<ul>

• <li> (The root node)
• child nodes ...
• <li> (Another root node; will result in a second mindmap)
• child nodes ...

A node should consist of
<li>

• <div> (Contents will be visible in the mind map)
• <ul> (A list of child nodes; optional)
• ...

Here's an example:

<ul>
  <li>
      <div><strong>My Root Node</strong></div>
      <ul>
          <li><div><b>A subnode</b></div></li>
          <li><div>Another subnode</div></li>
          <li><div><span>Yet Another one</span></div></li>
      </ul>
  </li>
</ul>

If you don't want to write a mindmap by hand, learn more about the Edit Mode.

Buzzmap comes with a bunch of options for adjusting the look and feel of the mindmap animation. Below you can see the default values for rendering a mindmap. You don't have to write all options every time, of course -- Just write those you want to alter.

  $('#container').buzzmap({
      structure: null, // Initial mind map structture
      editable: false, // Set to true to interactively add and edit nodes. (see below)

      onchange: function (node, data) {}, // See below
      ondrag: function (root) {},
      onshow: function (node) {},
      onhide: function (node) {},
      onremove: function (node) {},
      fps: function (fps) {},

      attract: 5, // The strength of the attracting force between the nodes.
      repulse: 5, // The strength of the repelling force between the nodes.
      wallRepulse: 0.5, // The strength of the repelling force of the map borders.
      maxForce: 0.25,
      damping: 0.90, // A higher percentage = higher elasticity of the linking lines.
      acceleration: 5, // How fast the nodes can go, on their own.

      lineWidth: '5px', // The width of the linking lines between two nodes.
      lineColor: '#FFF', // The color of the linking lines.
      lineOpacity: 0.3, // The opacity of the linking lines.

      minSpeed: 0.2, // The minimum speed until the animation will stop.
      animationTimeout: 5 // Time in seconds until the animation stops, after leaving it untouched.
  });

See Edit Mode for more details about the editable option.
See Events for a list of descriptions about each event.

Since there's CSS, buzzmap is easy to colorize and shape however you need it to fit in your design.

Have a look at styles.css:

body {
  background:blue;
}
.buzzmap .node {
  z-index: 100;
  cursor: default;
  display: block;
  
  background:red;
  opacity:0.9;
  color:white;
  font: 30px/34px Arial, sans-serif;
  font-size:1em;
  text-align: center;
  
  padding:0 7px;
  border: 2px solid orange;
  -webkit-border-top-left-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-topleft: 20px;
  -moz-border-radius-bottomright: 20px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;	
}
.buzzmap .node a {
  color:#fff;
}
.buzzmap .node.active {
  border-width:5px;
  font-size:1.2em;
}
.buzzmap .node.active a {
  color:#fff;
}
.buzzmap .node.root {
  padding:5px 10px;
  font-size:2em;
}

Here are some descriptions to the used selectors:

• .buzzmap is the class of the buzzmap container (is attached to the original div container you selected).
• .buzzmap .node selects all existing nodes.
• .buzzmap .node.active selects only the active nodes (the nodes whose children are visible).
• .buzzmap .node.root selects only root nodes.