Canvas Based Mind Mapping Library – MindGraph.js

Category: Chart & Graph , Javascript | April 16, 2020
Author:SouthpawGoblin
Views Total:5,219 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