https://github.com/bluzky/mindtree
Render mindmap from indented text or markdown formatted text
https://github.com/bluzky/mindtree
mindmap mindmap-editor mindmap-viewer mindtree
Last synced: 11 months ago
JSON representation
Render mindmap from indented text or markdown formatted text
- Host: GitHub
- URL: https://github.com/bluzky/mindtree
- Owner: bluzky
- License: mit
- Created: 2020-07-31T10:39:07.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-12-07T06:32:01.000Z (over 1 year ago)
- Last Synced: 2025-07-03T10:40:41.624Z (12 months ago)
- Topics: mindmap, mindmap-editor, mindmap-viewer, mindtree
- Language: JavaScript
- Homepage: https://bluzky.github.io/mindtree/
- Size: 6.88 MB
- Stars: 16
- Watchers: 4
- Forks: 2
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Mindtree
`Mindtree` 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
## Installation
- Install from npm
`yarn add @bluzky/mindtree`
- Add to your project assets
Just copy `mindtree.js` to your assets directory
## Basic usage
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`
### 1. Vanilla javascript
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);
```
### 2. With ES6
Import required classes
```javascript
import { MindMap, Viewer, Parsers, MindmapLayout } from "mindtree";
```
And then follows the same steps as above
## Features
- **Parser** - Indented text
- **Layout** - Standard - RightLogical
- DownwardOrganizational
- UpwardOrganizational
- LeftLogical
## Credits
- Thanks [leungwensen](https://github.com/leungwensen), This library is inspired by his repo [Mindmap layouts](https://github.com/leungwensen/mindmap-layouts). And I still copy the layout code from his source
- Thanks @stetrevor for his library [non-layered-tidy-tree-layout](https://github.com/stetrevor/non-layered-tidy-tree-layout)
- This project use [two.js](https://two.js.org/) for the rendering mindmap.