Canvas Based Mind Mapping Library – MindGraph.js

Preview:

Description:

MindGraph.js is a full-featured mind mapping library to render an editable, draggable, zoomable online mind map on an HTML canvas element.

Features:

• Double-click to edit.
• Drag a node to move.
• Drag outside to pan.
• Click+Mousewheel to zoom in/out.
• Also allows to copy & paste nodes using native shortcuts.
• Output the mind map as a JSON.
• Import data from JSON.

How to use it:

1. Install & import the MindGraph.js.

# Yarn
$ yarn add mind-graph-js
# NPM
$ npm install mind-graph-js --save

import mindGraph from 'mind-graph-js';

2. Create a container to hold the mind map.

<div id="app"></div>

3. Initialize the library and create a new mind map instance.

const dom = document.getElementById('app');
const mindMap = new mindGraph.MindMap(dom);
mindMap.render();

4. Add a new node to the mind map.

const rootId = mindMap.rootId;
const nodeId = mindMap.addNode(rootId, 'Node Text',  positionNumber);

5. More API methods.

// remove a node
mindMap.deleteNode(nodeId);
// update a node
mindMap.updateNode(nodeId, 'New Value');
// copy a node
mindMap.copyNode(nodeId);
// cut a node
mindMap.cutNode(nodeId);
// paste a node
mindMap.pasteNode(nodeId);
// export data into JSON
mindMap.toJson();
// load data from JSON
mindMap.loadJson(json);