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-SourceFramework agnosticUse without JavaScript frameworkPluginableUse in your own projectimport MindElixir from 'mind-elixir'new MindElixir({...}).init(data)Key FeaturesFluent UXWell designedMobile friendlyLightweight & High performanceEfficient ShortcutsTab - Create a child nodeEnter - Create a sibling nodeF1 - Center the MapF2 - Begin EditingCtrl + C/V - Copy/PasteCtrl + +/- - Zoom In/OutAdvanced FeaturesBulk operations supported

New

Undo / Redo

New

Summarize nodesEasily Styling with CSS variables

New

Left menuNode distributionLeftRightBoth l & rLinkRight click and select LinkClick the target you want to linkModify link with control pointsBidirectional link isAlso available.Node styleFont SizeFont ColorBackground ColorAdd tags

Completed

Add icons😂

www

BolderHyper link🔗Mind 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 & ImportExport as SVGExport as PNG

New

Export JSON dataExport as HTMLEcosystem@mind-elixir/node-menu🔗@mind-elixir/export-xmind🔗mind-elixir-react🔗dangerouslySetInnerHTMLKatex

$$\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

Theme SystemBuilt-in ThemesLatte (Light)Dark ThemeCustom CSS Variables

Flexible

Color Palette Customization

10 Colors

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)