Mindmap viewer for web
npm install @bluzky/mindtreeMindtree is a library which helps to visualize your text content as a mind map. Currently, Mindtree support indented text, markdown support is on the road map.
- [Home page]()
- [Installation]()
- [Basic usage]()
- Document - comming soon
- Install from npm
yarn add @bluzky/mindtree
- Add to your project assets
Just copy mindtree.js to your assets directory
You have to follow these steps to render a mindmap:
1. Build mind map data represented as a hierarchy tree
2. Which layout you want to render as
3. Build a Mindmap object from data and layout
4. Bind a Viewer to a DOM element and render Mindmap
Add this to your html
``html`
`javascript
var text =
Root
- branch 1
+branch 1.1
- branch 2
branch 2.1
* branch 2.2
branch 2.2.1
-Branch 3
- alo
- ola
- ollala
-Branch 4
- Branch 4.1
- Branch 4.1.1
- Branch 4.2
- Branch 4.3;
// parse indented text to hierarchy tree
var data = mindtree.Parsers.TextParser.parse(text);
// choose a layout
var MindmapLayout = mindtree.MindmapLayouts.Standard;
// build Mindmap object
var mindMap = new mindtree.MindMap(data.root, MindmapLayout, {});
mindMap.build();
// binding viewer and render
var viewer = new mindtree.Viewer("#drawing", {});
viewer.render(mindMap);
`
Import required classes
`javascript``
import { MindMap, Viewer, Parsers, MindmapLayout } from "mindtree";
And then follows the same steps as above
- Parser - Indented text
- Layout - Standard - RightLogical
- DownwardOrganizational
- UpwardOrganizational
- LeftLogical
- Thanks leungwensen, This library is inspired by his repo Mindmap layouts. And I still copy the layout code from his source
- Thanks @stetrevor for his library non-layered-tidy-tree-layout
- This project use two.js for the rendering mindmap.