Generate Interactive Mind Maps with SVG and Brainmap.js

Brainmap.js is a vanilla JavaScript library that creates editable, movable, zoomable, themeable mind maps using SVG.

It’s designed to visualize any hierarchical data with full editing capabilities, but without pulling in any external dependencies like d3.js.

Features:

• Interactive Editing: Built-in context menus, inline editing, and drag-to-pan functionality.
• Programmatic Control: You can add, remove, and modify nodes dynamically through a straightforward API.
Sponsored
• Touch Enabled: Full mobile support, including pinch-to-zoom and touch-friendly interactions.
• Multiple Themes: 5 pre-built themes with custom color configuration options.
• JSON Export: JSON data export with customizable filename options.

Use Cases

• Project Planning: Visualizing project structures, task hierarchies, and workflow dependencies in web applications.
• Knowledge Management: Creating interactive documentation systems where users can explore information architectures.
• Educational Platforms: Building learning tools that allow students to create and modify concept maps collaboratively.
• Decision Trees: Implementing interactive decision-making tools where users can navigate through different choice paths.

How to use it:

1. Download the package and load the following files in your HTML page.

<link rel="stylesheet" href="brainmap.css">
<script src="brainmap.js"></script>

2. If you’re working within a build process, you can install it from NPM:

# NPM
$ npm install brainmap.js

import MindMap from 'brainmap.js';

3. Create a container element to hold your mind map.

<div id="mindmap-container"></div>

4. Create a new MindMap instance and pass the container’s selector and any configuration options.

const mindmap = new MindMap('#mindmap-container', {
  // options here
});

5. Load your data using the setData method. The data needs to be a JavaScript object with id, name, and an optional children array.

const myData = {
  id: 'root',
  name: 'JavaScript',
  children: [
    { id: 'Angular', name: 'Angular' },
    { id: 'React', name: 'React', children: [
      { id: 'ReactNative', name: 'React Native' }
    ]}
    // ...
  ]
};
mindmap.setData(myData);

6. All configuration options to customize your mind map.

• width: The width of the SVG container in pixels.
• height: The height of the SVG container in pixels.
• theme: A string that sets a predefined visual theme. Available options are 'default', 'dark', 'compact', 'professional', and 'vibrant'.
• radiusStep: The distance in pixels between each hierarchical level of the mind map, controlling how spread out the nodes are.
• editable: A boolean (true or false) that enables or disables all user editing features like renaming, adding, or deleting nodes.
• showControls: A boolean that toggles the visibility of the on-screen export and reset buttons.
• showStatus: A boolean that controls whether status messages (e.g., “Node added”) are displayed to the user.
• exportFilename: A string specifying the default filename for the exported JSON data file.
• colors: An object that allows you to override the current theme’s colors. You can specify custom fill, stroke, and text colors for root, branch, and leaf nodes, as well as the color of the link paths.

const mindmap = new MindMap('#mindmap-container', {
  width: 800,
  height: 800,
  theme: 'default', // 'default', 'dark', 'compact'
  radiusStep: 120,
  editable: true,
  showControls: true,
  showStatus: true,
  exportFilename: 'mindmap-data.json',
  colors: {
    root: { fill: '#f97316', stroke: '#dc2626', text: '#ffffff' },
    branch: { fill: '#34d399', stroke: '#059669', text: '#065f46' },
    leaf: { fill: '#60a5fa', stroke: '#2563eb', text: '#1e40af' },
    link: 'rgba(255,255,255,0.6)'
  },
});

7. API methods for interacting with the mind map programmatically.

• setData(data): Loads and renders a new mind map from a hierarchical JSON data object.
• getData(): Returns the current mind map data as a JSON object, reflecting all user or programmatic changes.
• addChild(parentId, 'New Child Name'): Adds a new child node to a specified parent node.
• addSibling(nodeId, 'New Sibling Name'): Adds a new sibling node at the same level as the specified node.
• deleteNode(nodeId): Deletes a specific node and all of its descendants.
• renameNode(nodeId, 'New Name'): Updates the display name of a specific node.
• resetView(): Resets the zoom and pan to center the mind map within the container.
• exportData(): Triggers a browser download of the current mind map data as a JSON file.
• updateConfig({ theme: 'dark', ... }): Updates the mind map’s configuration options on the fly.
• destroy(): Removes the mind map SVG from the DOM and cleans up all associated event listeners.
• findNodeById(data, 'node-id'): Searches the provided data object and returns the node object that matches the given ID.
• findParentById(data, 'child-id'): Searches the provided data object and returns the parent of the node with the given ID.

FAQs

Q: Can I customize the node shapes and sizes?
A: The library uses fixed circular nodes, but you can adjust radius values through the configuration object. Custom shapes require modifying the SVG generation code directly.

Q: How does performance scale with large datasets?
A: SVG rendering performance degrades with hundreds of nodes. The library includes no built-in virtualization, so consider data pagination for datasets exceeding 200 nodes.

Q: Is server-side rendering supported?
A: No, the library requires DOM and SVG APIs for rendering. Consider generating static SVG on the server or using client-side hydration for SSR applications.

Q: Can multiple mind maps exist on the same page?
A: Yes, create separate instances with different container elements. Each instance maintains independent state and configuration.

The post Generate Interactive Mind Maps with SVG and Brainmap.js appeared first on CSS Script.