Installation and Usage

Installation

npm i mind-elixir -S

Usage

import MindElixir from 'mind-elixir'

let options = {
  el: '#map', // or HTMLDivElement
}

let mind = new MindElixir(options)

// create new map data
const data = MindElixir.new('new topic')
mind.init(data)

To use Mind Elixir, simply pass an el (representing the target DOM element to be mounted) in the options. For more configurations, you can refer to the complete options.

warning

Since Mind Elixir mounts with a height of 100% of the container, be sure to set the container height to avoid display abnormalities.

<div id="map"></div>
<style>
  #map {
    height: 500px;
    width: 100%;
  }
</style>

Interactions with Mind Maps

• Interactions are similar to common mind mapping applications
• Shortcut keys can be found in the Shortcuts section
• Left mouse button can drag nodes or select multiple nodes
• Right mouse button can drag the canvas
• After selecting "Connect" with the right mouse button, click on another node to connect the two nodes

logo2mind-elixirWhat is Mind ElixirA mind map coreFreeOpen-SourceUse without JavaScript frameworkUse in your own projectimport MindElixir from 'mind-elixir'new MindElixir({...}).init(data)Easy to useUse it like other mind map applicationBasicstab - Create a child nodeenter - Create a sibling nodedel - Remove a nodeLeft menuNode distributionLeftRightBoth l & rLinkRight click and select LinkClick the target you want to linkModify link with control pointsNode styleFont SizeFont ColorBackground ColorAdd tags

Completed

Add icons😂

www

BolderHyper link🔗CautionOnly save manuallySave button in the top-right cornerctrl + SMind Elixir

Mind Map Core

Focus modeRight click and select Focus ModeRight click and select Cancel Focus ModeBottom menuFull screenReturn to CenterZoom inZoom outDraggableDrag a node to another node and the former one will become a child node of latter oneExport dataJSONHTMLSVGdangerouslySetInnerHTMLKatex

$$\left[\begin{array}{cc}x& y\end{array}\right]\left[\begin{array}{cc}a& c\\ b& d\end{array}\right]$$

Code Block

let message = 'Hello world'
alert(message)

Customized Div

Title

Hello world

Data Export and Update

After user interactions with the mind map, the data changes accordingly. You can use the getData method to retrieve the latest data. The data format can be found in Data Export.

const data = mind.getData()

If you need to refresh the current mind map with an entirely new set of data, you can use the refresh method.

mind.refresh(data)