Skip to main content

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

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)