安装与使用

安装

npm i mind-elixir -S

使用

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)

要使用 Mind Elixir，在 options 中只要传入一个 el（代表挂载的目标 DOM 元素）即可。更多配置可以查阅完整配置。

注意

因为 Mind Elixir 挂载时高度为容器高度的 100%，所以请务必设置容器高度，否则造成显示异常。

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

对思维导图的操作

• 操作与常见思维导图应用基本一致
• 快捷键可见快捷键章节
• 鼠标左键可拖动节点，或多选节点
• 鼠标右键可拖动画布
• 右键选择“连接”后再点击另一个节点，可连接两个节点

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

数据导出与更新

用户对思维导图的操作后，数据随即改变，可以调用 getData 方法获取最新数据。数据格式可见数据导出。

const data = mind.getData()

有需要使用整组新数据刷新当前思维导图时，可以使用 refresh 方法。

mind.refresh(data)