Canvas Based Mind Mapping Library – MindGraph.js

Category: Chart & Graph , Javascript | April 16, 2020
Author: SouthpawGoblin
Views Total: 1,744 views
Official Page: Go to website
Last Update: April 16, 2020
License: MIT

Preview:

Canvas Based Mind Mapping Library – MindGraph.js

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);

You Might Be Interested In:


Leave a Reply