mindmap-layouts icon indicating copy to clipboard operation
mindmap-layouts copied to clipboard

automatic layout algorithms for mindmaps

mindmap-layouts

automatic layout algorithms for mindmaps

input

{
    "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

Install

$ npm install mindmap-layouts --save

API

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 for a real world demo

demo

layouts

standard

standard

right logical

right-logical

left logical

left-logical

downward organizational

downward-organizational

upward organizational

upward-organizational

[TODO] right fishbone

[TODO] left fishbone

[TODO] indented

[TODO] arc tree

[TODO] elbow tree

[TODO] horizontal Timeline

[TODO] vertical Timeline

links