https://github.com/leungwensen/mindmap-layouts
automatic layout algorithms for mindmaps
https://github.com/leungwensen/mindmap-layouts
layout-algorithm mind-mapping mindmap tree-structure
Last synced: 2 months ago
JSON representation
automatic layout algorithms for mindmaps
- Host: GitHub
- URL: https://github.com/leungwensen/mindmap-layouts
- Owner: leungwensen
- License: mit
- Created: 2017-02-15T06:48:26.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-03-01T10:05:57.000Z (over 8 years ago)
- Last Synced: 2025-03-24T11:42:57.945Z (3 months ago)
- Topics: layout-algorithm, mind-mapping, mindmap, tree-structure
- Language: JavaScript
- Homepage:
- Size: 490 KB
- Stars: 194
- Watchers: 7
- Forks: 36
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
mindmap-layouts
===============
automatic layout algorithms for mindmaps
## input
```json
{
"root": {
"name": "root",
"children": [
{
"name": "child-1",
"children": [
{
"name": "child-1-1"
},
{
"name": "child-1-2",
"children": [
{
"name": "child-1-2-1"
}
]
}
]
},
{
"name": "child-2"
},
{
"name": "child-3"
},
{
"name": "child-4",
"children": [
{
"name": "child-4-1"
},
{
"name": "child-4-2"
}
]
}
]
},
"links": [
{
"source": "child-1-1",
"name": "special link",
"target": "child-2"
}
]
}
```
> Root and each of its descendants are nodes in a mindmap, like Topic in XMind.
> Links are extra edges that connects two nodes in a mindmap, like Relationship in XMind.
Checkout more about .xmind file: [xmind-sdk-javascript](https://github.com/leungwensen/xmind-sdk-javascript)
## Install
```shell
$ npm install mindmap-layouts --save
```
## API
```javascript
const MindmapLayouts = require('mindmap-layouts')
const layout = new MindmapLayouts.Standard(root, options) // root is tree node like above
const rootNode = layout.doLayout() // you have x, y, centX, centY, actualHeight, actualWidth, etc.
```
checkout [here](https://github.com/leungwensen/mindmap-layouts/tree/master/demo/src) for a real world demo
## [demo](http://leungwensen.github.io/mindmap-layouts/demo/)
## layouts
### standard
### right logical
### left logical
### downward organizational
### upward organizational
### [TODO] right fishbone
### [TODO] left fishbone
### [TODO] indented
### [TODO] arc tree
### [TODO] elbow tree
### [TODO] horizontal Timeline
### [TODO] vertical Timeline
## links
- [思维导图自动布局算法](http://leungwensen.github.io/blog/2017/mindmap-drawing-algorithms.html)