Author: | SouthpawGoblin |
---|---|
Views Total: | 5,219 views |
Official Page: | Go to website |
Last Update: | April 16, 2020 |
License: | MIT |
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);